# Lookbook banner

<figure><img src="/files/93UeWQYGkX4jiFUPS5pL" alt=""><figcaption></figcaption></figure>

A visually engaging Lookbook banner section designed to highlight key products and inspire customers through compelling imagery.

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

{% hint style="success" %}

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

## How to customize a Lookbook banner section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

{% hint style="info" %}
&#x20;[Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### Block settings

The Lookbook banner section includes a **Header**, a **Banner**, and **Product** blocks for showcasing featured items.

{% tabs %}
{% tab title="Header" %}
Use the **Header** block to create and customize the section’s heading and introductory content.

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Button** – Add a call-to-action
  {% endhint %}

{% hint style="success" %}
📝 Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endhint %}
{% endtab %}

{% tab title="Banner" %}

<figure><img src="/files/AZuqAkWNnqokePtluKdT" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#image)
{% endhint %}
{% endtab %}

{% tab title="Product" %}

<figure><img src="/files/2ALaAD9wwYqCWgYWEP6j" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="193.9097900390625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select the product to display in this section.</td></tr><tr><td><strong>Offset top</strong></td><td>Adjust the vertical position of the product.</td></tr><tr><td><strong>Offset left</strong></td><td>Adjust the horizontal position of the product.</td></tr><tr><td><strong>Offset top mobile</strong></td><td>Adjust the vertical position of the product on mobile devices.</td></tr><tr><td><strong>Offset left mobile</strong></td><td>Adjust the horizontal position of the product on mobile devices.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Best practices <a href="#best-practices" id="best-practices"></a>

* Since only one banner image is supported, choose an image with **enough space** to place multiple product pins without clutter.
* Add **multiple** **Product blocks** to highlight different items and position them strategically for better visibility.


---

# 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/pebble-theme/theme-sections/lookbook-banner.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.