> 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/sale-looks.md).

# Sale looks

In this section, you can add max 4 blocks with images and add hot spots that help customers buy specific products.

**`Desktop`:**

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

**`Mobile`:**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/INdtWqortdD38Ga6NS6Q/sale-looks2.png" alt=""><figcaption></figcaption></figure>

## **Adding a section**

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

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/x3bqvgSgEGPuZQwPtWdR/sale-looks3.png" alt=""><figcaption></figcaption></figure>

## **Section settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/xexSlOGGNG5MjSMqvLPF/sale-looks4.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the heading of the section;
2. **`Make first opened`** - open first hop-spot in the section by default;

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/TvHOZQ9dkv67j8dgVeO6/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-05%20%D0%B2%2010.49.30.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “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**.

## **Blocks settings**

### General

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

1. **`Image`** - an image of the block.

### Product 1 - Product 4

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/vicRtIG7yoUUU4l7y55C/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-05%20%D0%B2%2010.50.18.png" alt=""><figcaption></figcaption></figure>

1. **`Product`** - the product, that will show in the popup after clicking on hotspot;
2. **`Product image`** - the setting allows you select a custom image instead of a product image;
3. **`Spot horizontal position`** - horizontal position of the hotspot;
4. **`Spot vertical position`** - vertical position of the hotspot.