Before after comparison
Image comparison with a draggable divider, driven by a native range input — so it also works with arrow keys and is announced properly to assistive technology. Up to three comparisons.
- Merchant-addable
- Yes
- Settings
- 27
- Block types
- 1
- Max blocks
- 3
- File
sections/before-after.liquid
Used by default on: Home
Screenshots pending
Captures for Before after comparison at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Visible, honest transformations — texture, finish, fit, coverage.
Setting it up
- Add the section and write the heading and intro under Section content.
- Pick a Layout and set Comparison behavior — drag, hover, or reveal.
- Add a Comparison block per pairing, with a before image, an after image, and captions.
- Match the two images exactly for framing, lighting, and crop. A comparison where the lighting changed is not a comparison.
Where the content comes from
Blocks own the images and captions.
Notes and cautions
- Before-and-after imagery invites overstated claims and is heavily scrutinized in regulated categories. Keep the pairings honest and the captions factual.
- The divider is keyboard-operable, which most comparison sliders are not. Do not replace it with a mouse-only widget.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Section content
Layout
Comparison behavior
Drag lets shoppers move the handle. Hover follows the cursor on desktop. Reveal plays a short automatic sweep the first time the comparison scrolls into view.
Where the divider rests before the shopper moves it.
Style
Fades the section in on scroll. Respects the theme animation setting and reduced motion.
Section padding
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Comparison comparison
For the clearest result, use two images with the same dimensions and framing. 1200 x 1200px .jpg recommended.
Optional line shown below the comparison, such as a product or treatment name.