# Lookbook

{% tabs %}
{% tab title="Lookbook slider" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FKeRRnOI1MNC9GCZMfLJw%2FFox-BG%20Light%20(45).jpg?alt=media&#x26;token=77038994-d06d-4ff3-ae66-fe4f376ad3eb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FPD6HgSvHJ1OtGinEo6Rv%2Fimage.png?alt=media&#x26;token=a6b62900-f98b-491f-92de-3f5848c5e35f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Lookbook cards" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FczFBbAAGHn5q9PcEm6pF%2FFox-BG%20Light%20(46).jpg?alt=media&#x26;token=36e4888d-34ec-4901-9025-feef051e4761" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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 style="success" %}
Steps

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

## How to edit a Lookbook section

### Section settings

<table><thead><tr><th width="300">Settings</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Heading / Subheading / Description</td><td>Add title and supporting text for your section</td><td></td></tr><tr><td>Image ratio</td><td>Set ratio for images (Adapt to image or a fixed ratio)</td><td></td></tr><tr><td>Number of columns on desktop</td><td>Choose number of Lookbook cards per row</td><td></td></tr><tr><td>Column gap</td><td>Adjust the gap between columns</td><td></td></tr></tbody></table>

### Block settings

{% hint style="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.**
   {% endhint %}

{% tabs %}
{% tab title="Lookbook card" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F9zIABWAutzsWnK1u6Ot0%2Fimage.png?alt=media&#x26;token=4f57064b-566a-4b60-a279-860e6addca42" alt=""><figcaption></figcaption></figure>

* 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.
    {% endtab %}

{% tab title="Lookbook slider" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FprnAo0WwgXRIpw9m5U7x%2Fimage.png?alt=media&#x26;token=39778d55-f7e7-4497-a34e-5a1d780baaa1" alt=""><figcaption></figcaption></figure>

* 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.
    {% endtab %}
    {% endtabs %}

{% hint style="info" %}
:star: 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.
  {% endhint %}