> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/image-comparison.md).

# Image comparison

Compare two images with a slider, such as before and after. Use it to show results, transformations or product improvements.

***

The **Image comparison** section places two images on top of each other with a slider between them, typically *Before* and *After*. Shoppers drag the slider to compare them.

### 1. Our guide to set up an Image comparison section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Image comparison.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FU0GTMNyxYO2JLfNqgpoa%2FScreenshot%202026-04-21%20at%203.07.07%E2%80%AFPM.png?alt=media&#x26;token=a510cf87-382e-4a2d-b19f-ea63e192196a" alt=""><figcaption></figcaption></figure>

The section is added with one **Before** block and one **After** block.

### 2. Section settings

* **Heading:** The title above the images. Leave it blank to hide it.
* **Heading size:** 15–80px.
* **Heading alignment:** Left / Center. With **Left**, the button sits next to the heading. With **Center**, it moves below the images.
* **Button**
  * **Button label** and **Button link:** A call-to-action button. Leave the label blank to hide it.
  * **Use outline button style:** Shows an outlined button instead of a solid one.
* **Image settings**
  * **Desktop image height:** 250px / 350px / 450px / 550px / 650px / 750px / 850px.
  * **Mobile image height:** 150px / 250px / 350px / 450px / 550px / 650px / 750px.
  * **Adapt section height to first image size:** Sets the section height from the shape of the first image. When it's on, the two height settings are ignored.
* **Corner radius**
  * **Image:** Rounds the image area and the labels, 0–40px.
* **Section padding**
  * **Top padding** and **Bottom padding:** 0–100px.

### 3. Before block settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FE7NilmiLdUEE0DqFsZgQ%2FScreenshot%202026-04-21%20at%203.17.45%E2%80%AFPM.png?alt=media&#x26;token=85431286-e701-4c0e-888d-a820443d7727" alt=""><figcaption></figcaption></figure>

The image on the left of the slider.

* **Image** and **Mobile image:** The image for desktop, and an optional different image for phones.
* **Image overlay opacity:** Darkens the image, 0–100%.
* **Label:** The text on the image, for example *Before*.
* **Label position:** Top left / Middle left / Bottom left.
* **Colors**
  * **Label background:** The label's background color.
  * **Text:** The label's text color.

### 4. After block settings

The image on the right of the slider.

* **Image** and **Mobile image:** The image for desktop, and an optional different image for phones.
* **Image overlay opacity:** Darkens the image, 0–100%.
* **Label:** The text on the image, for example *After*.
* **Label position:** Top right / Middle right / Bottom right.
* **Colors**
  * **Label background:** The label's background color.
  * **Text:** The label's text color.

### 5. Tips

* Use two images with the same size and framing, so the slider lines them up exactly.
* Turn on **Adapt section height to first image size** if your images get cropped at the fixed heights.
* Add a **Mobile image** in portrait format for each block when your desktop images are wide.