How To Add Before & After Section in Shopify Store – Free Custom Code No App (2026)

Want to show a dramatic transformation on your Shopify store – like a before-and-after product shot, skin care result, or home renovation? A before and after image slider lets visitors drag to compare two images side-by-side. It is one of the most engaging sections you can add to any product or landing page.

In this tutorial, I will give you the exact code to add a before/after slider to Shopify – no app needed. Just one section file you paste into your theme code. It works with Dawn and all free Shopify 2.0 themes and is fully customizable from the Customizer.

Watch the Video Tutorial

Prefer to follow along visually? Watch the full walkthrough:

What You’ll Get

This is a complete Shopify section with 30+ settings you can control from the Customizer:

Drag & Touch
Works with mouse drag, touch swipe, and keyboard arrows.

Custom Handle
4 icon styles, 3 shapes, custom size and colors.

Before/After Labels
Customizable labels with pill or rounded styles.

Aspect Ratios
Natural, 16:9, 4:3, 1:1, portrait, or custom ratio.

Pulse Animation
Handle pulses on load to show visitors it is interactive.

All Free Themes
Dawn, Refresh, Craft, Studio, Ride, and more.

Step 1: Create a New Section File

Open Your Theme Code

From your Shopify admin, go to Online Store > Themes.
Click the three dots on your current theme > “Edit code”.
In the left sidebar, scroll to the Sections folder.
Click “Add a new section”.
Name it: before-after-slider
Delete any default code Shopify puts in the file.

Step 2: Copy & Paste the Code

Click the Copy Code button below, then paste it into your new before-after-slider.liquid file and click Save.

before-after-slider.liquid

{% comment %}
  Before & After Image Slider -- by EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
{% endcomment %}

{%- assign s = section.settings -%}

<style>
  /* Full CSS with 30+ customizable properties */
  /* Handle, divider, labels, colors, shadows */
  /* Divider glow uses pseudo-elements for */
  /* reliable rendering inside overflow:hidden */
  /* All driven by Customizer settings */
</style>

<section class="ecr-ba-slider-section">
  <!-- Heading + subheading -->
  <!-- After image (bottom layer) -->
  <!-- Before image (top layer, clipped) -->
  <!-- Labels, divider line, drag handle -->
  <!-- Hint text + CTA button -->
</section>

<script>
  /* Pointer events for drag + touch */
  /* Keyboard arrow key support */
  /* Hover-to-slide option */
  /* Smooth easing animation */
</script>

{% schema %}
  /* 30+ settings: images, colors, handle,
     divider, labels, layout, CTA, etc. */
{% endschema %}

Important: The code block above is a preview. Click Copy Code to get the complete working file with all 500+ lines of code.

Step 3: Add It in the Customizer

Open Customize

Go to Online Store > Themes > Customize.
Navigate to the page where you want the slider (Home, Product, etc.).
Click “Add section”.
Search for “Before After Slider”.
Upload your Before and After images.
Click Save.

Step 4: Configure Settings

The section comes with 30+ settings organized into clear groups:

Before/After Images	Upload two images. Use identical dimensions for best results.
Handle & Divider	Choose icon style (arrows/chevrons/dots/bars), shape, size, colors, and glow effect.
Labels	Customizable Before/After text with pill or rounded style, colors, and positioning.
Behavior	Starting position, hover-to-slide, smooth easing, pulse animation on load.
Layout	Aspect ratio, max width, corner radius, shadow, padding, and CTA button.

Need Custom Shopify Development?

I build custom Shopify sections, full theme customizations, and conversion-optimized stores. If you need something beyond this free code – I am here to help.

Hire Me on Fiverr

Free Website Audit

Don’t Have a Shopify Store Yet?

Start your Shopify store for just $1/month – 3-day free trial + $1/month for 3 months (90 days total).

Start Your Shopify Store

Frequently Asked Questions

Does this work on mobile?

Yes! The slider supports touch drag on mobile and tablet. The handle size automatically scales down on small screens for a better experience.

Can I use it on product pages?

Yes – it works on every template: Home, Product, Collection, Pages, and Blog. Just add the section from the Customizer on any page.

What image sizes should I use?

Use identical dimensions for both images. The section supports images up to 2000px wide and automatically generates responsive sizes for different screen widths.

Does it work with all Shopify themes?

It works with Dawn and all free Shopify 2.0 themes. For premium third-party themes, it should also work since it is a standalone section with no external dependencies. Hire me if you need any adjustments.

Can I add multiple sliders on one page?

Yes. Each slider gets a unique ID from Shopify, so you can add as many as you want on any page – each with its own images and settings.

I need help or want more custom features.

I can build custom variations like vertical sliders, auto-sliding animations, multiple image comparisons, or product-specific before/afters with metafields. WhatsApp me or hire me on Fiverr.

Let’s Build Your Dream Shopify Store

I’m a Shopify developer specializing in theme customization, CRO, and custom sections. Small tweak or full store build – I’m here to help.

Built by EcomRanks – Shopify Development & CRO