Image with hotspots section
The Image with hotspots section places clickable points on an image in Kingdom that show a product or a short text in a tooltip.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 5.1.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Image with hotspots section places clickable dots on an image. Each dot opens a tooltip with a product (image, title and price, linked to the product page) or with a short text. Kingdom 5.1.0 added it.
Where to find it: select Add section in the theme editor, then choose Image with hotspots (Add section category Storytelling).
Setting up a hotspot
Add the section and the image
Select Add section → Image with hotspots, then upload the Image. The image shows at its own proportions, without cropping.
Add a hotspot block
Select Add block and choose Product or Text. In a Product block, pick the product in Select product. In a Text block, type the Title and the Content.
Move the dot
Under Desktop hotspot, set Vertical offset (the distance from the top of the image, in percent) and Horizontal offset (the distance from the left), while you watch the dot in the preview. Both start at 50, the center of the image.
Set the tooltip position
Under Tooltip, choose where the tooltip opens next to the dot: Top, Bottom, Left or Right. Pick the side with the most room, so the tooltip stays on the screen, for example Left for a dot near the right edge.
Set the mobile position
If you use a Mobile image, switch the preview to mobile and set the offsets under Mobile hotspot, and Position on mobile under Tooltip.
The section holds up to 10 hotspots. Customers select a dot to open its tooltip; selecting another dot or anywhere else on the page closes it.
Mobile image and colors
- Mobile image (optional) replaces Image on screens 768 px wide or less. Use it when the desktop image is too wide to show the dots clearly on a phone.
- Text and Background under Custom colors set the tooltip colors (default black text on white). Background also colors the dots.
- Enable inner content spacing (default off) adds side padding and a space below the image. See General section settings.
The product tooltip shows the product's featured image in the shape of Theme settings → Cart → Aspect ratio.
The Mobile hotspot offsets are used only when the section has a Mobile image. Without one, phones show the desktop image with the dots in their desktop positions.
Why are my hotspots in a different place on mobile?
Because the section has a Mobile image and the dots use the Mobile hotspot offsets on screens 768 px wide or less. Those offsets start at 50 percent, so new dots sit in the center of the mobile image until you move them. Switch the preview to mobile and set Vertical offset and Horizontal offset under Mobile hotspot for each block.
Why is the tooltip cut off at the edge of the screen?
Because it opens on the side where there is no room. Change Position (and Position on mobile) to the side facing the center of the image, for example Right for a dot near the left edge.
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 the dots sit on. It shows at its own proportions, without cropping.
Mobile image (image): Replaces Image on screens 768 px wide or less. Only with a mobile image do the dots use the Mobile hotspot offsets.
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 and the color of the dots.
Image with hotspots section: Gutter
Where to find it: Image with hotspots → Gutter
Enable inner content spacing (checkbox): Adds the side padding and the space below the section from Theme settings → Layout. Off, the image runs edge to edge.
Product block
Where to find it: Image with hotspots → Add block → Product
Select product (product picker): Selects 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 %): Sets the distance of the dot from the top of the image, in percent.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the distance of the dot 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 distance of the dot from the top of the mobile image, in percent. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the distance of the dot from the left of the mobile image, in percent. 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 dot where the tooltip opens on desktop. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets the side of the dot where the tooltip opens on screens 768 px wide or less. 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 text of the tooltip under its title.
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 distance of the dot from the top of the image, in percent.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the distance of the dot 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 distance of the dot from the top of the mobile image, in percent. Used only when the section has a Mobile image.
Horizontal offset (slider 0 to 100 %, default: 50 %): Sets the distance of the dot from the left of the mobile image, in percent. 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 dot where the tooltip opens on desktop. Options: Top, Bottom, Left, Right.
Position on mobile (dropdown, default: Top): Sets the side of the dot where the tooltip opens on screens 768 px wide or less. Options: Top, Bottom, Left, Right.
Related pages
- Shop the look section: an image next to a slider of products.
- Image section: one image without hotspots.
- Cart theme settings: the aspect ratio of the product images in tooltips.
- General section settings: inner content spacing.