> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/sections/lookbook.md).

# Lookbook

A 3D deck of campaign imagery, shown after the product stories on the homepage. Each **Look** carries up to three "Seen on" hotspots — pulsing dots positioned over the photo, each attached to a product. Tapping a dot opens a popup with the product's image, price, an **Add to cart** button (single-variant products) or a **View product** link.

When the lookbook follows the story deck, it automatically gets its own numbered chip on the side rail.

👉 **Customize → homepage → Lookbook** section. Setup walkthrough: [Pages → The Lookbook](/sitesbyseth-docs/showcase/pages.md#the-lookbook).

## Settings

* **Show lookbook** (on) — off hides it completely: no screen, no scroll space, no rail chip. Deleting all Look blocks hides it too.
* **Eyebrow** (default "THE LOOKBOOK") — small text above the heading.
* **Heading** (default "Worn in the wild").
* **Background color** (default `#F3F0EA`).
* **Navigation style** — `Arrows`, `Dots`, or `Arrows and dots` (default) for flipping between looks. With a single Look, no controls show. Swiping always works on touch screens.

## Blocks

### Look

* **Image** — the campaign photo. Portrait or square crops read best in the 3D deck frame.
* **Seen on spot 1 / 2 / 3** — each spot has:
  * **Product** — the item worn/shown in the photo. Leave empty and the dot doesn't render.
  * **Horizontal position** (0–100%, defaults 50 / 30 / 70) — 0 is the left edge, 100 the right.
  * **Vertical position** (0–100%, defaults 50 / 70 / 30) — 0 is the top, 100 the bottom.

Drag the sliders while watching the preview until each dot sits on its item.

## Pro tip

💡 Place dots on the garment, not the model's face, and keep them off the outer 10% of the image so they survive different screen crops. If a look features more than three products, use two Look blocks with the same image cropped differently — it reads as an editorial spread, not a repeat.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/sections/lookbook.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.