# Lookbook

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/CeBYkdcPqJZozlJx0cNO/2024-04-1914-48-42-ezgif.com-video-to-webp-converter.webp" alt=""><figcaption></figcaption></figure>

## **Adding a section**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/kmWcGEV80veO0I78ZAKu/lookbook1.png" alt=""><figcaption></figcaption></figure>

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Lookbook`**.

## **Section settings**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/xWjeVYhkUn2jf1GnRpWe/lookbook2.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the title of the section;
2. **`Image position`** - the setting responsible for the direction of the section. If **Left** is selected, then there will be a picture on the left and a product slider with the **LTR** direction on the right, and if **Right** is selected, the picture on the right, the slider on the left, the **RTL** slider;
3. **`Enable point button animation`** - the setting is responsible for whether the animation will be enabled for the **point button**.

### Colors

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/sVKpvEBItTGqYYUzuVt3/Untitled%20(1).png" alt=""><figcaption></figcaption></figure>

1. **`Image background`** - the setting adds a background to the main image with **10% (0.1)** opacity. For the best effect, it is recommended to use **.png** images with a transparent background;
2. **`Slideshow arrow bg`** - the setting allows you to change the background color of the slider arrow;
3. **`Slideshow arrow icon`** - the setting allows you to change the color of the slider arrow icon;
4. **`Slideshow arrow bg (hover)`** - the setting allows you to change the background of the slider arrow on hover;
5. **`Slideshow arrow icon`** - the setting allows you to change the color of the slider arrow icon on hover.

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/RAEwNHgdkTtGnjUwE6YT/Untitled%20(2).png" alt=""><figcaption></figcaption></figure>

1. \*\*`Container** **width**` - a container width of the section. If **Inherit** value is selected then the container width is based on the group **Layout** settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## Block settings

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/gt1LgX0XdVU2RsTb0v5x/Untitled%20(3).png" alt=""><figcaption></figcaption></figure>

1. **`Image`** - the setting allows you to set the picture for the look. If the image is not set, the **placeholder** will be used;
2. **`Hotspot color`** - the settings of the access point, background and the icon itself are set.
3. **`Products set heading`** - the setting is responsible for displaying the name of your product set;
4. **`Button label`** - the setting is responsible for the label of the popup opening button.

### Product 1 to Product 5

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/uvXrXONRxes6EWdSMTYb/Untitled%20(4).png" alt=""><figcaption></figcaption></figure>

1. **`Product`** - the setting is responsible for the output of the product to which the **point button** will refer;
2. **`Point position top`** - the setting is responsible for positioning the **point button** vertically;
3. **`Point position left`** - the setting is responsible for positioning the **point button** horizontally.