Image comparison slider

Updated 2 months ago

The image comparison slider block shows two images stacked on top of each other, with the front image revealed through a draggable divider so shoppers can compare the two. It is ideal for before-and-after comparisons. The comparison starts centered at 50% and has no fixed height or position setting — height comes from the aspect ratio, and position is the drag position the shopper leaves it at.

Settings

Add the block to a section and configure its images, labels, and ratio below. The block is grouped under the Media category in the theme editor.

Before image and After image: the two images to compare. If either is left empty, the block shows a placeholder image in its place.
Before badge text and After badge text: a short badge shown on each image (defaults to Before and After). Leave a field empty to hide that image's badge.
Mobile aspect ratio and Desktop aspect ratio: the block's height on each device. Choose Adapt to image to use the selected image's own ratio, Portrait (4:5), Square (1:1), or Landscape (16:9). With Adapt to image, the theme uses the before image's ratio, then the after image's, and falls back to 16:9 if neither is set. Both default to Square (1:1).
Use inner border radius: rounds the block's corners (off by default). Turn it on to reveal the Border radius scheme setting, which selects one of three radius styles.
Enable color scheme: applies a color scheme to the block (off by default). Turn it on to reveal the Color scheme setting.
Margin top (Desktop) and Margin top (Mobile): spacing above the block, from 0 to 34 (default 0).
Hide block on desktop and Hide block on mobile: hide the block on the selected device (off by default).

Use the block for paired photos where the difference is the point — a before-and-after shot, a product close-up versus its packaging, or an old and new version of a design.

FAQ

What is the image comparison slider in the Pops theme?

The image comparison slider block stacks two images on top of each other and reveals the front image through a draggable divider, so shoppers can compare the two. It is ideal for before-and-after comparisons. The comparison starts centered at 50% and has no fixed height or position setting — height comes from the aspect ratio, and position is the drag position the shopper leaves it at.

How do I add the image comparison slider block in Pops?

Add the block to a section in the theme editor, where it is grouped under the Media category. Then configure its images, labels, and ratio in the block's settings.

What happens if I leave the before or after image empty in the Pops image comparison slider?

If either the before image or the after image is left empty, the block shows a placeholder image in its place.

How do I change the height of the Pops image comparison slider?

Set the Mobile aspect ratio and Desktop aspect ratio. Choose Adapt to image to use the selected image's own ratio, Portrait (4:5), Square (1:1), or Landscape (16:9). With Adapt to image, the theme uses the before image's ratio, then the after image's, and falls back to 16:9 if neither is set. Both default to Square (1:1).

How do I change or hide the badges on the Pops image comparison slider?

Edit the Before badge text and After badge text fields, which default to Before and After. Leave a field empty to hide that image's badge.

Can I hide the image comparison slider on mobile or desktop?

Turn on Hide block on desktop to hide the block on desktop, or Hide block on mobile to hide it on mobile. Both are off by default.

Was this helpful?