Before & after
Before & after puts two versions of the same scene side by side and lets shoppers reveal the difference themselves: drag a divider to wipe from “before” to “after”, tap to flip between them, or let extra “after” photos rotate on their own. Each “after” photo can be linked to a product, shown as a small capsule with photo, name, and price.
What it does
Section titled “What it does”Use this section whenever one photo shows the result and another shows the starting point — grooming results, a cleaned pet bed, a sofa protected by a cover, a room before and after new pet furniture. Because shoppers control the reveal, they spend longer with the image than they would with two static photos.
The section supports more than one “after” photo: the extra photos cross-fade automatically, turning the comparison into a small story (one product per chapter).
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Before & after — there is a single add option; the section is added in the Drag slider layout with one After image block already in place.
- Open the Layout setting in the sidebar to switch between the four comparison styles (see Choose a style); Drag slider is the default.
- Upload a Before image and an After image, and fill the existing After image block (or add more blocks) for any further photos.
Choose a style
Section titled “Choose a style”The Layout setting switches between four ways to compare:
| Layout | How shoppers compare |
|---|---|
| Drag slider (default) | A divider line with a handle sits over the photo; shoppers drag it left/right (or up/down) to wipe between before and after |
| Tap toggle | One tap anywhere on the photo switches between before and after, with a flip button at the bottom |
| Side by side | Before and after shown as two separate photos next to each other (stacked on phones) |
| Split — text & comparison | The comparison sits beside a text column with heading, description, and a button; on phones the text moves above the comparison |
Set it up: quick start
Section titled “Set it up: quick start”- Add the section, then open Layout and pick a comparison style (see above) — the section starts on Drag slider.
- Upload the Before image — the starting point, shown first.
- Upload the After image — the first result photo. Use the info under it as a reminder: this is the first “after” photo; further photos go in blocks.
- Optionally pick a First content image product — it is linked to the After image and shown as a capsule with photo, name, and price.
- The section already ships with one After image block — fill that block first with your second result photo and its product; then click Add block → After image for each further photo (up to 4 blocks). The photos rotate automatically.
- Set Heading and, if you like, a Subheading.
- Save, then drag the divider in the preview to check both photos line up.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”Layout and text
| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Drag slider | Drag slider / Tap toggle / Side by side / Split — text & comparison | How shoppers move between the before and after photos |
| Subheading | Empty | Text | Small line above the heading |
| Heading | “A little adventure, revealed.” | Text | Section title |
| Comparison image position | Right | Left / Right | Split layout only. Which side the comparison sits on; on phones the text always appears above |
| Description | Empty | Rich text | Split layout only. Paragraph text in the copy column |
| Button label | Empty | Text | Split layout only. Shows a button under the description |
| Button link | Empty | URL | Split layout only. Where the button leads — both a label and a link are required to show the button |
Photos
| Setting | Default | Options | What it does |
|---|---|---|---|
| Before image | Empty | Image picker | The “before” photo |
| After image | Empty | Image picker | The first “after” photo. Add After image blocks for more — they rotate automatically |
| First content image product | Empty | Product picker | Linked to the After image; shown as a product capsule. Additional photos get their own product in their block |
| Image ratio | Landscape (4:3) | Square (1:1) / Landscape (4:3) / Wide (16:9) / Portrait (4:5) / Portrait (2:3) | The shape of the comparison frame |
| Mobile image ratio | Inherit section setting | Inherit section setting / Square (1:1) / Landscape (4:3) / Wide (16:9) / Portrait (4:5) / Portrait (2:3) | A different frame shape on phones |
| Image display | Crop to fill | Crop to fill / Show complete image | Crop to fill fills the frame (edges may be trimmed); Show complete image fits the whole photo inside, leaving gaps if the shapes differ |
Rotation (multiple “after” photos)
| Setting | Default | Options | What it does |
|---|---|---|---|
| Auto-rotate content images | On | On / Off | With more than one “after” photo, the photos cross-fade on their own. Pauses while the shopper hovers or focuses the section, drags the divider, scrolls it off-screen, or presses the pause button |
| Rotate speed | 5 s | 1–10 s, step 1 | Multiple after images only: how long each photo stays before the cross-fade |
| Show page count and progress | On | On / Off | Shows “01 / 02” plus a progress bar with the arrows. Turning this off keeps previous, play/pause and next buttons |
Divider (Drag slider and Tap toggle)
| Setting | Default | Options | What it does |
|---|---|---|---|
| Divider style | Straight line | Straight line / Angled | Slider layout only. Angled tilts the divider slightly for a softer look |
| Divider direction | Vertical (drag left and right) | Vertical (drag left and right) / Horizontal (drag up and down) | Slider layout only. Horizontal puts ‘before’ on top. Phones can use their own direction under Mobile divider orientation |
| Divider image | Empty | Image picker | Replaces the round handle with your own graphic. Transparent PNG, around 80x80. Slider layout only |
| Initial divider position | 50 % | 0–100 %, step 1 | Where the divider starts. 0 hides the before photo, 100 % covers the after photo completely |
| Mobile divider orientation | Inherit section setting | Inherit section setting / Vertical (drag left and right) / Horizontal (drag up and down) | A different drag direction on phones |
Product capsule
| Setting | Default | Options | What it does |
|---|---|---|---|
| Product capsule position | Below image — right | Below image — left / Below image — center / Below image — right / Image — top left / Image — top right / Image — bottom left / Image — bottom right | Where the product capsule sits. Image corners are optional; the capsule moves below the image if it would overlap the divider handle. Side by side always uses the footer |
| Mobile product capsule position | Below image — right | Inherit section setting plus the same seven positions | A different capsule spot on phones |
Backdrop
| Setting | Default | Options | What it does |
|---|---|---|---|
| Section background tint | None (white) | None (white) / Cream / Lilac / Mint / Apricot | Adds a soft color band with extra spacing around the section |
| Background image | Empty | Image picker | Wraps behind the comparison (book, desk scene…). Crops to fit, never stretches. Transparent PNG keeps the tint color visible |
| Band padding | 48 px | 0–120 px, step 4 | Space around the comparison when a tint or background image is on |
| Image overlay opacity | 0 % | 0–90 %, step 5 | Darkens the background image so the comparison stands out |
| Comparison width | 100 % | 40–100 %, step 5 | Share of the background band’s inner width. The band, backdrop and comparison scale together |
Blocks
Section titled “Blocks”Add up to 4 After image blocks — one per extra “after” photo. The photos, including the first one from the After image setting, rotate automatically.
| Block | Limit | What it adds |
|---|---|---|
| After image | 4 | One extra result photo, its product, and where its capsule sits |
After image settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Image | Empty | Image picker | The result photo for this slide of the rotation |
| Product | Empty | Product picker | The product capsule shown while this photo is on screen |
| Product position override (desktop) | Inherit | Inherit plus the seven capsule positions | Keeps this photo’s capsule somewhere else than the section default |
Images and content tips
Section titled “Images and content tips”- Shoot both photos from the same spot. Same distance, same angle, same lighting — the comparison only convinces when nothing moves except the result.
- Match the two photo shapes to the Image ratio you picked (Landscape 4:3 by default), so neither side gets cropped away.
- Use the Shopify image editor to set each photo’s focal point; it is respected when the photo gets cropped to fill the frame.
- For the Divider image, use a transparent PNG around 80x80 px — a paw print or a small logo works well.
- For the Background image, a wide scene (around 2000 px) works best; it crops to fit and never stretches.
Good to know
Section titled “Good to know”- Rotation stops on its own when it should. It pauses while shoppers hover or use the keyboard, while they drag the divider, when the section is scrolled off-screen, when the tab is hidden, and when the before photo fully covers the frame. Visitors who have reduced motion turned on, or the theme’s animation setting off, can still switch photos with the arrows.
- The divider is keyboard friendly. Shoppers can move it with the arrow keys, and screen readers announce which photo is showing.
- The product capsule is a link. Photo, name, and price come straight from the product; tapping it opens the product page. It only appears when a product is picked.
- Missing pieces degrade gracefully. Without a before photo a neutral placeholder shows; with a single “after” photo the arrows and progress disappear — the comparison simply stays on that photo.
- In the theme editor, clicking an After image block in the sidebar shows that photo in the preview, so you can check each slide without leaving the editor.
Example setups
Section titled “Example setups”Grooming reveal (Drag slider). Before and after photos of a doodle groom, Landscape (4:3), divider at 50 %, one product (the brush used) in the capsule at Below image — right. Auto-rotate off — there is only one comparison. Place on a grooming-service or product story page.
Three-room tour (Split — text & comparison). A restyled pet corner photographed three ways: the After image plus two After image blocks, each linked to a product, Auto-rotate on, Rotate speed 6 s, Section background tint Mint, Band padding 64 px, Comparison image position Right. The text column explains the makeover while the photos cycle.
Common questions
Section titled “Common questions”The rotation doesn’t run even though Auto-rotate content images is on. Check that you have at least two “after” photos (the After image plus After image blocks) — a single photo has nothing to rotate. Rotation also pauses while shoppers hover, drag the divider, or scroll the section off-screen.
My product capsule sits on top of the divider handle. That is handled for you: when a corner position would overlap the handle, the capsule moves below the image. Pick a different corner or a Below image position if you prefer a fixed spot.
The before photo covers everything at first. The Initial divider position is set at or near 100 %. Drag it back toward the middle, or set it to a lower percentage.
The photos look different sizes in Side by side. Both frames share the Image ratio, but photos with different shapes get cropped or fitted differently. Set Image display to Show complete image to always see the whole photo, or re-crop the photos to the same shape.
The button in the Split layout doesn’t appear. Both a Button label and a Button link are required — an empty label or an empty link hides the button.