Before and After Slider for Shopify Stores: No-code, Quick and Easy Guide (2024)

Before and After Slider for Shopify Stores: No-code, Quick and Easy Guide (2024)

Introduction

You have superhero products and want to illustrate their effectiveness over time. You understand that the static image does not convey the full impact but you're unsure how to showcase this on your website.

before-after-slider

Source: Foxify Help Center

Don't worry! We'll show you how to create a stunning Before and After image slider and optimize your visuals to highlight your product's power in 2 ways: with built-in theme sections, and with a third-party app.

By the end of this article, you'll be able to showcase your product's effectiveness and make your online store more appealing, all without needing any technical skills.

What is a Before and After Slider?

Definition

A Before and After image slider, also called a Comparison slider, shows 2 photos side by side to depict a change or difference. It's often used for:

  • Product Demonstrations: Showing how a product works by displaying before and after photos.
  • Makeovers: Comparing images before and after a makeover or home renovation.
  • Medical Results: Highlighting results of medical procedures, like dental work or cosmetic surgery.
before-after-image-slider

Source: Iipvapi

The significant benefits of using a Before and After slider are undeniable, and can be summarized as follows:

  • Visual engagement: Create an eye-catching comparison that grabs attention because our brain processes visual impressions 60,000 times faster than text.
  • Credibility boost: 76% of consumers regularly read online reviews and testimonials before purchasing. Before and After sliders serve as a visual testimonial, enhancing trust.
  • Storytelling and conversion rate increase: Tell a story of progress or success, adding emotional impact, which can increase up to 30% in conversion rate.

📚 You might also like: 7 Techniques to Skyrocket your Shopify Sales

Well-known brands use Before and After Sliders for their stores

Proactiv

Proactiv is a well-known skincare brand that specializes in acne treatment products. It's particularly famous for its 3-step acne treatment system, which includes a cleanser, toner, and treatment lotion.

before-after-slider

Source: Proactiv

Proactiv uses a Before and After image slider to highlight the effectiveness of their acne treatment products. This slider compares their customers’ skin conditions before and after using the products, making the results apparent and understandable. This visual proof builds trust and keeps potential buyers interested, which boosts sales.

Lancôme

Lancôme belongs to L’Oreal, which offers a wide range of beauty products including makeup, skincare, and fragrances. Lancôme is popular worldwide and is often associated with luxury, sophistication, and French beauty standards.

before-and-after-slider

Source: Lancôme

Lancôme uses the Before and After slider to showcase the application of their product TEINT IDOLE ULTRA WEAR FOUNDATION. Customers can see the power of this 24-hour breathable coverage foundation to cover the acne and uneven skin, while still retaining a healthy glow.

What types of stores should use the Before and After Image Slider?

Any product or service that can create a visual impact, improvement, or change in the appearance of someone or something should utilize a Before and After Slider. Here are the most popular types of stores that use this handy section:

Beauty and Skincare

Beauty and skincare stores can greatly benefit from taking advantage of a Before and After Image Slider. These sliders show the powerful effects of products like acne treatments, anti-aging creams, and makeup, giving strong visual proof of their effectiveness.

For example, a skincare store can use a slider to show how an acne treatment improved a customer's skin over a few weeks, just like Clinique. This visual proof builds trust and encourages potential customers to buy the product.

before-and-after-slider
Source: Clinique

Home Decoration

Home decoration stores can use comparison sliders to show how their products - like furniture and decor items - can transform a space. For instance, they can display a bedroom before and after a redesign to inspire customers with the changes they could make at home.

before-and-after-slider
Source: Decorilla

Fitness and Heath

Fitness and health stores leverage Before and After Image Sliders to demonstrate the customer's physical transformations after using their fitness programs or supplements, motivating potential customers to achieve similar results.

before-and-after-slider
Source: Kaylaitsines

How to Setup a Before and After Slider with Zest theme

If you're starting a new store or planning to change your store's theme, consider choosing a theme with a built-in Before and After section for easy setup.

We highly recommend Zest, a Shopify theme designed for optimal mobile commerce success. It features pre-built content blocks with customizable layouts that allow for easy editing and modification to create any desired pages. It offers beautiful design options, cool image features, and engaging visuals, making your store look professional and attractive. Zest's customizable layouts and built-in sections, like product tabs and slideshows, ensure a cohesive and polished look. With interactive elements and easy customization, Zest helps keep your brand fresh and relevant, improving customer engagement and loyalty.

Here is a Before and After slider made with the Zest theme. For a real experience, visit the Cosmos Zest theme to discover more.

before-and-after-image-slider
Now, let’s dive in on how to set up a Shopify Before and After slider like the one above.

Step 1: Install the Zest theme and experience free trials

  • Add Zest theme at Shopify Theme Store: Install Zest Theme
  • Click Try Theme to add the theme to your online store.
  • In your Shopify admin, click Online Store > Themes.
  • In the Theme Library section, click Customize
zest-shopify-theme

Next step, choose the pages you want to customize and add a Before and After image slider.

Step 2: Add before and after image slider

  • In the theme editor (Customize), click Add section
  • Locate the Before/ After image slider section
  • Make necessary changes.
  • Save
before-and-after-slider

Source: Zest theme

To achieve the effect, it is recommended to use images of the same size and position, and there are visually distinguished differences between the before and after photos.

Step 3: Customize the Image comparison slider

Within this section, you have several customization options, including adjusting the block and layout, modifying the header text, and more.

before-and-after-image-slider
Source: Zest theme

For detailed guidelines, visit the Zest Help Center.

Step 4: Click Save to save all the changes

After customizing everything you need, click Save to save the design.

zest-shopify-theme

How to use Foxify as a Before and After Slider App

Imagine transforming your Shopify store with a stunning Before and After slider without changing your current theme!

Enter Foxify, the ultimate solution for enhancing your store's visual appeal and driving conversions!

This smart, conversion-focused page builder seamlessly integrates with all Shopify themes, including the latest Online Store 2.0, allowing you to elevate your store's visual appeal without changing your entire setup.

Let’s discover how Foxify can elevate your store's aesthetic and function in just a few simple steps to showcase your products' transformative power.

Step 1: Install Foxify to Shopify Store

1. Get Foxify from the Shopify app store

foxify-page-builder

2. Then, you will be directed to your Shopify admin > hit Install app to finish the installation.

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

foxify-page-builder

Source: Shopify Admin

Step 2: Start using the Foxify app

1. Enable the Foxify App embed

After installing Foxify, you must enable Foxify App embed so that it can work with your theme:
Steps:
  • In your theme editor (Customize), locate App embeds on the left sidebar.
  • Tweak the toggle to enable Foxify Theme Helper.
  • Click Save to finish.
customize-foxify
Source: Minimog theme

This is an essential step to let Foxify work well with your theme in one single click without adding any extra code to your theme.

2. Store with a password

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 > Account.
  • In your Account 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.

account-setting-foxify

Source: Foxify Help Center

Step 3: Add Before and After Slider on your Shopify Stores

First, you select the page to add a Before and After slider.
Steps:

1. Navigate Foxify Page Builder > Page Manager> Choose the page you want to customize or create a new page.

Foxify has more than 95 ready-to-use high-converting templates for you to choose from. Help you create or have ideas to build your page easily.

foxify-template
Source: Foxify

2. Add Before/after image slider section

before-and-after-slider
Source: Foxify

Step 4: Customize the section

Within this section, you can customize various elements, such as:
  • Image layout
  • Font size
  • Typography
  • Header text
comparison-slider
Source: Foxify

For details, you can visit the Foxify help center to discover more.

Step 5: Publish page

After customizing all desired elements, click the Save and Publish page.

smart-page-builder

How to Optimize and Create a Stunning Shopify Before and After Slider

Select impactful images to highlight transformations

Choosing images to illustrate transformation may take some time. Here are tips to help you:
  • Use High-Quality Images: Choose clear, optimized images to capture and display the intricate details of the transformations. Ensure the "before" and "after" images are the same size and quality to provide a consistent and impactful comparison.
  • Highlight Important Changes: Select images that demonstrate significant improvements, showcasing the benefits of your product or service.
  • Maintain Consistent Lighting and Angles: Use uniform lighting and angles in both "before" and "after" images for a fair comparison.
  • Use Real Examples: Whenever possible, use real customer photos or authentic examples to build trust with your audience.
before-and-after-app

Position the slider for better visibility and engagement

For better visibility and engagement, consider placing the Before and After slider in the following strategic positions on your Shopify store:
  • Homepage: Place the slider on your homepage to capture immediate attention as soon as visitors land your site.

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

shopify-before-and-after-slider

Source: Frownies

  • Product pages: Position the slider on relevant product pages to showcase the effectiveness of your products directly where purchase decisions are made.

Let’s look at the Lancome store, they use a Before and After image slider on the product page to show how their foundation can match customers’ skin shades and resolve their skin concerns.

shopify-before-and-after-slider

Source: Lancome

  • Testimonials section: Integrate the slider within the testimonials or reviews section to visually complement written customer feedback.

A successful testimonial example for this template is Proactiv. They used a slider to showcase the Before and After images of customers and their results from using the skincare from the brand. This layout brings about an impressive visual effect that makes testimonials more trustworthy.

before-and-after-image-slider

Source: Proactive

📚 Suggested Reading: How to diversify the testimonials page, check it out: Best Testimonial Design Template
  • Blog posts: Incorporate the slider into blog posts that discuss product benefits, customer testimonials, or success stories.

La Clinica, a skincare shop, uses its blog to feature customer testimonials. They highlight real experiences from customers who have used their products, demonstrating the effectiveness and results achieved.

before-and-after-image-slider

Source: La Clinica blog

Add inspirational caption and description

Here’s a step-by-step guide on how to create compelling captions and descriptions:

  • Know your audience: Understand their needs and preferences to make your message resonate.
  • Highlight the change: Emphasize the significant improvement and benefits between the before and after states.
  • Use emotions: Connect with your audience using words that inspire, uplift, or motivate.
  • Be clear: Keep your caption and description simple and easy to understand.
  • Add a Call-to-Action (optional): Prompt your audience to take the next step, like exploring your product or contacting you.

To make it more clear, now we will illustrate by an example:

before-and-after-image-slider
Cosmos’s demo of Zest is an example of a skincare brand aiming to showcase how its products improve skin health. They use Before and After sliders to effectively promote their solutions by highlighting
  • Target audience: Customers seeking a complete solution for stronger, smoother, and more hydrated skin.
  • Visible changes: Before using the products, the skin appears dull; after use, it looks brighter, more even, and youthful with fewer blemishes.
  • Clear captions: The captions are simple and easy to understand, making the benefits clear to potential customers.

Ensure fast loading time and mobile responsiveness

Fast loading time
  • Optimize images: Use tools like TinyPNG for compression and WebP format for better compression rates.
  • Lazy Loading: Implement to load images only when they come into view, reducing initial load time.
Mobile responsiveness
  • Responsive design: Use CSS media queries to adapt the slider layout for different screen sizes.
  • Touch-friendly controls: Include swipe gestures and ensure elements are tap-friendly.

📚 Trying to optimize CRO for your eCommerce store? Dive into our comprehensive guide: Top Conversion Rate Optimization Hacks to Double Sales

FAQs

How can a Before and After slider benefit Shopify stores?

A Before and After slider enhances Shopify stores by visually demonstrating product or service transformations. It effectively engages visitors and builds trust through real-life examples. This compelling marketing tool showcases improvements and can boost conversions.

What types of images should you use for the Before and After slider section?

Use high-quality images with clear contrasts between the before and after states. Ensure consistent perspectives and lighting for an accurate comparison.

Where should you position the Before and After slider on the store?

There are many positions you can consider. Based on your target, it can be placed on the homepage, product page, blogs, etc.

How can you optimize the Before and After image slider for better performance?

Optimize by compressing images, using lazy loading for faster load times, and ensuring your design works on all devices. These steps improve user experience and can boost engagement and conversions on your Shopify store.

Summary

Adding a before and after slider to your Shopify store is a powerful way to showcase transformations and product effectiveness, enhancing visual appeal and customer engagement. We hope the step-by-step instructions from FoxEcom will help you easily create great comparison images on your store.