> ## 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 photographs of the same piece with a slider between them, for cleaning, restoration or resizing, beside a text and a link.

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

Before and after, highlighted with the demo content

## Where to find it

Home page. In the theme editor choose Home page, then select Before and after.

## How it works

* Shoppers drag the slider, press it, or use the arrow keys to compare the two images.
* Both images are cropped to 5:4. Starting position sets how much of the before image shows when the page opens.
* In right-to-left languages the before image sits on the right.

![Before and after in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-before-after.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=72c164a21f40070e98d5c0d7478f85cc)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Upload a Before image and an After image taken from the same spot, so they line up.
* Edit the Before label and After label, and add a Caption if you like.
* Edit Eyebrow, Heading, Text, Link label and Link, for example Find a boutique.
* Choose Images position on desktop: First or Second.

## Settings

**Images**

| Setting | What it does |
| - | - |
| **Before image** | Image: upload one or choose from Content → Files. |
| **After image** | Image: upload one or choose from Content → Files. Use two photographs taken from the same spot, so the slider lines them up. Both are cropped to 5:4. |
| **Before label** | Text. Default: Before. |
| **After label** | Text. Default: After. |
| **Starting position** | Slider from 0 to 100 %, in steps of 5. How much of the before image shows when the page opens. Default: 50 %. |
| **Caption** | Text. |

**Text**

| Setting | What it does |
| - | - |
| **Eyebrow** | Text. Default: Lifetime care. |
| **Heading** | Text. Default: Cleaned, re-polished and checked, free for life. |
| **Text** | Formatted text. |
| **Link label** | Text. Default: Find a boutique. |
| **Link** | Link: a page, product, collection or web address. |
| **Images position on desktop** | Options: First, Second. Default: Second. |
| **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.