Before & after
Two images with a draggable divider between them, for showing a change: before and after, with and without, plain and finished.
At a glance: Add it to any page with Add section. Its before and after images are two fixed blocks inside the section.
Good for
- Showing skincare, cleaning or restoration results
- Comparing a product with and without a finish, filter or effect
- Showing a room or outfit before and after styling
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Before/after and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Desktop layout | How much of the row width the image takes.
Choose Full width (default) or Split. |
| Image position | Which side of the text the image sits on.
Choose Left (default) or Right. Only appears when Desktop layout is Split. |
| Image slider | Horizontal puts the two images side by side with a divider that shoppers drag left and right. Vertical stacks them with a divider that shoppers drag up and down.
Choose Horizontal (default) or Vertical. |
| Overlay position | Moves the before and after labels (and their links) to the top or bottom corners of the images. The before label sits on the left and the after label on the right.
Choose Top (default) or Bottom. Only appears when Image slider is Horizontal. |
| Overlay position | In the vertical layout, the before label sits at the top and the after label at the bottom. This moves both to the left or right side.
Choose Left (default) or Right. Only appears when Image slider is Vertical. |
Images
| Desktop image size | Image size on desktop.
Choose Small (default), Medium, Large, Full screen or Adapt to image. |
| Mobile image size | How tall the image is on mobile.
Choose Small (default), Medium, Large, Full screen or Adapt to image. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
The section always has these two blocks, one for each image. Select one in the sidebar under the section to edit it. They can't be removed or reordered.
Image — before block
| Desktop image | The image for this block.
2880 x 1280px (large) .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. |
| Label | Short label shown with the item. |
| Enable button | Shows the button. Turn it off to keep the label and link saved but hidden.
Off by default. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best.
Only appears when Enable button is on. |
| Button link | Where the button goes. A button with no link is not shown.
Only appears when Enable button is on. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. Only appears when Enable button is on. |
| Button link color | Color of the button text and border.
Only appears when Enable button is on. |
Image — after block
| Desktop image | The image for this block.
2880 x 1280px (large) .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. |
| Label | Short label shown with the item. |
| Enable button | Shows the button. Turn it off to keep the label and link saved but hidden.
Off by default. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best.
Only appears when Enable button is on. |
| Button link | Where the button goes. A button with no link is not shown.
Only appears when Enable button is on. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. Only appears when Enable button is on. |
| Button link color | Color of the button text and border.
Only appears when Enable button is on. |
Tips
- Shoot both images from the same spot. Same framing, lighting and crop, so the only thing that changes is the result.
- Upload both images at the same size. Mismatched images shift when shoppers drag the divider.
- Use Vertical for tall subjects. A top-to-bottom reveal suits portraits and full-length shots.
Troubleshooting
There are two Overlay position settings
Only one shows at a time. The one you see depends on Image slider: top or bottom for Horizontal, left or right for Vertical.