How to Create a Before and After Slider on Shopify in 4 Steps?

A before and after slider is a dynamic, interactive tool that lets users compare two images by dragging a slider left or right. On a Shopify store, it allows you to present real results, product benefits, or service outcomes in a visual, side-by-side format.

More than that, adding this feature to your Shopify store is simple in two ways:

• Use a theme with a built-in before and after slider.
  
• Install a page builder or a no-code app. 
  

Let’s go through how to create a before and after slider, where to place it, and how to make it convert!

Why You Need Before and After Slider on Your Shopify Store? 

Online shoppers rely heavily on visuals, and a Shopify before and after slider provides interactive proof of your product’s effectiveness. Instead of just describing benefits, you show them instantly.

• Boosts customer engagement: A before and after image slider encourages interaction and increases engagement, especially when placed on homepages, product pages, or featured sections.
  
• Builds trust through visual proof: Our brain processes visual impressions 60,000 times faster than text. For transformation-based products—like skincare, fitness, or home upgrades—before and after photos provide real, tangible results. 
  
• Supports higher conversions: By showing clear transformations, it answers the question “Will this work for me?” and increase buyer confidence.
  
• Enhances the user experience: This type of slider simplifies comparison and fits well into modern, clean layouts.
  

Since this is one of the most persuasive tools on your Shopify store, so who should use a before and after slider?

• Skincare and cosmetics brands can use a before and after slider to highlight product effectiveness. 

Proactiv shows acne treatment results

• Home décor and furniture brands leverage Shopify before after slider to showcase before/after room setups, furniture makeovers, or styling services. 

Decorilla displays room redesigns.

• Cleaning and repair services can display before and after cleaning or repair work. 

TIDY HOME Cleaning Services Ltd uses before and after photos to show organized spaces

• Fitness and wellness products can highlight body transformations or fitness results.

Kayla Itsines shows workout progress

• Creative and design services can showcase design work like logo redesigns or website makeovers. E.g., A Shopify agency can use it for portfolio highlights.
  

💡 For more tips on aligning visual design with better performance, explore our guide on Shopify store design factors.

How to Create a Before and After Slider in Shopify (No Code Needed) 

By default, the Shopify editor doesn’t come with a built-in before and after slider feature. So, if you want to use this dynamic tool on your store, you’ll need to leverage a theme, page builder, or app to set it up. In this section, we’ll show you how to easily create a before and after slider without needing any coding skills.

Set up with a theme in 4 steps

One of the easiest ways to create a before and after slider is by choosing a Shopify theme that already includes this feature, especially when you're starting a new store or redesigning your current one.

Sleek theme is a great option to start with. This theme offers a clean, interactive-optimized design that includes a built-in before and after picture slider section.

Follow these four simple steps to get it up and running:

Step 1: Install Sleek theme 

• From your Shopify dashboard, go to Online Store > Themes. 
  
• Click visit Theme Store > search for the Sleek theme > install.

Step 2: Customize your theme

• In your theme library section, click Customize at Sleek theme to start. 

• Select the page where you want to add the before and after slider (for example, your homepage, product pages, or landing page).
  

Step 3: Add the before and after slider section

• In the theme editor (Customize), click Add section.
  
• Locate the Before/ After image slider section.

• Make necessary changes in the editor, such as adjusting the block and layout, modifying the header text, and more.

• Click Save
  

Step 4: Upload your images

• In Before/after image slider section, click to choose the before and after images.
  

• Upload your images. You can choose a different image version for mobile and desktop for better user experience.
  
• Click Save to finish.
  

And that’s it! You’ve now added a before and after photo slider to your Shopify store using Sleek. You can also follow the same steps mentioned above when using other themes from Shopify.

For the real experience, try Sleek theme on Shopify to discover more!

Set up with a page builder in 4 steps

If you’re dedicated to your current theme and don’t want to change to a new one, you can still create a before and after slider by using a page builder like Foxify. Foxify lets you drag and drop a before after slider into any page on your store without any coding.

Get started with these five steps:

Step 1: Install Foxify page builder

• From your Shopify dashboard, go to Apps.
  
• Find Foxify Page Builder on Shopify app store and install.

• After installing Foxify successfully, you can access the app from your Shopify admin > Apps > Foxify.
  

Step 2: Enable the Foxify app

After installing Foxify, you must enable Foxify App embed so that it can work with your theme.

• From your Shopify dashboard, go to Online Store > Themes > Customize your current theme.
  
• In your theme editor (Customize), locate App embeds on the left sidebar.
  
• Tweak the toggle to enable Foxify Theme Helper.
  
• Click Save to finish.

If your store password is on, you will need to provide Foxify with your password.

• From the Foxify Dashboard, click on Settings at the bottom left > General.
  
• In your General settings, fill in your Storefront password.
  
• Hit Save to finish.
  

To get the password, in your Shopify Admin, go to Online Store > Preferences > Password protection.

Step 3: Add before and after slider section on your Shopify stores

• Navigate Foxify Page Builder > Page manager > Choose the page you want to customize or create a new page. You can choose from more than 150 ready-to-use high-converting templates from Foxify to create or have ideas for your page easily.

• In the page builder editor, click Add element at the top left > locate the before/after image slider element.
  
• Drag and drop the before and after slider element to the desired position on the page

Step 4: Add images and customize the element

• Click in the before/after image slider element > click select image to choose your images.
  
• Customize the elements in the editor, such as adjusting the size, color, font, background, and more.

• Click Save > Publish to finish.
  

And you are done! Beyond the before and after slider, Foxify gives you the flexibility to customize your pages with numerous features designed to boost user engagement and conversions. Whether it's adding high-converting call-to-action buttons, creating personalized layouts, or fine-tuning your mobile responsiveness, Foxify has you covered. This makes it a great solution for store owners who want to keep their existing theme but still leverage premium e-commerce features.

💡 If you want to learn more about customizing your Shopify store, check out our detailed guide on Shopify website customization.

Set up with a Shopify app

If you prefer a simpler, stand-alone solution, you can also use a dedicated before and after slider app. There are several apps available on the Shopify App Store that let you add a slider to your store without the need for a page builder or a new theme.

Here are some before and after photo slider app to refer to:

• Slidr: A simple, easy-to-use app designed specifically for before and after image sliders.
  
• Snap: This app offers customizable sliders and also includes image zoom and other advanced features.
  
• Common Ninja Before & After: A user-friendly app with various style options and image controls for your slider.
  

When selecting a before and after slider app, choose one with drag-and-drop functionality, mobile optimization, and fast load times. Look for customizable design options and easy integration to enhance your store’s performance without the need for coding.

How to Design a High-Converting Before and After Slider 

To ensure yourbefore and after slider not only looks great but also boosts engagement and drives conversions, you'll need to pay attention to both design and user experience. Here are key tips to ensure your slider works effectively.

Select Impactful Images

The core of your Shopify before after slider is the images. Without high-quality and consistent images that clearly show transformation, your slider won’t achieve its full potential.

• Use high-quality images: Use sharp, high-resolution photos that allow customers to see every detail.

Source: Sleek theme demo

• Highlight important changes: Make sure the transformation is clear. Whether it's skin improvement, a room makeover, or product damage repair, the change should be obvious.
  
• Maintain consistent lighting, position, and angles: Keeping the lighting and angles the same across both images creates a more professional and realistic comparison.

Source: Foxify demo

• Keep the design clean and minimal: Avoid clutter. The focus should be on the transformation, not on unnecessary design elements.
  
• Use real examples: Whenever possible, use real customer photos or authentic examples to build trust with your audience.
  

Position the Slider Wisely

Position your before and after slider where visitors can easily see it and interact with it. By placing it in high-traffic areas, you increase the chances of engagement, which leads to more conversions.

• Homepage: Place the slider in a prominent position, such as the hero section, to immediately grab attention.
  
• Product pages: Show the transformation for a specific product to reinforce its effectiveness, especially for items that require customer trust, like beauty products or home repairs.
  
• Testimonials section: Adding a slider here, alongside customer feedback, can strengthen the impact of your product claims by showing real-world results.
  
• Blog posts: If you're sharing tutorials or case studies, a slider can demonstrate real examples of your product or service in action.

Frownies, a skincare brand places a before and after section on their home page to display the effectiveness of their products.

Improve SEO

• Add short text, description or labels to clarify results: Use simple labels like “Before” and “After” or describe the change (“Acne Treatment Result” or “Room Cleaned”).
  
• Use alt texts with keywords for better SEO: Don’t forget to add alt text to each image, using keywords like before and after image slider or photo comparison to make your content more discoverable by search engines.
  

Test Speed and Responsiveness

Don’t forget to optimize the loading speed and device responsiveness of photo comparison section to ensure a better experience for all users, keeping them engaged and on your site longer.

• Test loading speed: Ensure that your images are compressed and optimized for fast loading. Slow sliders can negatively impact your site’s performance and user experience.
  
• Test device responsiveness: Make sure the slider functions smoothly on mobile devices, tablets, and desktops. Given the importance of mobile commerce, this is crucial for maintaining a seamless experience across platforms.
  

Make It More Engaging

Lastly, make your before and after photo slider more engaging by adding elements that encourage action.

• Add a CTA near the slider: Include call-to-action buttons like “Shop the Look,” “Get the Glow,” or “Try Now.” These buttons help guide users toward the next step, whether it’s making a purchase or learning more about the product.
  
• Combine with testimonials for stronger social proof: Show real customer reviews alongside your slider. When users see positive feedback in addition to a transformation, it reinforces the value of your product or service.
  

📈 To increase the persuasiveness of your products and improve customer conversion, product cards are another important element to consider behind your Shopify before and after slider. For more tips on how to enhance your product card and create a more compelling product page, check out our detailed guide on product card design.

Before and After Slider FAQs

1. What is before and after slider?

A before and after slider is an website element that lets shoppers compare two images side-by-side by dragging a line. It's used to showcase transformations, like product results or service improvements, making it easy to see the difference before and after using a product.

2. How to create before and after slider in Shopify store?

You can add a before and after slider in Shopify by:

• Choosing a theme that includes this feature (e.g., Sleek theme, Minimog theme…)
  
• Using a Shopify page builder like Foxify
  
• Installing a dedicated slider app
  

These tools let you add the slider, upload images, customize the layout, and place it anywhere on your store.

3. Can I create a before and after slider without coding skills?

Yes! You can easily create a before and after slider with Foxify, Sleek theme, or slider apps. No coding needed—just drag and drop or upload your images.

4. Where should I position the before and after slider on the store?

Place the before and after photos in high-traffic areas for maximum impact:

• Homepage: In the hero section for immediate attention
  
• Product pages: To highlight specific product transformations
  
• Testimonials: To reinforce credibility alongside customer reviews
  
• Blog posts: To showcase real-world examples or case studies
  

5. What types of images should you use for the Shopify before and after slider section?

Use high-quality, consistent images with the same lighting, angle, and composition. Ensure the transformation is clear and the images are easy to compare.

6. How can I optimize the before and after slider?

To optimize your before and after slider:

• Add labels (e.g., “Before” and “After”) to clarify the change
  
• Use alt text with keywords for better SEO
  
• Compress images for faster load times
  
• Ensure mobile responsiveness for a smooth user experience
  
• Add a CTA (e.g., “Shop Now” or “See More Results”) to encourage action
  

We hope these detailed instructions will help you easily create great comparison images on your store. To further enhance your store's UI UX, follow FoxEcom's blog for more insights and helpful tips.