# Lookbook

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FWSs5kngRbdliHbG3g8sf%2Fimage.png?alt=media&#x26;token=708b4567-9c76-4a48-9fa4-2b63a2f8c50e" alt=""><figcaption></figcaption></figure>

The **Lookbook** section helps you showcase multiple products and let customers interact with them. This is one of the amazing features that can boost your sales like a cross-selling art.

This article shows you how to create lookbooks on your own for a powerful and eye-catching store.

{% hint style="success" %}
Steps

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

## Section settings

### Section header settings

* **Show header divider** or not;
* Give your section a **Heading**, a **Subheading** and a **Description**, or simply leave them blank.
* Adjust the **Heading size** as H2/H3/H4/H5;
* Select the **Description style** as Body text/Subtext;

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FgQSjfvX40GFSEWDaThKu%2Fimage.png?alt=media&#x26;token=2bc79585-f463-4a42-a982-0f5f830d9b96" alt=""><figcaption></figcaption></figure>

* Adjust the **Text alignment** : Left/Center
* Change the **Description style**: Body text/Subtext

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FbtJ1YUhH46kZVftUw9Cz%2FScreenshot_1.png?alt=media&#x26;token=0d8681a4-10fd-4e80-9dd0-07feee3f9f61" alt=""><figcaption></figcaption></figure>

### Grid settings

Adjust the item gap for mobile view and desktop view.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FJF1Lb5I8twLhlTzeViBg%2Fimage.png?alt=media&#x26;token=b5fee926-a689-461a-864e-2bf590274ee1" alt=""><figcaption></figcaption></figure>

## Block settings

### Lookbook as Item

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/LAxZnz5Qi3McFav6Lh4l/image.png" alt=""><figcaption></figcaption></figure>

Each item consists of a high-resolution image and tagged products. You can add your preferred image and select the button style (Light/Dark).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FdVLSsvqp7tmnVnCJ25NT%2Fimage.png?alt=media&#x26;token=7b8297c6-ac61-4e7b-a95c-ad11ed99265f" alt=""><figcaption></figcaption></figure>

To tag products on the item image, you must add the chosen products.&#x20;

Then, use the **offset top** and **offset left** to adjust the button. You can add up to 5 tagged products for one lookbook item (image).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FU8mRY9zVuEXhVE8Y7lwC%2Fimage.png?alt=media&#x26;token=387a080c-5d3a-4c56-b11c-1708804f6f04" alt=""><figcaption></figcaption></figure>

### Lookbook slider

Interactively showcase your highlighted products.

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/b0MsU3PzeEgFWKIYFK5c/ezgif.com-video-to-gif%20(2).gif" alt=""><figcaption></figcaption></figure>

Similar to adding the [Lookbook's items](#lookbook-as-item), after adding an image to the block, select up to 5 products and adjust the corresponding buttons.

#### Heading settings

Give your slider a descriptive **Heading**, **Subheading**, and **Description** if needed.

You can adjust your **Heading text size** as H2/H3/H4/H5 and select your **Description style** as Body text/Subtext.

Select your preferred **Text alignment** (Left/Center/Right).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fx9do7xOLDqRwAU1FS5A2%2Fimage.png?alt=media&#x26;token=351120cf-c4bc-419f-b504-f08fdf19bc62" alt=""><figcaption></figcaption></figure>

#### Image settings

**Select/Upload your image** for the Lookbook and select the **Button style** as Dark/Light.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FgvM654CzBxdbKxoSATCh%2Fimage.png?alt=media&#x26;token=3f2510c1-6dcd-440a-8832-c502d00ebddb" alt=""><figcaption></figcaption></figure>

Then, add the products to the Lookbook slider.

Use the **offset top** and **offset left** to adjust the button. You can add up to 5 tagged products to one lookbook slider.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fo1m7jDre4yuJp79Nhv2N%2Fimage.png?alt=media&#x26;token=335c3149-aef4-42db-9ac2-779e2825099b" alt=""><figcaption></figcaption></figure>

#### Slider settings

* Select the **number of columns** for the product slider (1 column/2 columns);
* Show the pagination and navigation or not.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F3yBXMCKB5Gdhw0BeHNIE%2Fimage.png?alt=media&#x26;token=16cd0686-0ecb-493d-ad2f-7f4afc8f5934" alt=""><figcaption></figcaption></figure>

#### Product card settings&#x20;

Decide on the Product card's **Design layout**, **Image aspect ratio**, and **show the Product vendors** if needed.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FV8bHbsOCdhvzsoO2qerq%2Fimage.png?alt=media&#x26;token=71fca2d3-ac77-45ca-b567-4b3025012373" alt=""><figcaption></figcaption></figure>