Image Comparison

A draggable before-and-after slider — two images, one divider, and proof that your product does what you say it does.

Some claims are hard to write and easy to show. Before and after. With and without. Old formula and new. Image Comparison puts two pictures in the same frame behind a divider the visitor drags themselves — and because they do the dragging, they believe the result in a way a side-by-side pair never achieves.

At a glance

Where to find it	Add section → Media
Blocks	Before image and After image — one of each — plus the usual content blocks
Allowed on	Any template
Typical use	Before/after results, with/without a feature, restoration, fit comparison

---

How to add

1

Add the section

Click Add section and pick Image comparison from the Media group.

2

Fill both image blocks

The section ships with a Before block and an After block, one of each and no more. Each takes an image, an optional mobile image, a label and an icon.

3

Use two shots that actually align

Same camera position, same crop, same light. The divider cuts straight down the middle of both images, so anything that moved between the two shots looks like a mistake.

4

Rename the labels

"Before" and "After" are defaults, not requirements. Untreated / Treated, Standard / Pro, 2019 / Today — whatever names the difference.

5

Decide what comes first on mobile

Top on mobile puts either the comparison or the surrounding content at the top of a small screen. It defaults to the comparison.

The divider always starts at 50%. There is no setting to open the slider at, say, 80% to tease the after image. If you need the "after" to dominate the first impression, build that into the crop itself rather than looking for the control — it isn't there.

Good to know

• One image still renders — against a placeholder. Fill only one side and the other falls back to a theme lifestyle placeholder, which looks convincingly like a real image in the editor. Check both blocks before publishing.
• With neither image the section hides on the live store but stays visible in the editor, so a half-built section can ship invisibly.
• The divider is a real range input. It can be moved with arrow keys as well as dragged, which means keyboard and screen-reader users get the comparison too — a rarity for this kind of widget.
• The section takes ordinary content blocks as well. Heading, text, button and the rest of the common blocks sit around the comparison, so it doesn't need a separate section above it for context.
• Each side has its own mobile image. Use it: a comparison that works at 1400 px wide is often unreadable at 390 px, and tighter crops fix that.

Customization ideas

Results proof

The classic: skincare, cleaning, restoration, repair. Keep the camera locked off and the lighting identical, and let the slider do the arguing.

With and without the feature

The same room with and without your lamp; the same outfit with and without the jacket. It sells the product by removing it.

Material or finish comparison

Matte on one side, gloss on the other, with the labels renamed to the finish names. Faster to understand than two product cards.

Then and now

An archive photo against a current one, labels set to the two years. A brand-story section that doesn't read as a brand story.

---

Settings reference

Section settings

Setting	What it does
Top on mobile	Whether the comparison or the content sits first on small screens. Defaults to the comparison.

Section layout, Color and Spacing — the standard Volume groups.

Block reference

Before image and After image — limited to one each.

Setting	What it does
Image	The picture for that side.
Mobile image	A separate crop for small screens.
Label	Text shown on that half. Defaults to Before and After.
Icon	A small symbol beside the label.

Content blocks — the usual Volume set: Heading, Subheading, Text, Button, Image, Icon, Line, Empty space and the rest.

Best practices

• Lock the camera. The comparison is only persuasive if the two frames are identical apart from the thing you're demonstrating.
• Don't retouch one side. If the difference needs help from an editor, the visitor will feel it even if they can't name it — and in several markets a doctored before-and-after is a regulatory problem, not just a trust one.
• Name the difference in the labels. "Before/After" tells nobody what to look at. "Week 1 / Week 8" does.
• Add one line of context. A heading above the slider saying what changed and over how long turns a trick into evidence.

Related

• Media with Text — when the proof needs a paragraph beside it
• Image with Hotspots — to point at details inside a single image
• Video — when the change has to be seen happening