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

# Image comparision 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://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FK4B5idHevx3YPbrUaOux%2Fimage.png?alt=media&amp;token=c21f7ba1-f47b-4b0b-b03e-90e3133da2c9" 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 %}

## General setting

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FIdP5vkXPyW2aq5t10Cht%2Fimage.png?alt=media&amp;token=bbcc83c3-6125-4094-b159-e19c0e3dcb9e" alt=""><figcaption></figcaption></figure>

| Setting                | Description                                                                                                                     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| 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.                                                                         |
| Heading, description   | Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them. |
| Header size, alignment | Adjust the spacing between Adjust the text alignment (left/center/right) along with the font size.                              |

## Before/After image

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FVFqbCt6e4MGVwMxB3RnC%2Fimage.png?alt=media&amp;token=55591f41-4a73-431d-9621-3339018f066c" alt=""><figcaption></figcaption></figure>

| Setting            | Description                                                                                                       |
| ------------------ | ----------------------------------------------------------------------------------------------------------------- |
| 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.                                                            |
| Image ratio        | Select a preset ratio for the images.                                                                             |
| Custom ratio       | Define a custom ratio instead.                                                                                    |

## 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://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FPI8cUP2AUyPIlKmYeHdo%2Fimage.png?alt=media&amp;token=228139ba-6d46-4e85-90eb-13ef234b166c" 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://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FNXMbbABQSXOW4BgiOd4z%2Fimage.png?alt=media&amp;token=9491f2d7-8a06-4e47-9981-2369a1ba8ea8" 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://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FdPtZxrfIjNtWO30SUyiw%2Fimage.png?alt=media&amp;token=a66f769d-ecc9-41ec-ba4f-11f0a03b3dc9" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FX9kxhCneVdMqp6DJvgQi%2Fimage.png?alt=media&amp;token=ceae5f38-64de-44cc-a1aa-e26e73dc2f6e" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fa2uYAE3cziYP4cp5F017%2Fimage.png?alt=media&amp;token=58b3d405-67fe-46b6-b78d-edf041b0804b" alt=""><figcaption></figcaption></figure>