Image with hotspots section
The Image with hotspots section places product and text hotspots on an image in Highlight, with separate positions for mobile.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 3.1.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Image with hotspots section shows an image with up to 10 dots on it. When a customer selects a dot, a tooltip opens with a product (image, title, price and link) or a short text. Use it for a styled room, an outfit or the details of a product. Added in Highlight 3.1.0.
Where to find it: Online Store → Themes → Customize → Add section → Image with hotspots (Storytelling category).
Image
- Image is the picture the hotspots sit on. It keeps its own proportions.
- Mobile image replaces it on screens up to 835 px wide, for example a portrait crop. Only with a mobile image do the hotspots use their mobile positions (see below).
- Heading shows a small title above the image. Default: "Image with hotspots".
- Heading tag sets the HTML level of the heading for search engines. Default: H3.
Custom colors
- Text colors the text in the tooltips. Default: black.
- Background colors the tooltips and the center of the dots. Default: white.
Blocks
Each block is one hotspot. The section holds up to 10 and starts with one Product hotspot.
Product
- Select product picks the product. Its tooltip shows the product image, title and price, and links to the product page. The image uses the shape set in Theme settings → Cart → Aspect ratio.
- Desktop hotspot: Vertical offset and Horizontal offset place the dot, in percent of the image height and width, measured from the top left corner. Default: 50 % and 50 %, the center.
- Mobile hotspot: the same two offsets, used on the mobile image.
- Tooltip: Position and Position on mobile open the tooltip above, below, left or right of the dot.
Text
- Title and Content are the tooltip's text, for example a material and its care.
- Desktop hotspot, Mobile hotspot and Tooltip work as in the Product hotspot.
Placing a hotspot
Upload the image
Select the section and upload Image. If phones need a different crop, also upload Mobile image.
Add a hotspot
Select Add block and choose Product or Text. Pick the product, or write the title and content.
Set the desktop position
Under Desktop hotspot, move Vertical offset and Horizontal offset until the dot sits on the item in the preview.
Set the mobile position
If you uploaded a mobile image, switch the editor preview to mobile and move the offsets under Mobile hotspot until the dot sits on the item in the mobile image.
Choose the tooltip position
Set Position and Position on mobile so the tooltip opens toward the inside of the image, for example Left for a dot near the right edge.
Why are my hotspots in the wrong place on mobile?
Because the mobile image is cropped differently and the hotspots use their mobile positions there. Switch the editor preview to mobile and adjust Vertical offset and Horizontal offset under Mobile hotspot. Without a mobile image, the desktop positions are used on every screen; they stay correct because the same image only gets smaller.
The Mobile hotspot offsets apply only when the section has a Mobile image. Without one, changing them has no effect.
Why does the tooltip not open when I hover the dot?
Tooltips open when the customer clicks or taps the dot, on desktop too. Hovering only makes the dot bigger. Selecting the dot again, or anywhere else on the page, closes the tooltip.
All Image with hotspots settings
Every setting, with its type and default.
Accepts these blocks: Product and Text (up to 10 blocks in the section).
Heading (text field, default: "Image with hotspots").
Image (image): Sets the picture the hotspots sit on, at its own proportions.
Mobile image (image): Replaces the image on screens up to 835 px wide. Only with a mobile image do the hotspots use their Mobile hotspot offsets.
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 tooltips and of the center of the dots.
Image with hotspots section: SEO
Where to find it: Image with hotspots → SEO
Heading tag (dropdown, default: H3): Specify heading level to help search engines index the structure of your page. 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 shown in the tooltip: its image, title and price, linked 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 dot down from the top of the image, in percent of its height.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot across from the left of the image, in percent of its width.
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 dot on the mobile image, in percent of its height from the top. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot on the mobile image, in percent of its width from the left. 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 on which side of the dot the tooltip opens on desktop. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets on which side of the dot the tooltip opens on screens up to 835 px wide. Options: Top, Bottom, Left, Right.
Text block
Where to find it: Image with hotspots → Add block → Text
Title (text field, default: "Title"): Sets the tooltip's title.
Content (rich text, default: "Describe the item"): Sets the tooltip's text.
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 dot down from the top of the image, in percent of its height.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot across from the left of the image, in percent of its width.
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 dot on the mobile image, in percent of its height from the top. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot on the mobile image, in percent of its width from the left. 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 on which side of the dot the tooltip opens on desktop. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets on which side of the dot the tooltip opens on screens up to 835 px wide. Options: Top, Bottom, Left, Right.
Related pages
- Cart theme settings: the Aspect ratio of the product images in the tooltips.
- Image comparison section: two images with a slider.
- Sections: every section you can add.