Image with hotspots section
The Image with hotspots section of Borders places product and text hotspots on an image, with separate positions for desktop and mobile.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.2.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Image with hotspots section shows one large image with numbered dots on it. Each dot points to a product or a short text, so customers can see what is in the picture, for example each piece of furniture in a room.
Where to find it: Online Store → Themes → Customize → Add section → Image with hotspots
Image
- Image is the main picture. It keeps its own aspect ratio; it is not cropped.
- Mobile image (optional) replaces it on screens narrower than 1024 px. Use it when the desktop image is too wide for phones.
- On desktop, a list of the hotspots sits next to the image. Selecting a dot highlights its item in the list, and selecting a list item highlights its dot.
- On mobile, the list is hidden. Selecting a dot opens its details over the image.
- Remove border radius and Remove inner padding & border radius (Inner content design) change the frame around the image.
- The optional section heading and the section footer button (Button label, Button link) work as in other sections. See General section styling.
Product hotspots
- A Product block links a dot to the product chosen in Select product.
- Its details show the product title, the price (with the compare-at price when the product is on sale) and a "View product" button to the product page.
- Desktop hotspot: Vertical offset and Horizontal offset (0 to 100 %) place the dot, measured from the top left corner of the image.
- Mobile hotspot: the same two offsets for the mobile image.
Text hotspots
- A Text block shows a Title and a short Content text instead of a product, for example a material or a detail of the photo.
- It has the same Desktop hotspot and Mobile hotspot offsets as the Product block.
The dots are numbered in the order of the blocks. Drag the blocks to change the numbers.
The Mobile hotspot offsets are used only when the section has a Mobile image. Without one, the dots keep their desktop position on mobile, which matches the same image.
Setting up hotspots
Add the section and the image
Select Add section → Image with hotspots and choose the Image. If the image is too wide for phones, add a Mobile image with a different crop.
Add a product hotspot
Select Add block → Product and choose the product in Select product.
Place the dot on desktop
Under Desktop hotspot, move Vertical offset and Horizontal offset until the dot sits on the product in the preview. 0 % is the top or left edge, 100 % the bottom or right edge.
Place the dot on mobile
If you added a Mobile image, switch the preview to mobile and set the offsets under Mobile hotspot.
Add details
Add Text blocks for details that are not products, and place them the same way.
Why are my hotspots in the wrong place on mobile?
The mobile image has a different crop than the desktop image, so the desktop offsets point elsewhere. Set the offsets under Mobile hotspot for each block; they are used only when a Mobile image is set. On tablets, between 768 and 1023 px, the mobile image shows with the desktop offsets, so check that size too.
All Image with hotspots settings
Every setting on this page, with its type and default.
Accepts these blocks: Product and Text (up to 6 blocks in the section).
Image with hotspots section: Section heading
Where to find it: Image with hotspots → Section heading
Heading (text box, default: "Image with hotspots").
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Image with hotspots section: Content
Where to find it: Image with hotspots → Content
Image (image): Sets the main image, shown at its own aspect ratio.
Mobile image (image): Replaces the image on screens narrower than 1024 px. The Mobile hotspot offsets of the blocks are used only when this is set.
Image with hotspots section: Section footer
Where to find it: Image with hotspots → Section footer
Button label (text field).
Button link (link).
Open link in a new window (checkbox, default: off).
Image with hotspots section: Section design
Where to find it: Image with hotspots → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Image with hotspots section: Inner content design
Where to find it: Image with hotspots → Inner content design
Remove border radius (checkbox, default: off): Makes the image frame corners square.
Remove inner padding & border radius (checkbox, default: off): Removes the padding and rounded corners around the image.
Product block
Where to find it: Image with hotspots → Add block → Product
Select product (product picker): Sets the product of this hotspot. Its title, price and a View product button show in the list.
Product block: Desktop hotspot
Where to find it: Image with hotspots → Add block → Product → Desktop hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the top of the image, in percent.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the left of the image, in percent.
Product block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Product → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the top of the mobile image, in percent. Used only with a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the left of the mobile image, in percent. Used only with a Mobile image.
Text block
Where to find it: Image with hotspots → Add block → Text
Title (text field, default: "Product detail"): Sets the bold title of this hotspot's details.
Content (text field, default: "Describe specific features and benefits of your product."): Sets the short text of this hotspot's details. Plain text only.
Text block: Desktop hotspot
Where to find it: Image with hotspots → Add block → Text → Desktop hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the top of the image, in percent.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the left of the image, in percent.
Text block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Text → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the top of the mobile image, in percent. Used only with a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the dot's distance from the left of the mobile image, in percent. Used only with a Mobile image.
Related pages
- Shop the look section: an image next to a list of products.
- Shoppable videos section: videos linked to products.
- Recommended image sizes: image sizes for Borders.