Lookbook hotspots

The Lookbook section shows campaign images in a grid. Each image is a Look block, and each look can carry up to three numbered hotspots. A hotspot opens a small card for a product or a collection. Shoppers can add a product to the bag from the card without leaving the page.

1. Add the section

1. Go to Online Store → Themes → Customize.
2. Click Add section and choose Lookbook.
3. Set a Heading and, if you like, a short Text beside it.
4. Set Columns on desktop: 2 to 6. On phones, every look takes the full width.

2. Add looks

Each Look block is one image.

1. Click Add block → Look and choose an Image. Set a focal point on the image in Files to keep the subject in frame.
2. Pick a Shape: Portrait, Tall, Square or Landscape.
3. Tick Span two columns to make a look twice as wide on larger screens. Wide landscape looks next to portrait looks make a good rhythm.
4. Add a Caption if you want a line under the image. Reel numbers the captions 01, 02 and so on.

3. Place the hotspots

Each look has three hotspot groups: Hotspot 1, Hotspot 2 and Hotspot 3. A hotspot shows only when it has a product or a collection.

1. Under Hotspot 1, pick a Product or a Collection. If you pick both, the product wins.
2. Move the pin with Across and Down. Both are percentages of the image: Across 0% is the left edge, Down 0% is the top.
3. Watch the preview while you drag the sliders. Put the pin on the item, not on a face.
4. Repeat for Hotspot 2 and Hotspot 3 if the look shows more than one piece.

The card opens away from the nearest edge, so pins close to the right or bottom edge still open inside the image.

4. What shoppers see

• A product card shows the image, title and price. If the product is available and quick add is on, it also shows an Add to bag button that opens quick add.
• A collection card shows the collection’s image, title and number of products.
• Only one card is open at a time. The Escape key closes it.
• On phones, the pins stay on the image and work by tap.

Quick add is controlled by Theme settings → Product cards → Enable quick add. Turning it off removes the button from hotspot cards and from product cards.