Before and after
Chapter 11 of the Inkwell user guide.
For presets, LUTs, retouching and any edit, the most convincing picture is the same photo twice. Before and after frames a photo like a print, with a paper margin and a soft shadow, and lays the "after" over the "before": a line with a round handle runs top to bottom, and dragging it reveals more of one or the other. "Before" and "After" labels sit in the top corners, and a caption underneath reads "Showing 50% after · drag, or use the arrow keys". With several pairs, tabs above the print switch between them ("Moody · Airy · Film"), each keeping its own handle position.
- Mouse: press anywhere on the photo to move the handle there, then drag.
- Touch: drag sideways to move the handle; scrolling up and down still scrolls the page, and a tap moves the handle to that point.
- Keyboard: tab to the slider, then the arrow keys move it a step, Page Up and Page Down ten steps, Home and End to either edge. The tabs take the left and right arrow keys too.
- Screen readers hear "Before and after: Moody" and "Showing 60% after" as it moves, and each image's alt text starts with "Before:" or "After:".
- It never moves by itself. Right-to-left languages mirror it.
Use two exports of the same photo at the same size and shape, one before and one after the edit: the slider lays them exactly over each other, cropped to the Image shape you choose.
The Before and after section
| Setting | Default | What it does |
|---|---|---|
| Heading | See the difference | |
| Text | "The same photo before and after each pack. Drag the handle, or use the arrow keys." | |
| Layout | Text beside | Text beside (the words in a narrow column, the print wide beside them) or Text above |
| Image shape | Landscape 3:2 | Landscape 3:2, Portrait 4:5, Square or Wide 16:9 |
| Handle starts at | 50% (10 to 90) | Where the handle sits when the page opens |
| Before label | Before | |
| After label | After | |
| Button label | Shop the presets | A primary button under the text; it shows when the Link is set too |
| Link | Empty | |
| Background | Page |
Up to six Pair blocks: Tab name ("Moody"), Before image, After image and Product (optional: adds "Shop The moody pack" under the slider). A pair missing either image is skipped; with one complete pair there are no tabs; with none, the section shows nothing on your storefront. In the theme editor, pairs without images show a drawn sample scene tagged Sample, so you can name the tabs before the photos are ready.
In the hero
The Hero section's Layout › Before and after puts the slider on the home page beside your heading and buttons, as in the Shutter preset. Add up to six Before and after pair blocks to the hero (Tab name, Before image, After image, Product), and set Image shape, Handle starts at (50%, 10 to 90), Before label and After label under the hero's Before and after heading. Until at least one pair has both images, the hero shows drawn sample scenes in their place, so add your photos before you publish.
On the product page
Every product page has a Before and after block under its gallery. It shows the product's own pair from the custom.before_image and custom.after_image metafields (chapter 7), both needed; with either empty, the block's own two images; with neither, nothing.
| Setting | Default | What it does |
|---|---|---|
| Show before and after | On | Off hides the block on every product that uses the template |
| Heading | Before and after | |
| Before label | Before | |
| After label | After | |
| Handle starts at | 50% (10 to 90) | |
| Image shape | Landscape 3:2 | Landscape 3:2, Portrait 4:5, Square or Wide 16:9 |
| Before image | Empty | Used when the product's metafields are empty. It shows on every product that uses the template. |
| After image | Empty | The same |
The block can also go in a Featured product section. For a preset pack, a good product page shows the pack's best pair here and the rest of its looks as preview pages in What's inside (chapter 9).