# Lookbook

<Tabs>
<Tab title="Lookbook slider">

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(45)_BNoxkJqu.jpg)

![image](https://docs-assets.foxecom.app/zest-theme/image_gILBc4BM.png)

</Tab>

<Tab title="Lookbook cards">

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(46)_ba6rMAZ1.jpg)

</Tab>
</Tabs>

Showcase your products in a visually immersive way using the Lookbook section. This section helps you inspire shoppers by turning lifestyle imagery into shoppable experiences—perfect for fashion, beauty, home decor, or any visually driven brand.

## How to add a Lookbook section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Lookbook.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Lookbook section

### Section settings

<Table widths="300,auto,auto">

| Settings | Description |
| --- | --- |
| Heading / Subheading / Description | Add title and supporting text for your section |
| Image ratio | Set ratio for images (Adapt to image or a fixed ratio) |
| Number of columns on desktop | Choose number of Lookbook cards per row |
| Column gap | Adjust the gap between columns |

</Table>

### Block settings

<Hint type="success">

Steps

1. In the **Lookbook** section, click **Add block.**
2. Select a **Lookbook card** and/or a **Lookbook slider.**
3. Make necessary changes.
4. **Save.**

</Hint>

<Tabs>
<Tab title="Lookbook card">

![image](https://docs-assets.foxecom.app/zest-theme/image_XLmCYmTp.png)

* Click **Add block > Lookbook card**.
* Upload a lifestyle image.
* Adjust **hotspot color** to Light or Dark based on image contrast.
* For each product pin:
  * Select product.
  * Adjust **vertical** and **horizontal alignment** to position the pin.
  * You can add up to 6 product pins per image.

</Tab>

<Tab title="Lookbook slider">

![image](https://docs-assets.foxecom.app/zest-theme/image_wBTy15Fk.png)

* Click **Add block > Lookbook slider**.
* Upload your image.
* Add 1–5 product pins.
* For each product pin:
  * Select product.
  * Adjust **vertical** and **horizontal alignment** to position the pin.
* Customize:
  * **Desktop image position** (Left/Right)
  * **Product card layout** (Adapt to image / Fixed size)
  * **Carousel settings**: control arrows, pagination, gap size, and items per row.

</Tab>
</Tabs>

<Hint type="info">

⭐ Tips:

* Use high-quality lifestyle images that showcase multiple products in a natural setting.
* For Lookbook cards, avoid overlapping pins; keep them easy to spot.

</Hint>