# Lookbook

> A horizontal strip of large images – tall, square and wide – that shoppers drag, swipe or scroll through. Images can link to a page or show a product with its price.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/lookbook/

## At a glance

- **In the editor:** Lookbook
- **Where it goes:** Any page template, with Add section
- **In the presets:** Poster: Home page
- **Settings:** 21
- **Blocks:** Image
- **App blocks:** Yes

## When to use it

A lookbook shows a collection the way a magazine would: a rhythm of tall and wide pictures you browse at your own pace. The Poster preset uses it on its home page.

## Set it up

1. Add an **Image** block for each photo and pick its **Shape**: *Tall*, *Square* or *Wide*. Mixing shapes gives the row its rhythm.
2. Add a **Caption** and a **Link**, or pick a **Product** – it then shows on the photo with its price and the caption links to it.
3. Set the **Image height on desktop** and **on mobile**; the width follows from each image's shape.

## Browsing

Shoppers drag the row with the mouse, swipe on touch screens or use the arrows. **Show arrows** and **Show progress bar** add the controls; the bar shows how far along the row they are. **Show part of the next card** lets the next image peek in, so it is clear the row goes on.

With **Enlarge on click**, images open full screen in a gallery; links then move into the captions.

**Space between images** and **Full width** fine-tune the strip.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Lookbook** (21 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Left |
| **Image height on desktop** | 240–720px (step 20) | 480px |
| **Image height on mobile** | 200–480px (step 20) | 320px |
| **Space between images** | 0–48px (step 2) | 12px |
| **Full width** | Checkbox | On |
| **Enlarge on click** – Opens the images in a full-screen gallery. Links then sit in the captions. | Checkbox | On |
| **Show arrows** | Checkbox | On |
| **Show progress bar** | Checkbox | On |
| **Show part of the next card** – For sliders: the next card shows in part and the edges fade, so it is clear the row goes on. | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Image** (5 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Shape** | Tall · Square · Wide | Tall |
| **Caption** | Text | – |
| **Link** | Link | – |
| **Product** – Shows the product with its price on the photo and links the caption to it. | Product | – |

## Related

- [Shop the look](https://themelab.page/tally/docs/sections/shop-the-look.md): A styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.
- [Slideshow](https://themelab.page/tally/docs/sections/slideshow.md): Several full-width banners that change on their own or with arrows, swipes and keys, with a slide or fade transition.
- [Image with hotspots](https://themelab.page/tally/docs/sections/image-with-hotspots.md): An image with dots that open small cards – to explain the details of a product, a room or a material.