> 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/image-comparison.md).

# Image comparison

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

## **For customers**

## **Adding a section**

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

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

## **Section settings**

### General

<figure><img src="/files/9rAxsheU5toeMrChwdVz" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - section heading;
2. **`Text`** - section richtext;
3. **`First image`** - the image that will be displayed as a "before image”;
4. **`Second image`** - the image that will be displayed as an "after image”. Use an image with the same dimensions as the first image for the best view of the section;
5. **`Desktop image height`** - the height of the images in the section. The setting has options from 200px to 800px in increments of 50px. There is also an option for **full size** - the image occupies 100% of the width and height of the section;
6. **`Mobile image height`** - mobile image height. The setting has the same options as the desktop.

### Layout

<figure><img src="/files/D2bkCANfN2VR9kvK7vWD" 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**.

### Colors

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

1. **`Drag cursor background`** - the color of the separating line and the icon background;
2. **`Drag cursor color`** - icon color;
3. **`Drag cursor border color`** - icon border color.

## **For Developers**

The [**img-comparison-slider**](https://github.com/sneas/img-comparison-slider) library was used for the section.