Shop the Look
An interactive section that pairs a lifestyle image with product hotspots. Customers click dots on the image to browse matching products in a carousel.
How It Works
- Upload a lifestyle image showing a model wearing or using products
- Add hotspot blocks — each linked to a product
- Position each hotspot over the product in the image using X/Y sliders
- Customers click a hotspot to see that product in the carousel
Settings
| Setting | What it does |
|---|---|
| Heading | Section heading (default: "Shop the look") |
| Heading size | Small, Medium, Large |
| Image | The lifestyle/lookbook image |
| Layout | Image first (left) or Text first (right) |
| Color scheme | Scheme 1–5 |
Hotspot Blocks
Each hotspot links to one product. Add up to 4 hotspots.
| Setting | What it does |
|---|---|
| Product | The product this hotspot reveals |
| Horizontal position | Left (0%) to Right (100%) |
| Vertical position | Top (0%) to Bottom (100%) |
Image Recommendations
- Dimensions: 1200×1600px (3:4 portrait ratio)
- Style: Lifestyle shots — products worn or styled in context
- Composition: Space products apart so hotspots don't overlap
- Background: Clean backgrounds make the white dots easier to see
Tips
- 3–4 hotspots per image — too many feel cluttered
- Position dots directly on the product, not next to it
- The carousel uses a fade transition — customers see one product at a time
- Dots pulse subtly to invite interaction
- On mobile, the image stacks above the carousel