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:

Steps:

• In the theme editor, click Add section.

• Locate Image comparison.

• Click Save.

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

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.