Image with hotspots section
The Image with hotspots section of Local places product and text hotspots on an image, so customers can shop what they see.
Applies to: Local 4.2.1 and later. Added in: Local 2.1.0. Last checked: 2026-10-13 against Local 4.2.1.
The Image with hotspots section puts small dots on a picture. Each dot opens a tooltip with a product (image, title, price and a link) or a short text, so customers can shop the items they see in a lifestyle photo.
Where to find it: Online Store → Themes → Customize → Add section → Image with hotspots
Content
- Image is the picture the hotspots sit on. It is shown at its own proportions, not cropped.
- Mobile image (optional) replaces it on phones. The hotspots then use their mobile positions.
Custom colors
Text and Background set the colors of the tooltips (black text on white by default). The section heading and background use the standard Section design settings, see General section styling.
Hotspot blocks
Add up to 10 hotspots, as Product or Text blocks.
- A Product hotspot shows the product chosen in Select product: its image, price and title, linked to the product page.
- A Text hotspot shows a Title and a Content text, for example the name of a material or a tip.
Every hotspot has the same position settings:
- Desktop hotspot → Vertical offset and Horizontal offset place the dot, in percent of the image height and width (0 is the top or left edge, 100 the bottom or right edge).
- Mobile hotspot → Vertical offset and Horizontal offset place it on phones, and Hide on mobile removes it there.
- Tooltip → Position and Position on mobile open the tooltip above, below, left or right of the dot. Choose the side with free space, so the tooltip is not cut off at the image edge.
Customers click (or tap) a dot to open its tooltip; clicking elsewhere closes it.
Setting up hotspots
Add the section and the image
Select Add section → Image with hotspots and pick the Image. Add a Mobile image if phones need a different crop.
Add a hotspot
Select Add block and choose Product (then Select product) or Text (then fill Title and Content).
Place the dot
Move Vertical offset and Horizontal offset under Desktop hotspot until the dot sits on the item in the preview. Then do the same under Mobile hotspot in the mobile preview.
Point the tooltip
Set Position and Position on mobile to the side of the dot that has room for the tooltip.
Why is my hotspot in the wrong place on mobile?
Because desktop and mobile positions are separate. Switch the editor preview to mobile and adjust Mobile hotspot → Vertical offset and Horizontal offset, or turn on Hide on mobile for that hotspot.
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).
Image with hotspots section: Heading
Where to find it: Image with hotspots → Heading
The Image with hotspots section uses the standard Heading settings, listed in General section styling.
Heading (text field, default: "Image with hotspots").
Subheading (text field, default: "Promote your best products").
Text alignment (dropdown, default: Left). Options: Left, Center.
Show section link (checkbox, default: off): Adds a text link next to the section heading. Fill Link text and Link too.
Link text (text field). Shown only when Show section link is on.
Link (link). Shown only when Show section link is on and Link text is set.
Open link in a new window (checkbox, default: off). Shown only when Link is set and Show section link is on and Link text is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Image with hotspots").
Subheading (text field, default: "Promote your best products").
Image with hotspots section: Content
Where to find it: Image with hotspots → Content
Image (image): Sets the picture the hotspots sit on. It is shown uncropped.
Mobile image (image): Replaces the picture on phones. The hotspots then use their mobile positions.
Image with hotspots section: Custom colors
Where to find it: Image with hotspots → Custom colors
Text (color, default: #000000): Sets the text color of the tooltips.
Background (color, default: #ffffff): Sets the background color of the tooltips.
Image with hotspots section: Section design
Where to find it: Image with hotspots → Section design
The Image with hotspots section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
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 tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Image with hotspots section: Visibility
Where to find it: Image with hotspots → Visibility
The Image with hotspots section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Product block
Where to find it: Image with hotspots → Add block → Product
Select product (product picker): Sets the product the tooltip shows, with 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 from the top edge (0 percent) to the bottom edge (100 percent) of the image, on desktop.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot from the left edge (0 percent) to the right edge (100 percent) of the image, on desktop.
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 from the top to the bottom of the image on screens narrower than 768 px.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot from the left to the right of the image on screens narrower than 768 px.
Hide on mobile (checkbox, default: off): Hides this hotspot on screens narrower than 768 px.
Product block: Tooltip
Where to find it: Image with hotspots → Add block → Product → Tooltip
Position (dropdown, default: Top): Opens the tooltip on this side of the dot. Pick the side with free space so it is not cut off. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top). 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").
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 from the top edge (0 percent) to the bottom edge (100 percent) of the image, on desktop.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot from the left edge (0 percent) to the right edge (100 percent) of the image, on desktop.
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 from the top to the bottom of the image on screens narrower than 768 px.
Horizontal offset (slider 0 to 100 %, default: 50 %): Places the dot from the left to the right of the image on screens narrower than 768 px.
Hide on mobile (checkbox, default: off): Hides this hotspot on screens narrower than 768 px.
Text block: Tooltip
Where to find it: Image with hotspots → Add block → Text → Tooltip
Position (dropdown, default: Top): Opens the tooltip on this side of the dot. Pick the side with free space so it is not cut off. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top). Options: Top, Bottom, Left, Right.