How To Create a Parallax Scrolling Effect in Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
Start your Shopify 14-day free trial and save up to 25% on Shopify when you sign up for an annual, 2-year, or 3-year plan.

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. This article will guide you how to add a parallax scrolling to a section on your Shopify store.

Step 1: Upload background image

Firstly, you must upload the image to make the background. You go to Settings > Files and you can upload the photo here.

Step 2: Add CSS code

You open the Themes page of the Shopify admin, then click on the Actions drop-down and select Edit code. After that you open the CSS or SCSS file in the Assets folder and add the below code:

Step 3: Apply Parallax Scrolling Effect to a section

To add parallax scrolling effect to an exist section, you only need put the section in the div container <div class="hura-parallax"></div>.

This is only a basic guide. In fact, you may adjust something to make sure it’s working fine with your Shopify store.

Happy coding!

You may also like...

Leave a Reply

Your email address will not be published.