# 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FDEJ4BP2xQaldee2UooQP%2Fimage.png?alt=media&#x26;token=164d6c07-2be9-4cad-a726-2efe158931e1" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FfqnHp2wRDq9vdp4BNIku%2Fimage.png?alt=media&#x26;token=4ffc58b4-ab65-40bd-bc0e-4d4e93b1bdc0" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FlMq8tkxDAk1X9Z1O9PEr%2Fimage.png?alt=media&#x26;token=b4e0c182-ca6f-41ed-af88-1a7690966f3a" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FiLYkSUT7m0il6jRyJA3e%2Fimage.png?alt=media&#x26;token=b384de73-94c2-4b5a-a341-97b62a64a313" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FY34yIqYLx8K7Pt1OwjFx%2Fimage.png?alt=media&#x26;token=8c8bab4e-7a28-4b4d-a285-131a5649853d" 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://content.gitbook.com/content/GyYuzVsob5kZQHtG5da3/blobs/DkdjT6ppaVM1Ku80GbgK/image.png" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2Fcop4whJSToLqsNLZnwQA%2Fimage.png?alt=media&#x26;token=3b4c00d0-579e-4501-888d-965c9f1ed9f9" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FKDFhr02zbZrcIko4CsIm%2Fimage.png?alt=media&#x26;token=ee78c763-6e24-40cc-862a-5abdba7249e8" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FV7Kj6WsuxQzqqnqsmmWZ%2Fimage.png?alt=media&#x26;token=9e240a68-fa38-46ab-89a6-847a8cae65bb" alt=""><figcaption></figcaption></figure>

### Button

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FY55KGIv9VVSy0Qfeyg5V%2Fimage.png?alt=media&#x26;token=e075e24b-5bfe-42f5-9e07-e28bb40e07c2" alt=""><figcaption></figcaption></figure>
