Lookbook Section

Create shoppable images with clickable product hotspots - perfect for "shop the look" features.

Adding a Lookbook

1. Open the theme editor
2. Click Add section
3. Select Lookbook

Image Setup

Selecting an Image

1. Click Select image in section settings
2. Upload a lifestyle or lookbook image
3. Recommended: High-resolution image showing multiple products

Image Ratio

Control the image aspect ratio:

| Option | Best For | |--------|----------| | Adapt | Uses image's natural ratio | | 1:1 | Square, Instagram-style | | 3:4 | Portrait orientation | | 4:5 | Tall portrait |

Adding Hotspots

Hotspots are clickable points that reveal product information.

Creating a Hotspot

1. Click Add block
2. Select Hotspot
3. Choose a product to link

Positioning Hotspots

Set the exact position using percentages:

• Horizontal position - 0% (left) to 100% (right)
• Vertical position - 0% (top) to 100% (bottom)

Tip: Preview your page while adjusting to place hotspots precisely on products.

Example Positions

| Item Location | Horizontal | Vertical | |---------------|------------|----------| | Top-left corner | 10% | 10% | | Center | 50% | 50% | | Bottom-right | 90% | 90% |

Hotspot Styles

Choose how hotspots appear:

| Style | Appearance | |-------|------------| | Dot | Simple circular dot | | Ring | Dot with outer ring (default) | | Number | Numbered indicators (1, 2, 3...) |

Hotspot Color

Customize the hotspot color to match your brand or contrast with the image.

How Hotspots Work

1. Customer sees pulsing/animated hotspots on image
2. Hovering or clicking a hotspot reveals a product card
3. Product card shows image, title, price
4. Click leads to product page or adds to cart

Header Content

Add optional header content above the lookbook:

Subheading

Small text introducing the lookbook.

Heading

Main title (e.g., "Shop the Look", "Spring Collection")

Text

Brief description or styling tips.

Best Practices

Image Selection

• Use editorial/lifestyle photography
• Ensure products are clearly visible
• Good lighting on all featured items
• Avoid cluttered backgrounds

Hotspot Placement

• Place hotspots directly on products
• Don't overlap hotspots
• Leave enough space between hotspots for mobile tapping
• Test on mobile devices

Product Selection

• Feature 3-6 products per lookbook
• Include variety (tops, bottoms, accessories)
• Ensure all products are in stock
• Use products with good imagery for popups

Use Cases

• Outfit of the day features
• Room/interior design showcases
• Gift guide presentations
• Styled collection displays

Mobile Experience

On mobile:

• Hotspots remain tappable
• Product cards appear as overlays
• Touch-friendly spacing important