Image with hotspots section
The Image with hotspots section places clickable dots on an image in Split that show a product or a text tooltip, with separate mobile positions.
Applies to: Split 5.1.0 and later. Added in: Split 4.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Image with hotspots section shows an image across the full width of the page with small dots on it. A customer who clicks a dot sees a tooltip with a product, or with a short text.
Where to find it: select Add section in the theme editor, then choose Image with hotspots.
The image
- Image sets the picture. It is shown at its natural height, never cropped, so the dots stay on the same spot of the picture at every screen width.
- Mobile image (optional) replaces the image on screens 768 px wide and narrower. Use a portrait crop of the same photo. Setting it also unlocks separate dot positions for mobile (see below).
- Text and Background under Custom colors set the tooltip colors and the dot color. The defaults are black text on white.
Placing a hotspot
Each dot is a block: Product for a product tooltip or Text for a text tooltip.
Add a hotspot block
Select the section in the theme editor sidebar, select Add block and choose Product or Text.
Fill the tooltip
For a Product block, pick the product in Select product. For a Text block, type the Title and the Content.
Move the dot
Under Desktop hotspot, set Vertical offset (0 percent is the top edge of the image, 100 the bottom) and Horizontal offset (0 percent is the left edge, 100 the right).
Choose where the tooltip opens
Under Tooltip, set Position to Top, Bottom, Left or Right of the dot. Use Bottom for a dot near the top edge, Left for a dot near the right edge.
In the theme editor, selecting a hotspot block opens its tooltip, so you can check the position while you move it.
Blocks
You can add up to 10 hotspot blocks in one section, Product and Text blocks together.
Product
- Select product sets the product. The tooltip shows its featured image, title and price (with the compare-at price when it is on sale) and links to the product page.
- Vertical offset and Horizontal offset under Desktop hotspot place the dot, in percent of the image.
- Vertical offset and Horizontal offset under Mobile hotspot place the dot on the mobile image. They appear only when the section has a Mobile image.
- Position under Tooltip sets the side the tooltip opens on; Position on mobile does the same on screens 768 px wide and narrower, and appears only with a Mobile image.
Text
- Title and Content fill the tooltip. The tooltip opens only when Title is filled in.
- Vertical offset and Horizontal offset under Desktop hotspot and Mobile hotspot place the dot. The Mobile hotspot offsets are always shown here, but they work only when the section has a Mobile image.
- Position and Position on mobile under Tooltip set the side the tooltip opens on.
Mobile image and mobile hotspots
Without a Mobile image, phones show the same image with the dots at the desktop positions. With a Mobile image, each block uses its Mobile hotspot offsets on screens 768 px wide and narrower, so set them for every block once you add the mobile image.
How many hotspots can I add?
Up to 10 per section, Product and Text blocks together. For more, split the picture into two Image with hotspots sections.
Why does a dot open no tooltip?
Because the Text block has no Title. A Text block without a title shows the dot with nothing to open, even when Content is filled in. A Product block with no product shows a sample product until you pick one. Customers close an open tooltip by clicking the dot again, clicking anywhere else or pressing Esc.
All Image with hotspots settings
Every setting in this group, with its type and default.
Accepts these blocks: Product and Text (up to 10 blocks in the section).
Image (image): Sets the image, shown across the full width at its natural height, without cropping.
Mobile image (image): Replaces the image on screens 768 px wide and narrower, and turns on the Mobile hotspot offsets of every hotspot block.
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 hotspot tooltips.
Background (color, default: #ffffff): Sets the background color of the hotspot tooltips and the color of the hotspot dots.
Product block
Where to find it: Image with hotspots → Add block → Product
Select product (product picker).
Product block: Desktop hotspot
Where to find it: Image with hotspots → Add block → Product → Desktop hotspot
Vertical offset (slider 0 to 100 %, default: 50 %).
Horizontal offset (slider 0 to 100 %, default: 50 %).
Product block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Product → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %). Shown only when the section's Mobile image is set.
Horizontal offset (slider 0 to 100 %, default: 50 %). Shown only when the section's Mobile image is set.
Product block: Tooltip
Where to find it: Image with hotspots → Add block → Product → Tooltip
Position (dropdown, default: Top). Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top). Options: Top, Bottom, Left, Right. Shown only when the section's Mobile image is set.
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 %).
Horizontal offset (slider 0 to 100 %, default: 50 %).
Text block: Mobile hotspot
Where to find it: Image with hotspots → Add block → Text → Mobile hotspot
Vertical offset (slider 0 to 100 %, default: 50 %).
Horizontal offset (slider 0 to 100 %, default: 50 %).
Text block: Tooltip
Where to find it: Image with hotspots → Add block → Text → Tooltip
Position (dropdown, default: Top). Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top). Options: Top, Bottom, Left, Right.
Related pages
- Shop the look section: a photo on one half and its products in a slider on the other.
- Image section: one uncropped image without dots.
- Image comparison section: two images with a drag handle.
Image comparison
The Image comparison section shows two images with a slider that customers drag to compare them in Split, horizontal or vertical, with labels.
Images with text
The Images with text section shows up to 4 images side by side in Split, each with tagline, title, link and button, half or full screen height.