Section reference
Before and after
Compare two photos with a draggable slider in Vellmar's before and after section.
Before and after stacks two photos and lets shoppers drag a handle to reveal one or the other. Each photo has a label, such as "Before" and "After", and an eyebrow, heading and text sit beside the slider.
The handle is a standard slider control, so it also works with the arrow keys on a keyboard. Screen readers announce the two images by their labels unless the images have their own alt text.
Best practices
- Use two images with the same size and framing. Take them from the same angle, distance and light, so the only change is the one you want to show.
- Use real photos. Don't retouch one image more than the other, and keep any claims in the text accurate. Product claims may also be regulated in your market.
- Say what changed. Use the text to explain the timeframe and the product used, for example "After four weeks of daily use".
- Short labels. One word each keeps them clear of the subject.
Preset tips
- Sorrel uses it on the home page to show a skincare result, which is the most common use.
- For Vellmar, it works for a room before and after styling. For Graphite, for a garment before and after wear or washing.
- Handle
before-after- Group
- Story and content
- Where
- Add it to any template with Add section in the theme editor. Up to 12 blocks. Accepts app blocks.
Settings
Use real photos and keep any claims accurate.
| Setting | Type | Default | Options |
|---|---|---|---|
| Before imageUse two images with the same size and framing. | Image | None | — |
| Before label | Text | Before | — |
| After image | Image | None | — |
| After label | Text | After | — |
| Layout | Drop-down | Wide image | Wide image, Square image, equal columns |
| Sweep the line once when it comes into viewWith scroll effects on. Stops as soon as the visitor drags. | Checkbox | Off | — |
| Color scheme | Color scheme | Scheme 1 | — |
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 12 blocks.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.