How To Create a Parallax Scrolling Effect in Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy the first month of Shopify for $1.

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!

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *