# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nextsky.gitbook.io/glozin-theme/theme-sections/image-comparison-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.