Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Lookbook. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Add a Look block for each scene and select its Image, alt text, Heading and Caption.
- Inside each Look, add Product blocks and select the products shown in that scene.
- Choose Hotspot, Split, Products below or Slideshow. For Slideshow, also choose its content layout.
- For hotspot presentations, configure each product marker's desktop position and opening direction.
- Choose the look and product layouts for mobile, set mobile marker positions and test every product link or purchase panel. After moving a Slideshow section in the editor, check that one Next click advances one look.
Main settings to review
| Setting | Choices or control |
|---|---|
| Layout | Hotspot · Split · Products below · Slideshow |
| Slideshow content layout | Hotspot · Split · Products below |
| Mobile layout | Horizontal scroll · Stack |
| Mobile product layout | Horizontal scroll · Stack |
| Look image ratio | Adapt to image · Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) |
| Marker size | 28–56 px; step 2 |
Blocks and content
This section allows up to 12 direct blocks. Nested blocks have their own parent-specific choices and limits.
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
Content and media
- Use scene images that visibly contain the selected products. Around 1600–2400 px for a large look is a useful starting point.
- The scene and its products are separate selections. A photo does not automatically recognize products or generate hotspots.
Check the mobile layout
- Configure both the look sequence and the product sequence. Mobile hotspot coordinates need checking after image ratio changes.
Common questions and fixes
- A scene has no linked products: add Product blocks inside that Look.
- Only the slideshow frame changes: review Slideshow content layout for how products should appear.
- A marker covers an unrelated object on mobile: adjust its mobile coordinates.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (38)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Layout | Hotspot · Split · Products below · Slideshow | Default: Hotspot. |
| Layout / Looks per row on desktop | 2–4; step 1 | Default: 3. This control appears only when the relevant layout or related option is selected. |
| Layout / Looks per row on tablet | 1–3; step 1 | Default: 2. This control appears only when the relevant layout or related option is selected. |
| Layout / Mobile layout | Horizontal scroll · Stack | Default: Horizontal scroll. This control appears only when the relevant layout or related option is selected. |
| Layout / Mobile look width | 70–100 %; step 5 | Default: 85. This control appears only when the relevant layout or related option is selected. |
| Layout / Slideshow content layout | Hotspot · Split · Products below | Default: Split. This control appears only when the relevant layout or related option is selected. |
| Layout / Mobile product layout | Horizontal scroll · Stack | Default: Horizontal scroll. This control appears only when the relevant layout or related option is selected. |
| Layout / Mobile product width | 70–100 %; step 5 | Default: 85. This control appears only when the relevant layout or related option is selected. |
| Content / Heading | Text | Default: Shop the look. |
| Content / Description | Formatted text | Default: Pair campaign imagery with the products featured in each look.. |
| Content / Heading alignment | Left · Center · Right | Default: Left. |
| Split layout / First image position on desktop | Left first · Right first | Default: Left first. This control appears only when the relevant layout or related option is selected. |
| Split layout / Image width | 40–70 %; step 2 | Default: 58. This control appears only when the relevant layout or related option is selected. |
| Split layout / Product columns on desktop | 2–4; step 1 | Default: 3. This control appears only when the relevant layout or related option is selected. |
| Split layout / Desktop gap | 0–48 px; step 2 | Default: 16. |
| Split layout / Mobile gap | 0–32 px; step 2 | Default: 12. |
| Split layout / Image corner radius | 0–40 px; step 2 | Default: 12. |
| Look image layout / Hotspot image layout | Full image · Image left · Image right | Default: Full image. This control appears only when the relevant layout or related option is selected. |
| Look image layout / Hotspot image width | 40–75 %; step 5 | Default: 60. This control appears only when the relevant layout or related option is selected. |
| Look image layout / Look width | 50–100 %; step 5 | Default: 100. |
| Look image layout / Look image ratio | Adapt to image · Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) | Default: Landscape (4:3). |
| Product hotspots / Marker size | 28–56 px; step 2 | Default: 38. This control appears only when the relevant layout or related option is selected. |
| Product hotspots / Marker background | Choose a color | Default: #ffffff. This control appears only when the relevant layout or related option is selected. |
| Product hotspots / Marker icon | Choose a color | Default: #222222. This control appears only when the relevant layout or related option is selected. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Style / Color scheme | Choose a color scheme | Default: background. |
| Style / Top padding | 0–160 px; step 4 | Default: 64. |
| Style / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Style / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Style / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |