Image comparison

Overview

Image comparison section that shows before/after images with an interactive slider.

Common use cases

• Display before and after product transformations

• Show product variations side by side

• Compare different design options

• Create interactive product demonstrations

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals visibility settings	Checkbox (default: false)

Content

Setting	Description	Options
Drag label	Text displayed when the slider is at the center position	Text input (default: Drag to explore)
Image before	The "before" image to display	Image picker
Before label	Label text for the before image	Text input (default: Before)
Image after	The "after" image to display	Image picker
After label	Label text for the after image	Text input (default: After)

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the comparison	Checkbox (default: false)
Enable top padding	Adds top padding around the comparison	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the comparison	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background and text color combination	• Body • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary
Border color	Controls the border color	• Body • Subtle • Strong • Primary • Secondary • Tertiary • None

Style

Setting	Description	Options
Aspect ratio	Controls the aspect ratio of the comparison container	• Square • Landscape (default) • Portrait
Show entire image	Uses object-contain instead of object-cover to show full image	Checkbox (default: false)

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on