# Lookbook banner

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F1CSlofE3WNbkFwAWrbtS%2Fimage.png?alt=media&#x26;token=3b6bd084-063b-4b01-a34c-4716cf478e26" alt=""><figcaption></figcaption></figure>

A lookbook showcases multiple products and lets customers interact with them.&#x20;

The lookbook is an amazing display that can boost your sales like a sophisticated art.

## How to add a Lookbook banner section

{% hint style="success" %}
Steps

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

## How to customize a Lookbook banner section

In the Lookbook banner section, you can pin your products to the image banner and add a scrolling message under it.

### Section settings

#### Section header

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMduk0aa8ZHhGUBxR6nn2%2Fimage.png?alt=media&#x26;token=955f9502-df09-4da0-808b-027676672c2d" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Description**.

* Leave them blank if you do not want to display them

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FdTV3ZXgvbr6yq2RcawTO%2Fimage.png?alt=media&#x26;token=195c6c22-3e9c-4cd5-921f-cc0d7fa989e8" alt=""><figcaption></figcaption></figure>

#### Image settings

* **Image**: Add the image banner. You can set an image for desktop and mobile view separately.
* **Hotspot color**: Set the color as Light/Dark.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FYMLV9vBrdMfl0GLiTWHn%2Fimage.png?alt=media&#x26;token=96cc9a0c-1896-4bb5-9ebc-065b1e0f969b" alt=""><figcaption></figcaption></figure>

#### Scrolling promotion settings

* **Direction**: Set the direction of the scrolling message - Left/Right.
* **Pause scroll on hover**: When hovering over the section, the scrolling stops.
* **Speed**: The speed of the text when scrolling (0.1x to 3x).
* **Text color**: Set the color of the text.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FE7dQIewubLTn9R5gcS5i%2Fimage.png?alt=media&#x26;token=81f7e2e2-160c-412b-9768-cc43aa887b4e" alt=""><figcaption></figcaption></figure>

### Block settings

{% hint style="success" %}
Steps

1. In the **Lookbook** section, click **Add block.**
2. Select a **Product** or **Scrolling text** block.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

#### Product block

To tag products on the item image, you must add the chosen products. Then, use the vertical and horizontal alignment to adjust the hotspot icon.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQ0vyfY82Z1x04qvdaeVm%2Fimage.png?alt=media&#x26;token=31198b8a-257b-4ab9-8203-cee2847c486d" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
There is a limit of 20 pinned products used in the Lookbook section per page.
{% endhint %}

#### Scrolling text

Add your motivational text and link it to your desired page if needed.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FRBJZHNYKDOQIOEfDm5DO%2Fimage.png?alt=media&#x26;token=b3f8e562-c2cd-4e75-aa76-cb08c980b0fa" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can add 1 message per Lookbook banner section only.
{% endhint %}