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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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
- Visit Foxify Smart Page Builder on the Shopify App Store.
- Click Install.
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.
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.
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.
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.
2. Add Before/after image slider section
Step 4: Customize the section
Within this section, you can customize various elements, such as:- Image layout
- Font size
- Typography
- Header text
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.
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.
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.
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.
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.
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.
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:
- 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.
- 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.
