How To Create a Parallax Scrolling Effect in Shopify?

In this tutorial, we would help you figure out how to create a stunning parallax scrolling section to your Shopify store. How To Create a Parallax Scrolling Effect in Shopify?

1. From your Shopify admin, go to Online Store > Themes.

2. Select the theme, and then click Actions > Duplicate and create a duplicate copy of your theme.

3. Select the duplicate of your live theme then click Actions > Edit Code.

4. On the left bar, in the Assets directory open theme.scss.liquid then add the following code inside the file.

.parallax-effect { 
   background-image:url('https://cdn.shopify.com/s/files/1/0522/8501/4180/files/gettyimages-657495548-1527710829.jpg')
   position: relative !important; 
   display: block;
   background-size: cover; 
   background-position: center; 
   background-repeat: no-repeat; 
   background-attachment: fixed; 
   overflow: hidden; 
}

5. Again on the left bar, in the Sections directory create a new file called parallax-product.liquid and add your code inside the below div.

6. To add a parallax scrolling effect to an existing section, you only need to put the section in the div container.

<div class="parallax-effect">
   <!--- Your Section Code --->
</div>

If you need any help please leave your queries in the comment box.How To Create a Parallax Scrolling Effect in Shopify?expoundsofttechsolution

s