§21 / SECTIONS
REF: TG–DOC–21 · REV. 1.7
Before / after
Before and after compares two images in one frame. Shoppers drag the divider, or use the arrow keys, to reveal more of one image or the other. Use it to show a product's effect, a fit change or a restoration.
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Add the section
- In the theme editor, click Add section and choose Before and after (Images category).
- Upload a Before image and an After image. Use two images of the same size and framing.
- Change the Before label and After label if needed. Leave a label empty to hide it.
- Set the Starting position of the divider, from 5% to 95%.
- Choose an Aspect ratio: Portrait, Square, Landscape or Wide.
- Optionally add a Heading and Text above the slider, and choose a Color scheme.
How it works
- Both images share one frame with a fixed aspect ratio, so the layout does not move while the images load.
- The "after" image sits on top and is cut at the divider position.
- Shoppers can drag anywhere on the image, or focus the slider and use the keyboard.
- "Before" is always on the left, also in right-to-left languages.
Section settings
| Setting | Type | Default | Options / notes |
|---|---|---|---|
| Heading | inline richtext | empty | |
| Text | richtext | empty | |
| Before image | image | empty | |
| Before label | text | Before | |
| After image | image | empty | Use two images of the same size and framing. |
| After label | text | After | |
| Starting position | range | 50% | 5–95%, step 1 |
| Aspect ratio | select | Landscape | Portrait (0.8), Square (1), Landscape (1.6), Wide (2.4) |
| Color scheme | color scheme | scheme-1 |
The section has no blocks.
For developers
Last updated for Tangent 1.7