# 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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/bDmI5LReaoUnbTUtVtoI/image.png" 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

Use the provided text fields to add a suitable heading/subheading/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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/D8OkTT8UBVumFzouC363/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

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

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/GKZDwn5rfd75DxulFq5i/image.png" 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/z14kVz432NnMEq8AbqBr/blobs/hweSJlPGSEvkiix122HN/image.png" alt=""><figcaption></figcaption></figure>

## Block settings

Select distinct images for the slider to be displayed on desktop and mobile devices separately, ensuring optimal visual compatibility and user experience across different screen sizes.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/KSlWXH2MusJkAOtr5xNL/image.png" alt=""><figcaption></figcaption></figure>