Appearance
Image Hotspot
An image with clickable markers that link to products. Visitors hover or click a marker to see a product card popup. Great for "shop the look" layouts.
Try it
Change the settings below and watch the preview update in real time. Click Split to see settings and preview side by side, or use the tabs to switch between them.
Storefront preview
Settings
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors to use for this section |
| Heading | The title above the image |
| Image | The main image — use a lifestyle photo showing products in context |
| Marker style | The shape of each hotspot marker — dot, pin, or numbered |
Blocks
Hotspot
Each marker is a block positioned on the image:
| Setting | What it does |
|---|---|
| Product | The product to show when someone clicks this marker |
| Horizontal position | Where the marker sits left to right (0–100%) |
| Vertical position | Where the marker sits top to bottom (0–100%) |
| Label | An optional text label next to the marker |
Add as many hotspots as the image can accommodate clearly.
Tips
- Use a lifestyle photo showing products in context — a styled room, a complete outfit, or a table setting. Then pin hotspots to each product in the scene.
- Don't overcrowd the image. Three to five hotspots is plenty. More than that and the markers start overlapping, especially on mobile.