> 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2f28412393e2a0d0e274dcf72793cac8f346ef5e%2Fimage%20(1232).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-30a002ec6494f03a1b07d86662e6c0e3858a0262%2Fimage%20(238).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-dee813443c189cc2a470da91c5adccb87c12df01%2Fimage%20(239).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-ea0433cf5a5fd64d8646aa018e92edce80c57038%2Fimage%20(240).png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-6cd0e9a08aeb4151d726cf0112f70127445634b5%2Fimage%20(241).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-de2d4e0cea814bc3f14568ef276b2621b9595a6a%2Fimage%20(26).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-7db5be2057c03d03b5a747c5bd5432be050e36f6%2Fimage%20(707).png?alt=media" 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="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2d8289b44669b24807dd7bbbdadd72c7aee850f0%2Fimage%20(242).png?alt=media" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-c38fe438ff000d07a9228fdd74aaeb6e03186000%2Fimage%20(245).png?alt=media" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2e6cbd9b5efdde9e705c874ef84d9331bc0ff42b%2Fimage%20(243).png?alt=media" alt=""><figcaption></figcaption></figure>

### Button

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-1215e332b833eb8d87829c442d74de7abe2299b0%2Fimage%20(244).png?alt=media" alt=""><figcaption></figcaption></figure>