> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Before and after

> Two photos of the same scene in one frame, with a divider shoppers drag to compare them, beside an optional heading and text.

![Before and after on the storefront](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/before-after.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=f4749bbc97ee86d0f2c4374ae214e74b)

Before and after, highlighted with the demo content

## Where to find it

On no template when the theme is installed. Add it to the home page or any other page with Add section, then choose Before and after.

## How it works

* The before photo is on the left (on the right in right-to-left languages), and the divider starts at Divider start position: 50% shows half of each photo.
* With a mouse, a click or a drag anywhere on the photos moves the divider. On touch screens shoppers drag the divider itself, so scrolling the page over the photos never moves it.
* The divider is a slider for keyboards: Tab to it, then use the arrow keys, Page Up and Page Down, Home and End. Screen readers hear how much of each photo shows, such as Before 60%, After 40%.
* Both photos are cropped to Image shape, Landscape (3:2) by default, so they line up, and the frame never gets taller than 85% of the screen.
* The Before label and After label sit on the photos; empty labels use Before and After in the shopper's language.
* Kicker, Heading and Text sit beside the frame on screens 990 px and wider, and above it on smaller ones. Without them the frame takes the full width.
* Without JavaScript the two photos show side by side, stacked on phones. Until you upload photos, drawn placeholders show.

![The Add section list in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-add-section.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=b54bfcb98c05e2133b5810f6fc3f747e)

Not on the demo pages: add it with 1 Add section, then pick it in 2 the list

## Edit it

* Use two photos taken from the same spot with the same framing and the same size, for example a desk before and after a cable tray and a monitor arm. 2000 x 1250px is recommended. If you set a focal point, set the same one on both photos so they stay lined up.
* Pick the Image shape closest to your photos, or Same as the before image.
* Keep the labels short, such as Before and After, or Stock and Upgraded.
* Set Divider start position so the change is visible as the page opens.

## Settings

| Setting | What it does |
| - | - |
| **Kicker** | Text. |
| **Heading** | Text. Default: From cluttered to clean. |
| **Text** | Formatted text. |

**Images**

> [!TIP]
>
> Use two photos taken from the same spot, at the same size. Both are cropped to the image shape below so they line up.

| Setting | What it does |
| - | - |
| **Before image** | Image: upload one or choose from Content → Files. 2000 x 1250px recommended, the same size as the after image. |
| **Before label** | Text. Default: Before. |
| **After image** | Image: upload one or choose from Content → Files. 2000 x 1250px recommended, the same size as the before image. |
| **After label** | Text. Default: After. |
| **Image shape** | Options: Same as the before image, Wide (16:9), Landscape (3:2), Standard (4:3), Square (1:1), Portrait (4:5). Default: Landscape (3:2). |
| **Divider start position** | Slider from 0 to 100 %, in steps of 5. How much of the before image shows when the page opens. Default: 50 %. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.