Lookbook hotspots
Show a styled photo with clickable dots that reveal the products in it.
One photo, such as a styled outfit or a furnished room, with dots (hotspots) on the products in it. Each dot opens a product card with image, name and price, so shoppers buy the complete look.
Add the block
-
Pick the layout
In the mega menu panel of the preview, click Add block. Click Add product, hover over Lookbook hotspots and click Select.
(1) Click Add product, (2) pick Lookbook hotspots. -
Add the photo
In Edit Item, under General, enter the Heading and click Select image under Image. The Hotspots section appears once the block has an image.
The Lookbook hotspots block in the preview, with its settings in Edit Item. -
Place the hotspots
In Hotspots, click the image where a product appears to add a numbered dot. Under each Hotspot, click Select products and pick the product at that spot.
-
Save and publish
Click Save, then Publish.
Settings
General
- Heading
- Text above the photo.
- Image
- The lookbook photo.
- Width
- How much of the mega menu row the block takes: Auto or 8.33% to 100%.
Hotspots
- X / Y
- The dot’s position on the image, in % from the left and from the top. Change it to fine-tune the dot.
- Select products
- The product the dot opens. A hotspot without a product doesn’t show on the image.
- Remove
- Deletes the hotspot.
Up to 6 hotspots per image. If you remove the image, the Hotspots section is hidden until you add one again. Visibility works as on every block; see Settings every block has.
Tips
- Use a photo with space around the products, so the dots and product cards don’t cover each other.
- Place each dot on the product itself, not at the edge of the photo.
- Product cards follow your menu’s product settings: Settings > Advanced > Show add to cart button adds an Add to cart button to them too.
Was this helpful?
Thanks for your feedback! Tell us what was missing
Report an issue