Image with Hotspots

Turn one lifestyle photo into a shoppable scene — pin product and text hotspots anywhere on the image and let visitors buy from the picture.

You have the photograph that sells the whole room, the whole outfit, the whole setup — and underneath it, a list of product cards nobody connects to it. Image with Hotspots closes that gap: pin markers directly onto the picture, and the visitor buys from inside the scene they fell for.

At a glance

Where to find it	Add section → Media
Blocks	Product hotspot and Text hotspot — no limit on either
Positioning	Percentage sliders, 5–95, with separate desktop and mobile values
Allowed on	Any template
Typical use	Shop-the-look, room scenes, feature callouts

---

How to add

1

Add the section

Click Add section and pick Image with hotspots from the Media group.

2

Upload the scene

One image carries the whole section, so choose one with breathing room around each product — a tightly packed flat-lay leaves nowhere to put a marker.

3

Add a hotspot

A Product hotspot links to a product; a Text hotspot just says something. Add as many as the image can carry.

4

Position it with the sliders

There's no dragging on the preview: each hotspot has Vertical position and Horizontal position sliders running from 5 to 95 percent. Move them and watch the marker travel.

5

Set the mobile position

Each hotspot also has mobile vertical and horizontal sliders, defaulting to 30 / 30. They only take effect under one condition — see the warning below.

Mobile hotspot positions only apply when a mobile image is set. Without one, the section reuses the desktop coordinates on every screen — so adjusting the mobile sliders appears to do nothing. If your markers drift off their products on a phone, upload a Mobile image first; the mobile positions start working the moment you do.

Good to know

• Hotspots are never hidden on mobile. Every marker you place shows up on a phone too. Six hotspots that look elegant at desktop width can cover half a small screen — this is the main reason to keep the count down.
• The sliders stop at 5 and 95. You can't pin a marker to the very edge of the image, which is deliberate: an edge hotspot would have nowhere to open its card.
• Quick view or product page, your choice. Open product in 'Quick view' decides whether a product hotspot opens the quick-view popup or sends the visitor to the product page. Quick view keeps them in the scene; the product page gives them the full description.
• Text hotspots aren't a lesser version. Use them for details that aren't products — the material, the finish, the year, the technique. They turn a photo into a caption-free explainer.
• The section takes the usual content blocks too, so a heading and a line of copy can sit with the image without a separate section above it.

Customization ideas

Shop the look

One styled outfit, three or four product hotspots. The single highest-intent use of the section: the visitor already likes the combination, so make every piece of it buyable.

Shop the room

An interior shot with hotspots on the lamp, the chair, the rug. Furniture and homeware stores get more from this section than anyone else.

Feature callouts

A single product photographed large, with Text hotspots marking the stitching, the zip, the lining. A spec list people actually read.

Bundle builder

A flat-lay of a set — the kit, the refill, the case — with a hotspot on each. Sells the bundle without needing bundle software.

---

Settings reference

Section settings

Setting	What it does
Image	The scene the hotspots sit on.
Mobile image	A separate crop for small screens. Required for mobile hotspot positions to apply.
Open product in 'Quick view'	Product hotspots open the quick-view popup instead of linking to the product page.

Section layout, Color and Spacing — the standard Volume groups.

Block reference

Product hotspot — a marker tied to a product.

Setting	What it does
Product	The product the marker opens.
Vertical position / Horizontal position	Desktop placement, 5–95%.
Mobile vertical / Mobile horizontal position	Placement on small screens, 5–95%, default 30 / 30. Only used when a mobile image is set.

Text hotspot — a marker that shows text instead of a product, with the same four position sliders.

Content blocks — the usual Volume set around the image.

Best practices

• Three to five hotspots. Enough to feel rich, few enough to stay readable — and remember they all survive to mobile.
• Shoot the photo for the hotspots. Leaving space around each product at the shoot is far easier than fighting a crowded frame in the editor.
• Place markers beside products, not on top of them. A marker covering the thing it sells defeats the purpose.
• Check every hotspot on a real phone. The sliders are percentages of a different crop; what lines up at 1440 px rarely lines up at 390 px.

Related

• Media with Text — when the explaining needs sentences, not markers
• Image Slideshow & Stories Slideshow — another shoppable-image format
• Image Comparison — for showing a difference rather than pointing at details