How to Add Before & After Slider in Shopify

 

Add Before & After Slider in Shopify
Add Before & After Slider in Shopify

How to Add Before & After Slider in Shopify?

Do you want to create a professional Shopify store? Then you land on the right article. In this lecture, we are covering about how to add before and after slider in Shopify. But if you have investment, you can contact me on WhatsApp (+923176186400). I make a complete & Professional store for your future business.

Let's talk about our topic, so this slider is used to show the customers how the product looks before and after. This section on your store makes the customer more engaging. We use some custom liquid to make the after and before slider for Shopify store.


This type of after and before slider used in single product store, but you can use this on both single or multi product store. After applying this section, the sales of your product increase automatically. 

Is this code responsive?

Yes, this code is 100% responsive and mobile friendly. It works on both PC/Laptop & Mobile Screens. There are three option in this code, you can select manually where you want to show the slider. 

  • Mobile
  • Desktop
  • Both

How to add before and after slider?

Follow the given steps one by one to apply this before and after slide effect in Shopify store.


  1. Log in to your store.
  2. Go to theme section.
  3. Click on 3 dots.
  4. Click on edit button.
  5. Go to theme. Liquid option.
  6. Copy header code.
  7. Paste below the <head> tag.
  8. Save the code.
  9. Scroll & Open Section Folder.
  10. Click on “add new section” Button.
  11. Enter File Name & click on Save.
  12. Copy After & Before code.
  13. Paste in new file & save.
  14. Go to customize.
  15. Add before & after slider section.
  16. Add images (before & after).

So here are some basic steps you need to follow to add before and after slider in Shopify. Here is the code button below. Click on the below download button to get the custom liquid code.



If you still face issue to apply this code, then watch the below video for better understanding. The video is available in Urdu/Hindi language only.



Post a Comment (0)
Previous Post Next Post