How to Add a Before and After Slider on Your Shopify Store (Free Code Included)

Looking for a simple way to showcase before-and-after transformations on your Shopify website? Whether you’re in beauty, fitness, design, or home improvement — a before and after image slider can visually boost trust and conversions.

In this guide, we’ll show you exactly how to add a before/after slider to Shopify — no app needed. And yes, we’re giving you the full code — just copy and paste!

Why Use a Before and After Slider in Shopify?

A before-and-after slider is one of the most powerful ways to highlight the impact of your products or services. It helps build credibility, shows real results, and gives your visitors a reason to convert.

Perfect For:

  • Skincare and cosmetic brands

  • Fitness or weight loss programmes

  • Home renovations and furniture makeovers

  • Photo editing or graphic design portfolios

Download the Before & After Slider Code for Shopify

We’ve written a clean, lightweight code snippet that works beautifully in Shopify. You don’t need an extra app — just copy, paste, and go.

👉 [Download the Shopify Before and After Slider Code]

How to Install the Before/After Slider on Shopify

Here’s how to add it in just a few minutes:

Step 1: Open Shopify Theme Editor

  • Log in to your Shopify admin panel

  • Go to Online Store > Themes

  • Click Actions > Edit Code

Step 2: Create a New Section

  • Under the Sections folder, click Add a new section

  • Name it before-after-slider

  • Paste the full code you downloaded into the new file

  • Click Save

Step 3: Add the Section to Your Page

  • Go back to your Shopify theme editor

  • Edit the page where you want the slider to appear

  • Click Add section, then choose Before After Slider

  • Upload your “before” and “after” images and adjust the settings

Step 4: Preview and Publish

That’s it! Preview your page to see the slider in action, then click Save and Publish.

Scroll to Top