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
- 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.
- Service Illustrations: Illustrate the effectivity of your services like cleaning services, event management, home renovation, and professional organizing.
- 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 |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Before & After”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.