# Lookbook

<figure><img src="/files/cQo59gYNofuP0m3wEPAm" 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="/files/2kgnWrupyZ2IR8w0MAh3" alt=""><figcaption></figcaption></figure>

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

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

### Grid settings

Adjust the item gap for mobile view and desktop view.

<figure><img src="/files/94Tfgotuu8IcLftO1jQL" alt=""><figcaption></figcaption></figure>

## Block settings

### Lookbook as Item

<figure><img src="/files/TJQrXHylCyZbN6EA0jtb" 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="/files/AtiYgqrB3CeRsY2Cga2O" 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="/files/m6YGcKBOAyyM6FFJ90S3" alt=""><figcaption></figcaption></figure>

### Lookbook slider

Interactively showcase your highlighted products.

<figure><img src="/files/TUOmDYhJvFrdiVrRDvOl" 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="/files/77RfApwJLfVQkxQmkul8" alt=""><figcaption></figcaption></figure>

#### Image settings

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

<figure><img src="/files/L5ZiTtHd0R1ppVCL845P" 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="/files/KAZdpqPntlVGHIhiYPW8" 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="/files/CwfuMSEQ596IDnt3epDN" 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="/files/sJeBw3F1ngnxVVhHElwM" alt=""><figcaption></figcaption></figure>


---

# 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/megamog-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.