Image with Hotspots
Add interactive clickable hotspots to product or lifestyle images — visitors click a dot to see product details, descriptions, or links.
Turn one editorial photo into a shoppable scene. Place interactive pins on a lifestyle image so shoppers can tap a look and buy the exact products in it — the "shop the look" experience, right on your homepage or collection page.
How to add
In the Theme Editor, click Add section
Select Image with Hotspots and upload a Desktop image (and a Mobile image)
Click Add block → Product hotspot or Text hotspot for each pin
Drag each pin into place and Save
Everything else — heading, colors, and spacing — is adjusted live in the editor.
Good to know
Two kinds of pins. A Product hotspot links a product and shows its card on tap; a Text hotspot drops a text callout (a note, a price, a detail) anywhere on the image.
Shop without leaving. Turn on Open product in Quick view so a product pin opens the full product in a pop-up — add to cart without going to the product page.
Mobile is placed separately. Set a Mobile image and give each pin its own mobile position — the phone crop is different, so pins set for desktop will land in the wrong spot otherwise.
Aim the card. On hover, a pin reveals a small card with the product and its link. Each pin's Position (top/bottom, left/center/right) controls where that card sits relative to the dot — so it doesn't run off the edge of the image.
Best practices
Use a clean lifestyle or flat-lay shot with breathing room around each product — crowded images make pins hard to tap.
Desktop looks best with landscape (3:2) or wide (16:9) images; mobile with portrait (4:5) or square (1:1).
Keep it to a handful of pins — a wall of dots reads as clutter, not curation.
Related
Last updated
Was this helpful?