# 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).