> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/sections-and-features/lookbook.md).

# Lookbook

A wide hero image with shoppable hotspots placed on top. Click a hotspot to open the linked product. **Studio only.**

## How to access

Add the **DRIFT Lookbook** section to any page in the customizer.

## Lookbook

### Lookbook image

Use a wide, high-resolution image. The image displays at its natural size and scrolls horizontally if wider than the viewport.

### Heading

Optional section heading.

## Blocks

Add **Hotspot** blocks. Each hotspot has:

* **Product** — The product the hotspot links to.
* **Horizontal position** — Range 0 to 100%. 0 is the left edge, 100 is the right edge.
* **Vertical position** — Range 0 to 100%. 0 is the top edge, 100 is the bottom edge.

## Tips

Position hotspots over the relevant item in the photo. The hotspot dot is centered on the chosen coordinates.