# Before & After

> Let your results build trust and sell for you — show stunning transformations with an interactive drag slider that brings before & after to life.

URL: https://sectionstar.app/sections/before-and-after/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.885Z

---

**Before & After** is a Shopify theme section in the Section Star library. Let your results build trust and sell for you — show stunning transformations with an interactive drag slider that brings before & after to life.

## About the Before & After section

The Before and After Section is a Shopify section that allows store owners to show a compelling before and after comparison. The section features functionality for two images, before and after captions, text content, and a call-to-action (CTA) button. The images can be dragged to reveal more of the before or after scenario, providing an interactive experience for store visitors. The section is very customizable and includes options to adjust text fonts, sizes, colors, the section background, and more.

## Live demo

## Use cases

1. **Product Demonstrations:** Show the effectiveness of your products, especially those that provide a noticeable result after use such as cosmetics, health and wellness products, etc.
2. **Service Illustrations:** Illustrate the effectivity of your services like cleaning services, event management, home renovation, and professional organizing.
3. **Case Studies:** Claiming your product or service can bring about changes is one thing, showing it is another. Document the journey of your customers' progress due to your product or service.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Grid Design
Set settings for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Spacing between columns | Number | 20 |

### Before & After Display
Set the display for the before and after feature.

| Setting | Type | Default |
| --- | --- | --- |
| Media Location | Select (Left, Right, Bottom) | left |
| Mobile Media Location | Select (Top, Bottom) | top |
| Slide Direction | Select (Horizontal, Vertical) | horizontal |
| Start % | Number | 50 |
| Show Divider | Checkbox | Off |
| Show Circle Selector | Checkbox | On |
| Bar Color | Color | #fff |
| Bar Opacity | Range | 75 |
| Circle Color | Color | #fff |
| Circle Opacity | Range | 95 |
| Circle Icon Color | Color | #111 |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 3:4, 9:16…) | 16 / 9 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Before Image | Image | — |
| Before Caption | Inline rich text | Before |
| After Image | Image | — |
| After Caption | Inline rich text | After |

### Headline Design
Set design of the headline

| Setting | Type | Default |
| --- | --- | --- |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Rich text | <p>This is an example of the content … |
| Link Text | Inline rich text | Shop More |
| Link | URL | — |
| Spacing between Headline and Features | Number | 15 |

### Button Style
Set the look and feel of the button

| Setting | Type | Default |
| --- | --- | --- |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Button Text Size | Range | 15 |
| Button Padding Top/Bottom | Number | 10 |
| Button Padding Left/Right | Number | 25 |
| Button Border Radius | Number | 5 |