Skip to content
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 |
| Border color | Controls the border color | • Body |
Style
| Setting | Description | Options |
|---|---|---|
| Aspect ratio | Controls the aspect ratio of the comparison container | • Square |
| 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) Visible when Show advanced settings is on |