Do you want to show the before and after photos on your Shopify store? A before and after photo can be useful to display side by side comparison of two identical images with minor differences. In this post, we will share how to easily show before and after photo in Shopify.
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme you want to edit, and then click Actions > Edit code.
-
In the Layout section, click theme.liquid to open the file in the online code editor.
-
Find </head> and paste the below code just above it.
{{ '//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js' | script_tag }}
{{ '//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.min.js' | script_tag }}
{{ '//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.min.css'| stylesheet_tag }}
<script>$(function($){$('.twentytwenty-container').twentytwenty();});</script>
Click Save.
It’s easy to get started, just wrap two images inside of a container with class name “twentytwenty-container“. The first image will be on the left and the second one will be on the right. Here’s an example container:
<div class='twentytwenty-container'>
<img src='//cdn.shopify.com/s/files/example1' />
<img src='//cdn.shopify.com/s/files/example2' />
</div>
In case this doesn't work for you. You'll need to install JQuery to your theme.
Navigate to theme.liquid in the layout section and paste the following code just above the code you added in the last step:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>