How to Add a Before/After Slider to Shopify Product Pages

Visual proof outsells written claims.

A Nielsen Norman Group study found that product pages with interactive visual elements see 43% longer session durations and 29% higher add-to-cart rates compared to static image galleries. Before/after sliders — those draggable comparison tools that let customers slide between two images — are among the most effective interactive elements for products with visible transformation results.

Whether you sell skincare, cleaning products, fitness supplements, or home improvement tools, a before/after slider turns abstract promises into concrete proof. This guide covers the complete CSS and JavaScript implementation, photography best practices, and how LiquidBoost's Before/After Comparison snippet delivers the same result without code.

What is a before/after slider and which industries benefit most?

A before/after slider is an interactive image comparison tool that overlays two images and lets users drag a divider to reveal the transformation. Industries with visible product results see the highest ROI — beauty and skincare brands report 38% higher conversion rates, cleaning product companies see 27% lifts, and fitness supplement brands measure 31% more engagement, according to a 2025 Convertcart analysis of 1,200 Shopify stores.

A before/after slider displays two images stacked on top of each other with a draggable divider line. The user moves the divider left or right to reveal more of either image. The interaction is intuitive — most users understand it without instructions — and it creates a compelling visual narrative that static images simply cannot match.

The slider works because it puts the customer in control of the comparison. Instead of passively viewing two side-by-side photos, they actively explore the transformation. This interaction creates deeper engagement and stronger memory of the product's benefits.

Industries where before/after sliders drive the highest conversions:

The common thread is visible transformation. If your product changes something that can be photographed, a before/after slider will outperform any written description of that change.

Even stores outside these industries find creative uses. Furniture stores show rooms before and after styling. Food brands show ingredients before and after cooking with their sauces. Pet product companies show coat condition before and after using their grooming tools.

How do you build a before/after slider with CSS and JavaScript?

Building a before/after slider requires a container div with two overlapping images, CSS positioning to layer them, and 30-40 lines of JavaScript to handle the drag interaction. The implementation uses the clip-path CSS property for smooth image reveals and pointer events for cross-device compatibility, working on both desktop mouse and mobile touch inputs.

Here is the complete implementation broken into three parts: HTML structure, CSS styling, and JavaScript interactivity.

Step 1: HTML structure

Create a new snippet file in your theme at snippets/before-after-slider.liquid:

<div class="ba-slider" data-before-after>
  <div class="ba-image ba-after">
    <img src="{{ block.settings.after_image | image_url: width: 800 }}" alt="After using {{ product.title }}" loading="lazy">
  </div>
  <div class="ba-image ba-before">
    <img src="{{ block.settings.before_image | image_url: width: 800 }}" alt="Before using {{ product.title }}" loading="lazy">
  </div>
  <div class="ba-handle">
    <div class="ba-handle-line"></div>
    <div class="ba-handle-circle">
      <span class="ba-arrow ba-arrow-left">&#9664;</span>
      <span class="ba-arrow ba-arrow-right">&#9654;</span>
    </div>
    <div class="ba-handle-line"></div>
  </div>
  <div class="ba-labels">
    <span class="ba-label ba-label-before">Before</span>
    <span class="ba-label ba-label-after">After</span>
  </div>
</div>

Step 2: CSS styling

.ba-slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  cursor: ew-resize;
  border-radius: 8px;
  user-select: none;
}

.ba-slider img {
  display: block;
  width: 100%;
  height: auto;
}

.ba-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
}

.ba-after {
  position: relative;
}

.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  z-index: 10;
}

.ba-handle-line {
  flex: 1;
  width: 3px;
  background: white;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.ba-handle-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ba-labels {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}

.ba-label {
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}

Step 3: JavaScript drag handling

document.querySelectorAll('[data-before-after]').forEach(slider => {
  const before = slider.querySelector('.ba-before');
  const handle = slider.querySelector('.ba-handle');
  let isDragging = false;

  function updateSlider(x) {
    const rect = slider.getBoundingClientRect();
    let percent = ((x - rect.left) / rect.width) * 100;
    percent = Math.max(0, Math.min(100, percent));
    before.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
    handle.style.left = percent + '%';
  }

  slider.addEventListener('mousedown', () => isDragging = true);
  document.addEventListener('mouseup', () => isDragging = false);
  slider.addEventListener('mousemove', e => {
    if (isDragging) updateSlider(e.clientX);
  });

  slider.addEventListener('touchstart', () => isDragging = true);
  document.addEventListener('touchend', () => isDragging = false);
  slider.addEventListener('touchmove', e => {
    if (isDragging) updateSlider(e.touches[0].clientX);
  });
});

Include the snippet in your product template by adding {% render 'before-after-slider' %} inside your product section's block loop.

What are the best photography tips for before/after comparison images?

Effective before/after photos require identical framing, lighting, and backgrounds in both images. Use a tripod or fixed camera position, shoot in the same natural light conditions, and maintain identical white balance settings. Studies from Shopify Plus merchants show that professionally shot before/after images convert 2.4x better than user-submitted photos, though authentic user photos build 1.8x more trust.

The slider is only as good as the images inside it. Poor photography undermines the entire comparison, making results look unbelievable or the product look ineffective.

Lighting consistency matters most. Shoot both images under identical lighting conditions. Different lighting can make an after image look better or worse purely because of shadows and color temperature — not because of actual product results. Use natural daylight from the same window at the same time of day, or use studio lighting with identical settings.

Lock your camera position. Even small changes in angle, distance, or height create visual discrepancies that distract from the actual transformation. Use a tripod. Mark the camera position on the floor. For product shots, use a copy stand or fixed mount.

Background control. Use the same neutral background for both shots. A clean white or gray background keeps attention on the transformation. Avoid patterned or colored backgrounds that shift attention away from the product effect.

Resolution and aspect ratio. Both images must be the same dimensions and resolution. Mismatched sizes cause the slider to display incorrectly, with one image appearing stretched or cropped compared to the other. Export both at 800x600 or 1200x900 pixels.

Timing documentation. Label the time period between photos clearly. "Day 1 vs. Day 30" is far more credible than unlabeled before/after images. Customers are naturally skeptical of transformation claims, and specific timelines build trust.

Ethical considerations. Never manipulate images to exaggerate results. The FTC has guidelines for testimonials and endorsements that apply to before/after claims. Show real results from real customers using your product as directed.

Skip the coding and get a polished before/after slider instantly. LiquidBoost's Before/After Comparison snippet installs in one click with mobile-optimized touch controls, customizable handle styles, and lazy-loaded images for fast page speed. Combine it with Customer Love Social Proof to show real customer results alongside slider comparisons. Explore all product page snippets.

How does LiquidBoost's Before/After Comparison snippet work?

LiquidBoost's Before/After Comparison snippet is a pre-built, mobile-optimized slider component that installs in under 60 seconds through the Shopify theme editor. It includes touch-optimized drag controls, lazy image loading for performance, customizable labels and handle styles, and accessibility features — all without writing CSS, JavaScript, or Liquid code.

The manual CSS and JavaScript approach works, but it requires ongoing maintenance. Browser updates may break touch handling. Shopify theme updates can conflict with custom styling. And mobile optimization across hundreds of device sizes requires extensive testing.

LiquidBoost's Before/After Comparison snippet eliminates these maintenance concerns:

The snippet integrates into Shopify's theme editor as a section block. You upload your before and after images, adjust label text and handle style, and publish. No code editing, no file transfers, no deployment.

For stores in beauty, fitness, or cleaning, combining the Before/After Comparison with Product Benefits creates a powerful product page that shows both the visual proof and the feature explanation in a cohesive layout.

How do you optimize before/after sliders for mobile and page speed?

Mobile optimization requires touch event handling with passive listeners, images sized at 2x display resolution for retina screens, and lazy loading via Intersection Observer to prevent the slider from affecting initial page load time. Properly optimized sliders add less than 50KB to page weight and zero milliseconds to Largest Contentful Paint, compared to 200-400KB for unoptimized implementations.

Mobile users account for 72% of Shopify store traffic, and before/after sliders must work flawlessly on touch devices. Here are the critical optimization steps.

Touch event handling. Use passive event listeners to prevent scroll jank:

slider.addEventListener('touchmove', handler, { passive: true });

Without the passive: true flag, the browser waits to determine if the touch event will prevent scrolling, causing visible lag on the slider interaction.

Image optimization. Serve images at 2x the display size for retina screens, but compress them aggressively. An 800px-wide slider needs 1600px source images, but compressed to WebP format they stay under 80KB each. Use Shopify's built-in image transformation:

{{ image | image_url: width: 1600, format: 'webp' }}

Lazy loading. Load slider images only when the slider enters the viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const images = entry.target.querySelectorAll('img[data-src]');
      images.forEach(img => {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      });
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('[data-before-after]').forEach(slider => {
  observer.observe(slider);
});

CSS containment. Add contain: layout style paint to the slider container to prevent layout shifts as images load. This improves Cumulative Layout Shift (CLS) scores.

Fallback for no-JavaScript. Wrap the slider in a <noscript> check and provide a simple side-by-side image layout for users with JavaScript disabled:

<noscript>
  <div class="ba-fallback" style="display:flex;gap:8px;">
    <img src="before.jpg" alt="Before">
    <img src="after.jpg" alt="After">
  </div>
</noscript>

How do you add multiple before/after sliders to a single product page?

Adding multiple sliders requires initializing each slider independently using a querySelectorAll loop and scoping event listeners to each container element. Shopify's section rendering API supports this natively when sliders are implemented as section blocks, allowing merchants to add unlimited comparison pairs through the theme editor without additional code changes.

Some products benefit from showing multiple transformations. A skincare line might show results on different skin types. A cleaning product might show performance on various surfaces.

The JavaScript from the earlier section already supports multiple sliders through the querySelectorAll loop. Each [data-before-after] element gets its own independent event listeners.

For the Shopify theme editor integration, define the slider as a block type within your section schema:

{
  "name": "Before/After Slider",
  "type": "before_after",
  "settings": [
    {
      "type": "image_picker",
      "id": "before_image",
      "label": "Before image"
    },
    {
      "type": "image_picker",
      "id": "after_image",
      "label": "After image"
    },
    {
      "type": "text",
      "id": "caption",
      "label": "Caption",
      "default": "Results after 30 days"
    }
  ]
}

This lets merchants add, remove, and reorder comparison sliders directly in the theme editor. Each block instance creates an independent slider with its own images and caption.

For performance, limit the number of sliders visible above the fold to two. Additional sliders below the fold should use lazy loading to avoid impacting page speed.

Frequently Asked Questions

Do before/after sliders slow down Shopify product pages?

A properly optimized slider adds less than 50KB to page weight and zero impact to Largest Contentful Paint if images are lazy loaded. The JavaScript is under 2KB minified. Performance issues only arise from uncompressed images — a single unoptimized 4MB photo will slow any page regardless of the slider code. Use WebP format and Shopify's image CDN for automatic compression.

Can I use before/after sliders with Shopify's Online Store 2.0 themes?

Yes. Online Store 2.0 themes support app blocks and custom sections that make slider integration straightforward. Define the slider as a section block with image picker settings, and merchants can add sliders to any template through the theme editor. LiquidBoost's Before/After Comparison snippet is built specifically for OS 2.0 compatibility and works with Dawn, Craft, Sense, and all standard themes.

What image dimensions work best for before/after sliders?

Use a 4:3 aspect ratio (800x600 or 1200x900 pixels) for the best balance of detail and page performance. Square images (1:1) work for beauty product close-ups. Landscape images (16:9) work for room transformations or wide-angle comparisons. Both images must be identical dimensions — mismatched sizes cause display errors and undermine the visual comparison.

Are before/after sliders accessible for users with screen readers?

They can be, but most implementations miss accessibility requirements. Add ARIA labels to the handle element (aria-label="Comparison slider"), role attributes (role="slider"), and descriptive alt text on both images that explains what each image shows. Keyboard support via arrow keys is also important for users who cannot use a mouse or touchscreen. LiquidBoost's snippet includes all accessibility features by default.

Can I use customer-submitted photos in before/after sliders?

Yes, and customer photos often outperform professional studio shots for trust-building. However, customer photos typically have inconsistent lighting, angles, and backgrounds, which can make the slider comparison less impactful visually. The best approach is to use professional photos for your main product page slider and feature curated customer submissions in a separate social proof section below the slider.

Keep Reading

• How to Add Social Proof to Your Shopify Store
• How to Optimize Shopify Product Pages for Conversions
• How to Add Reviews to Your Shopify Store

What if your slider could automatically pull the highest-rated customer transformation photos and rotate them without any manual updating?