Before / after lays two photos of the same piece over each other, with a handle customers drag to compare them: a vintage coat before and after restoring, a styling transformation, a fabric before and after the right care. The Almanac preset uses it on its home page.
The handle is a real slider, so customers can also move it with the arrow keys, and screen readers announce it. Without JavaScript the two photos are simply shown one after the other.
Where to find it
In the theme editor, click Add section and choose Before / after. You can add it to the home page or any other page that takes sections, as many times as you like.
Choosing the photos
The comparison only works when the two photos line up. Take both from the same spot, with the same framing and light, and upload them at the same size. Each photo is cropped to the Image ratio around its focal point, so set the same focal point on both.
Screen readers read each photo's alt text, which you set on the image in Shopify. A photo without alt text is described by its Label, or by the word Before or After.
Layout options
Direction sets how the photos are divided. Horizontal puts the before photo on the left and the after photo on the right, with an upright handle. Vertical puts the before photo on top, with a level handle: customers drag along the middle of the photo, so the rest of it still scrolls the page on a phone. Starting position sets where the handle is when the page loads.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Show editorial numbering on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Text | Formatted text. | Optional text under the heading, for example what was done to the piece. |
| Before | ||
| Image | Image. | The photo before: the left one, or the top one in the vertical direction. |
| Label | Text. | A short label on the before photo. Leave it empty to show none. |
| After | ||
| Image | Image. | The photo after: the right one, or the bottom one in the vertical direction. |
| Label | Text. | A short label on the after photo. Leave it empty to show none. |
| Layout | ||
| Direction | Horizontal or Vertical. Default: Horizontal. | Horizontal compares left and right; Vertical compares top and bottom. |
| Starting position | 0% to 100%. Default: 50%. | Where the handle starts, as the share of the before photo shown. 50% shows half of each. |
| Image ratio | Portrait (4:5), Square (1:1) or Landscape (3:2). Default: Portrait (4:5). | The shape both photos are cropped to. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Before and after photos | 2000 px wide, both the same size | Taken from the same position, so the two line up when the handle moves. In the Image ratio you choose, for example 2000 x 2500 px for Portrait (4:5). |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Put the change in the middle of the frame, where the handle starts.
- Say what changed in the text, for example "relined, new horn buttons". The photos show it; the words make sure everyone gets it.