> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/glozin-theme/theme-sections/image-comparison-slider.md).

# Image comparison slider

**Image comparison slider** shows 2 images next to each other which let customers see the differences between them.

You can setup 2 individual pairs of images for mobile and desktop.

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

{% hint style="success" %}
**Steps:**

1. In your Shopify admin, go to **Online Store ==> Themes**.
2. Click **Customize**.
3. Locate **Image comparison slider**.
4. Change images.
5. Click **Save**.
   {% endhint %}

## Section settings

### Section header and General

**Section width:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color scheme:** Set text color and background color with preset scheme

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

Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

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

### Before/After image

**Before/After Image**: Configure the display to show a before and an after image.

**Width image:** Adjust the width of the slider to fit the visual layout and content requirements of your webpage or presentation.

**Position**: Choose to place the content on the left or right side.

<figure><img src="/files/7wJ2UJc9Re19qvpHyK5H" alt=""><figcaption></figcaption></figure>

**Image ratio**: Select a preset ratio for the images.

**Custom ratio**: Define a custom ratio instead.

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

## Content settings

**Vertical alignment:** Adjust the vertical alignment of content to position it at the top, center, or bottom within its container.

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

### Section padding

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

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

## Block settings

Each block includes settings for content such as font size, font weight, text transformation, and spacing.

### Heading

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

### Subheading

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

### Description

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

### Button

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