Before/After Slider
An interactive comparison slider that lets customers drag between two images. Perfect for showing product transformations, styling changes, or feature comparisons.
Configure the Section
- In the theme editor, click Add section.
- Select Before/After.
- Add image blocks for the comparison.
Section Settings
| Setting | Description |
|---|---|
| Section width | Page width, Full width, or Custom (60–100%). Default: Page width. |
| Section height | Auto, Full screen, or Custom. Default: Auto. |
| Content direction | Column (stacked) or Row (side by side). Default: Column. |
| Stack on mobile | Collapse row layout on mobile. Default: On. |
| Horizontal alignment | Start, Center, End, or Space between. Default: Center. |
| Vertical alignment | Start, Center, or End. Default: Center. |
| Content gap | Spacing between blocks. Range: 0–100px. Default: 12px. |
| Padding | Top and bottom padding with unified or separate controls. Range: 0–100px. Default: 32px. |
Gallery Mode
Enable gallery mode to display multiple before/after comparisons in a grid or carousel.
| Setting | Description |
|---|---|
| Enable gallery | Toggle gallery display. Default: Off. |
| Gallery layout | Grid or Carousel. Default: Grid. |
| Desktop columns | Columns in grid mode. Range: 1–6. Default: 4. |
| Mobile columns | Columns on mobile. Range: 1–3. Default: 1. |
| Max items | Maximum comparisons to display. Range: 1–24. Default: 16. |
Carousel Navigation
When gallery mode is set to carousel, these settings control the navigation arrows.
| Setting | Description |
|---|---|
| Arrow style | Chevron, Custom icon, or None. Default: Chevron. |
| Custom icon | Upload a custom arrow icon (when style is Custom). |
| Icon size | Arrow icon size. Range: 12–48px. Default: 20px. |
| Icon shape | None or Circle background. Default: None. |
| Icon color | Arrow icon color. Default: #111111. |
| Background color | Arrow background color. Default: semi-transparent black. |
Blocks
This section supports theme blocks and app blocks for the before/after image pairs and any additional content.