Image comparison slider

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).