# 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 %}


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/lookbook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.