Before / After

Create interactive image comparison sliders that let customers drag to reveal transformations. Perfect for showcasing product results, makeovers, and visual improvements.

📁 sections/before-after.liquid⏱️ 5 min setup

Overview

The Before/After slider is an interactive way to demonstrate product effectiveness or visual changes. Customers can drag the handle to compare two images side by side.

↔️

Drag to Compare

Interactive slider reveals changes
📱

Touch Friendly

Works great on mobile devices
🎨

Customizable Handle

Match your brand colors
📝

Content Overlay

Add labels for each image

When to Use

  • Product results — Show before/after using your product
  • Skin care — Demonstrate treatment effects
  • Home improvement — Room makeovers, renovations
  • Fashion — Outfit transformations, styling changes
  • Photo editing — Demonstrate retouching or filters

Quick Setup

Add Before/After in 3 Steps

  1. 1Add section → Before / after
  2. 2Upload your Before and After images
  3. 3Adjust the Start position and labels

Section Settings

Images

SettingTypeDefaultDescription
Beforeimage-The 'before' image (typically shown on the left).
Afterimage-The 'after' image (revealed as user drags right).
Aspect ratiotext16 / 9Image aspect ratio using CSS format. Examples: '16 / 9', '4 / 3', '1 / 1'.

Slider

SettingTypeDefaultDescription
Start positionrange50%Where the divider starts. 50% shows half of each image. Range: 0–100%.

Labels

SettingTypeDefaultDescription
Show labelscheckboxtrueDisplay 'Before' and 'After' labels on the images.
Before labeltextBeforeLabel text for the left/before side.
After labeltextAfterLabel text for the right/after side.

How It Works

  1. Two images overlay — Before image sits behind, After image on top
  2. CSS clip-path — The After image is clipped based on slider position
  3. Range input — A full-size, transparent range slider captures user input
  4. Real-time update — As user drags, clip-path adjusts instantly

Interaction Methods

How Users Interact

Drag
Click and drag the handle left/right
Click
Click anywhere on the image to jump to that position
Keyboard
Use arrow keys when focused (Shift for larger steps)
Touch
Swipe on mobile devices

Image Guidelines

Recommended Dimensions

  • Both images should be the same size — Prevents misalignment
  • Minimum: 1000×600px
  • Recommended: 2000×1200px for crisp displays
  • Maximum: Keep under 5MB for performance

Content Alignment

For best results, ensure:

  • Both images show the same subject from the same angle
  • Lighting conditions are similar or intentionally different
  • Key elements are aligned between images

Aspect Ratio Examples

Common Aspect Ratios

16 / 9Recommended
Landscape photos, room shots
4 / 3
Product photos, portraits
1 / 1
Social media style, square crops
3 / 4
Tall portraits, mobile-optimized

Use Case Examples

Skincare Results

  • Before: Skin issue (acne, dryness)
  • After: Clear skin after using product
  • Labels: "Day 1" / "Week 4"

Room Makeover

  • Before: Messy or outdated room
  • After: Styled, modern interior
  • Labels: "Before" / "After Styling"

Photo Editing Service

  • Before: Unedited raw photo
  • After: Professionally retouched
  • Labels: "Original" / "Enhanced"

Product Usage

  • Before: Untreated surface/material
  • After: After applying your product
  • Labels: "Untreated" / "48 Hours Later"

Best Practices

Visual Impact

  1. Use dramatic but realistic differences — Too subtle is boring, too extreme seems fake
  2. Keep the same camera angle — Misalignment is distracting
  3. Match lighting where appropriate — Unless lighting change is the point
  4. Choose a 50% start position — Shows both images equally

Labeling

  1. Use descriptive labels — "Day 1" / "Day 30" is more compelling than "Before" / "After"
  2. Keep labels short — One or two words maximum
  3. Consider hiding labels — For obvious comparisons

Accessibility

  • The slider is fully keyboard accessible
  • Arrow keys move the divider (Shift for larger jumps)
  • Screen readers announce the slider purpose
  • Respects prefers-reduced-motion settings

Troubleshooting

Images appear misaligned

  • Ensure both images are the exact same dimensions
  • Upload images with identical aspect ratios
  • Crop images to match if necessary

Slider handle is hard to see

  • The handle uses a white circle with dark border
  • Choose images without white/light areas in the center
  • Slider track is visible as a vertical line

Touch/drag not working on mobile

  • Ensure JavaScript is enabled
  • Check for conflicting scripts
  • Test in different mobile browsers

Images look stretched

  • Verify the Aspect ratio setting matches your images
  • Use proper CSS aspect ratio format (e.g., "16 / 9" with spaces)
  • Images use object-fit: cover to fill the container