Shoppable image
One large image with hotspot dots that open product cards on hover/tap.
Updated 2026-05-09
A single editorial image with up to 8 hotspots; each hotspot links to a product and opens a small product peek card on click.
Section settings
| Setting | Notes |
|---|---|
| Background image (desktop / mobile) | Mobile override optional |
| Container width | Boxed / Full width |
| Heading + Editorial label | Optional headline overlay |
| Content position | 9-position grid |
Block: Hotspot
Each hotspot is a block with:
| Setting | Notes |
|---|---|
| Product | Picker — used in the peek card |
| Horizontal (desktop) | 10–90% from left |
| Vertical (desktop) | 10–90% from top |
| Horizontal / Vertical (mobile) | Independent — needed since mobile composition differs |
Behavior
- Click a dot → product peek card appears, anchored above or below the dot to avoid clipping.
- Click anywhere else → closes the peek.
- ESC key → closes the peek.
- Mobile: peek shows below the image inside a docked panel (more space than the hover card).
Tips
- Place dots ON the product (sleeve cuff, shoe lace, jewellery clasp), not next to it. Customers tap exactly the area they're curious about.
- Set mobile coordinates separately when your mobile crop shifts the composition.
- Limit to 4–5 hotspots per image — more becomes visually cluttered.
Need a hand? Contact support.