> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/reference/sections/before-after.md).

# Before and after

A comparison slider: shoppers drag a handle to reveal a before image over an after image.

A comparison slider: shoppers drag a handle to reveal a before image over an after image.

**Where:** Any template (Add section)\
**File:** `sections/before-after.liquid`

![Before and after](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e4562a0039e3eccc7ad7899f58c66fb6578134e4%2Fbefore-after.png?alt=media)

## Section settings

| Setting               | Type                       | Options             | Default            | Notes |
| --------------------- | -------------------------- | ------------------- | ------------------ | ----- |
| **Heading**           | Text (bold, italic, links) |                     | See the difference |       |
| **Subheading**        | Text                       |                     |                    |       |
| **Before image**      | Image                      |                     |                    |       |
| **Before label**      | Text                       |                     | Before             |       |
| **After image**       | Image                      |                     |                    |       |
| **After label**       | Text                       |                     | After              |       |
| **Starting position** | Slider                     | 10–90%, steps of 5  | 50%                |       |
| **Color scheme**      | Color scheme               |                     | Scheme 1           |       |
| **Top padding**       | Slider                     | 0–160px, steps of 4 | 48px               |       |
| **Bottom padding**    | Slider                     | 0–160px, steps of 4 | 48px               |       |

## Presets

Add it from **Add section** as: **Before and after**.