Image with hotspots section
The Image with hotspots section of Combine places product and text hotspots on an image, with separate positions for mobile.
Applies to: Combine 4.2.0 and later. Added in: Combine 2.1.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Image with hotspots section places small round markers on an image. A product hotspot opens a tooltip with the product's image, title and price that links to the product; a text hotspot shows a short title and description.
Where to find it: in the theme editor, select Add section and choose Image with hotspots. Add up to 10 hotspots.
Placing a hotspot
Upload the image
Select Add section, choose Image with hotspots and upload the picture in Image under Content.
Add a block per hotspot
Select Add block and choose Product for a product on the image, or Text for a note. On a Product block, pick the product in Select product.
Move the hotspot to its spot
Under Desktop hotspot, set Vertical offset (0 percent is the top edge, 100 percent the bottom) and Horizontal offset (0 percent is the left edge, 100 percent the right). The preview moves the marker while you drag.
Choose where the tooltip opens
Under Tooltip, set Position to Top, Bottom, Left or Right of the marker, so the tooltip stays inside the image. Set Position on mobile too.
Check mobile
Preview the page on mobile. If you uploaded a Mobile image, set the Mobile hotspot Vertical offset and Horizontal offset of every block for that image.
The Mobile hotspot offsets work only when the section has a Mobile image. Without one, phones show the desktop image with the Desktop hotspot offsets.
Content
- Image is the picture the hotspots sit on. It shows at its own proportions, uncropped.
- Mobile image (optional) replaces it on screens narrower than 768 px, with its own hotspot positions.
Custom card design
Border radius rounds the corners of the image, 0 to 30 px.
Custom colors
- Background sets the color of the markers and the tooltips (default white).
- Text sets the color of the text in the tooltips (default black).
The section heading, Decrease top margin and Heading tag work as described in General section styling. In this section the Heading tag default is H3.
Blocks
Product
- Select product is the product. The tooltip shows its first image, title and price, and links to the product page.
- Vertical offset and Horizontal offset under Desktop hotspot and Mobile hotspot place the marker, in percent of the image height and width.
- Position and Position on mobile under Tooltip set the side the tooltip opens on.
Text
- Title and Content are the tooltip text. Content takes bold, italic and links.
- The offsets and tooltip positions work as on the Product block.
Why are my hotspots in the wrong place on mobile?
Because the section has no Mobile image, or the mobile offsets do not match it. Without a mobile image, phones use the desktop offsets on the desktop image, which is usually right. With a mobile image, set the Mobile hotspot offsets of every block for that image.
Can customers add to cart from a hotspot?
Not from the tooltip; it links to the product page. To let customers buy without leaving the page, use Shop the look, which shows the image next to product cards with a quick buy button.
All Image with hotspots settings
Every setting of this section, with its type and default.
Accepts these blocks: Product and Text (up to 10 blocks in the section).
Image with hotspots section: Section heading
Where to find it: Image with hotspots → Section heading
The Image with hotspots section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Image with hotspots"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Share your best offers").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Image with hotspots"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Image with hotspots section: Content
Where to find it: Image with hotspots → Content
Image (image): Sets the picture the hotspots sit on. It shows uncropped.
Mobile image (image): Replaces the image on screens narrower than 768 px. Only with a Mobile image do the Mobile hotspot offsets apply.
Image with hotspots section: Custom card design
Where to find it: Image with hotspots → Custom card design
Border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the image.
Image with hotspots section: Custom colors
Where to find it: Image with hotspots → Custom colors
Text (color, default: #000000): Sets the color of the text in the tooltips.
Background (color, default: #ffffff): Sets the color of the markers and the tooltips.
Image with hotspots section: Gutter
Where to find it: Image with hotspots → Gutter
The Image with hotspots section uses the standard Gutter settings, listed in General section styling. Not available in this section: Remove bottom margin.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller.
Image with hotspots section: SEO
Where to find it: Image with hotspots → SEO
The Image with hotspots section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H3): Sets the HTML level of the section heading for search engines; span gives it no level. Options: H1, H2, H3, H4, span.
Product block
Where to find it: Image with hotspots → Add block → Product
Select product (product picker): Sets the product. Its tooltip shows its image, title and price and links to the product page.
Product block: Desktop hotspot
Where to find it: Image with hotspots → Add block → Product → Desktop hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Places the marker from the top edge (0 percent) to the bottom edge (100 percent) of the image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the marker from the left edge (0 percent) to the right edge (100 percent) of the image.
Product block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Product → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Places the marker on the Mobile image. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the marker on the Mobile image. Used only when the section has a Mobile image.
Product block: Tooltip
Where to find it: Image with hotspots → Add block → Product → Tooltip
Position (dropdown, default: Top): Sets the side of the marker the tooltip opens on. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets the side of the marker the tooltip opens on, on screens narrower than 768 px. Options: Top, Bottom, Left, Right.
Text block
Where to find it: Image with hotspots → Add block → Text
Title (text field, default: "Title").
Content (rich text, default: "Describe the item"): Sets the tooltip text. Supports bold, italic and links.
Text block: Desktop hotspot
Where to find it: Image with hotspots → Add block → Text → Desktop hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Places the marker from the top edge (0 percent) to the bottom edge (100 percent) of the image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the marker from the left edge (0 percent) to the right edge (100 percent) of the image.
Text block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Text → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Places the marker on the Mobile image. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the marker on the Mobile image. Used only when the section has a Mobile image.
Text block: Tooltip
Where to find it: Image with hotspots → Add block → Text → Tooltip
Position (dropdown, default: Top): Sets the side of the marker the tooltip opens on. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets the side of the marker the tooltip opens on, on screens narrower than 768 px. Options: Top, Bottom, Left, Right.
Related pages
- Shop the look section: an image next to buyable product cards.
- Image section: one image without hotspots.
- General section styling: the section heading settings.