How to put a Before and After Slider on Shopify Stores?

Before and After! Have you ever compared two things in two different periods or different statuses to see how different they are? I think most of you will say yes, it is also a normal way that customers often use when making purchase decisions. Your customers want to see the change before and after using your products. Thus, the Before and After Slider is the best way to show your product’s power via the online platform which is your Shopify store. Let’s explore it!

What is Before and After Slider and what is it used for?

(image comparison on Shopify)

Before and After Slider is an element that enables you to quickly show a comparison version of two photos, usually photos of one object. It can be the images of one person before and after using the goods. Therefore, it is so useful for expressing your product’s power and presenting to customers how effective it is. 

Benefits of Before and After slider

- Increase sales with believable visuals: Inform people of the fantastic results your products or services produce to pique their interest and boost sales.
- Demonstrate the value of your offers: By demonstrating the dramatic shift, you reassure users that your offerings are effective and raise their perceived worth.
- Wow content will maintain users' interest, and high interaction between you and buyers will boost the level of engagement.
- Increase trust, more persuasion

Who should use the Before and After Slider? 

Before and After Slider is applied in various fields to optimize and show your value, it is not limited to any specific industry. Hence, you can use it for your online stores if you need it. 

Below are some special businesses which can take advantage of this element to enhance the efficiency of the product page. 

Beauty

(image source: layout Electric Brush Cleaner - EComposer)

If you own an online store which is in the beauty industry, you can use the Before and After Slider to emphasize the remarkable change before and after using the product positively. For example, if you sell skin care products, you will use this function to show how beautiful your customer’s skin is after experiencing your cosmetics . From that, your customers will see clearly the power of your product.

Yoga and fitness

(image source: https://countdownfit.com/kathleens-before-after/)

The change in a person’s body during a period of time is the most convincing proof to attract consumers to take part in training courses at yoga and fitness centers. It focuses on customers’ insights and gives them solutions. 

Home decoration

(image source: https://www.oldhouseonline.com)

You can use this function to show the home transformation to your customers. Nice photos with big changes can impress customers a lot.

Household goods

(image source: https://thatcleanfeeling.store/tide-fusion/)

They are popular goods which all of us use everyday such as washing-up liquid, detergent powder, floor cleaner, vacuum cleaner, etc,... Comparing objects before and after using the product to see how different they are is a wonderful way for customers to imagine their effectiveness. 

How to set the Before and After Slider for your online stores using EComposer?

In this part, I will introduce you to an easy way to display Before and After photos on your Shopify Stores with dynamic customization using the EComposer app. 

EComposer Page Builder is a Shopify app which allows users to build professional online stores without programming knowledge. It provides a lot of templates and elements for you to create whatever you want only with “drag and drop”. 

Step 1: Install EComposer Page Builder for your Shopify store

Add app at Shopify App Store: EComposer Landing Page Builder

- In your Shopify admin, to authorize the use of the app, click Install apps

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

- Going to “Apps” from Dashboard, click on “EComposer” to open app

- Choose the page/ section that you want to put the Before and After Slider in
- Click on “Elements” in the top left corner, Choose Basic, Before and After Slider will appear under the name “Image Comparison”

Note: In the EComposer app, the Before and After Slider is an Image Comparison element.

- Drag and Drop Image Comparison in the suitable location.

Step 3: Configure image

- After dropping the Image Comparison element, you can see the tab “Edit Image” on the left of your screen. This is for customizing suitable images.
- Simply upload two photos demonstrating the difference or advantage of your work or products, and Image Comparison of EComposer will create a slider with a divider automatically. The ability to interact and move the divider will be adored by users. 

Content

- General: You can upload your before and after images.
- Overlay text allows you to adjust the text of before and after images.

Design

- General: This function includes basic adjustments such as element height, border, box shadow, and spacing.
- Overlay: background
- Overlay text: design typography, text color, and text shadow for overlay text in the content tab
- Spacing bar: you can modify the color, box shadow and size of the spacing bar
- Spacing icon contains color and size adjustment

Advanced: 

- Advanced: This function allows you to change spacing, width, position, transform and transform origin of the pictures.
- Background has normal and hover options 
- Visibility: you can choose the way it is displayed on some devices like desktop, tablet, mobile.
- Animation has animation duration and animation delays to adjust suitably

Step 4: Click save and publish in the top right corner to publish

Your website will look like this picture when it is published on live site.

Read more:

• How To Add Contact Us Button
• How to create Shopify Members-Only Area
• How to add Custom HTML section in Shopify
• How to Add Custom Liquid Section in Shopify

Summary

Overall, Image Comparison or Before and After Slider has a big influence on customers’ journey; Also, it helps you express your product’s value positively, and make trust with customers. Hence, you should consider this function for your online stores and use Image Comparison of EComposer to make it fast and easy.