Product Guides

Before/After Builder

Create side-by-side image comparisons with an interactive draggable slider. Visitors drag the handle to reveal more of each image.

Setting Up

Create a new experience and choose Before/After.
Click Set "Before" Image to select the first image via the Asset Picker.
Click Set "After" Image to select the second image.
The builder shows both images overlaid with the slider handle. Drag it to preview.

Same dimensions

Both images should have the same aspect ratio for the best result. The builder will crop to match if they differ.

Option	Default	Description
Starting position	50%	Where the slider starts. 50% shows both images equally.
Orientation	Horizontal	Slider direction — horizontal (left/right) or vertical (top/bottom).
Labels	Off	Show "Before" and "After" labels on each side.
Label text	"Before" / "After"	Custom label text (e.g., "Old" / "New", "Day" / "Night").
Handle style	Line with arrows	Visual appearance of the draggable handle.
Handle color	White	Color of the slider handle and line.

Product comparison — Show old vs. new product design, different colorways, or with/without accessories.
Renovation/restoration — Before and after shots of spaces, vehicles, or objects.
Photo editing — Show original vs. retouched images.
Seasonal changes — Same location in different seasons or time of day.

Use images taken from the same angle and distance for the most impactful comparison.
Set the starting position to highlight the most interesting part of the comparison.
Enable labels when the context isn't obvious from the images alone.
The vertical orientation works well for full-length product shots (clothing, furniture).