> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/lookbook.md).

# Lookbook

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

## **Adding a section**

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

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

## **Section settings**

<figure><img src="/files/VGi6Ejrl9kQ4Zm85rrxq" 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="/files/dEasgTxUwOp5mqBWv5gn" 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="/files/1AcnDYh8zng1zWUhdQ5N" 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="/files/kPnCBoFye9JgPPqD6Nqi" 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="/files/8nrnn0V5rPTI6eQwWzdr" 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.