Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Before / after. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Before image and After image showing the same subject from matching viewpoints.
- Set the Desktop image ratio and both image positions so the subject aligns across the divider.
- Choose Desktop starting position. Configure the mobile image ratio and starting position separately.
- Enable Show labels if needed, supply accurate Before label and After label text, and adjust the divider and handle appearance.
- Preview the comparison by dragging its handle and using the range control with the keyboard.
Main settings to review
| Setting | Choices or control |
|---|---|
| Before image | Choose an image |
| After image | Choose an image |
| Desktop image ratio | Wide (16:9) · Landscape (4:3) · Square (1:1) · Portrait (4:5) |
| Mobile image ratio | Wide (16:9) · Landscape (4:3) · Square (1:1) · Portrait (4:5) |
| Desktop starting position | 10–90 %; step 5 |
| Show labels | On / Off |
Content and media
- Use two originals with the same dimensions and matching framing. Around 1600–2000 px wide is a useful starting point for a large comparison.
- Do not bake labels or the divider into the image; use the actual section controls.
Check the mobile layout
- A mobile crop can change the apparent alignment. Recheck both sides at the mobile ratio and ensure the handle remains easy to move.
Common questions and fixes
- The subject jumps at the divider: align the original photos and their crop positions.
- One side is blank: select both images; changing the starting position does not create missing media.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (37)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Content width | 50–100 %; step 5 | Default: 100. 100% uses the selected section width. |
| Layout / Desktop image ratio | Wide (16:9) · Landscape (4:3) · Square (1:1) · Portrait (4:5) | Default: Wide (16:9). |
| Layout / Mobile image ratio | Wide (16:9) · Landscape (4:3) · Square (1:1) · Portrait (4:5) | Default: Square (1:1). |
| Layout / Desktop starting position | 10–90 %; step 5 | Default: 50. |
| Layout / Mobile starting position | 10–90 %; step 5 | Default: 50. |
| Layout / Corner radius | 0–40 px; step 2 | Default: 12. |
| Content / Heading | Text | Default: See the difference. |
| Content / Description | Formatted text | Default: Drag the handle to compare the before and after images.. |
| Content / Heading alignment | Left · Center · Right | Default: Center. |
| Content / Before image | Choose an image | Default: Not set. |
| Content / Before image alt text | Text | Default: Not set. |
| Content / Before image position | Left · Center · Right · Top · Bottom | Default: Center. |
| Content / After image | Choose an image | Default: Not set. |
| Content / After image alt text | Text | Default: Not set. |
| Content / After image position | Left · Center · Right · Top · Bottom | Default: Center. |
| Content / Show labels | On / Off | Default: On. |
| Content / Before label | Text | Default: Before. This control appears only when the relevant layout or related option is selected. |
| Content / After label | Text | Default: After. This control appears only when the relevant layout or related option is selected. |
| Comparison handle / Divider width | 1–6 px; step 1 | Default: 2. |
| Comparison handle / Handle size | 36–72 px; step 4 | Default: 52. |
| Comparison handle / Divider color | Choose a color | Default: #ffffff. |
| Comparison handle / Handle background | Choose a color | Default: #ffffff. |
| Comparison handle / Handle icon | Choose a color | Default: #222222. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Top padding | 0–160 px; step 4 | Default: 64. |
| Section / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Section / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Section / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |