Before and after
Two photos of the same scene, one over the other, with a handle shoppers drag to reveal the difference. Ideal for results you can see.
- In the editor
- Before and after
- Where it goes
- Any page template, with Add section
- In the presets
- Not on any page by default – add it where you need it
- Settings
- 24
- App blocks
- Yes
Set it up
- Upload the Before image and the After image. Use two photos with exactly the same framing and size – the comparison only works when they line up.
- Choose the Image ratio and the Starting position of the handle (10–90%).
- Keep Show labels on and set the Before label and After label – Before and After, or Day 1 and Day 28.
- Pick a Layout for the text: Heading above the image, Text on the left or Text on the right.
For everyone
Shoppers drag the handle with a mouse or a finger, or tab to it and use the arrow keys – the handle is a real slider, so screen readers announce its position.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Before and after24 settings
| Setting | Options | Default |
|---|---|---|
| Before image | Image | – |
| After imageUse two photos with the same framing and size. | Image | – |
| Image ratio | Square · Portrait · Landscape · Wide | Landscape |
| Starting position | 10–90% | 50% |
| Show labels | Checkbox | On |
| Before label | Text | Sample text |
| After label | Text | Sample text |
| Text | ||
| Layout | Heading above the image · Text on the left · Text on the right | Text on the left |
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | Sample text |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Center |
| Button label | Text | – |
| Button link | Link | – |
| Button style | Primary · Secondary · Highlight | Primary |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 80px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 56px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |