How To Create a Parallax Scrolling Effect in Shopify
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
<!--- SECTION CODE --->
This is only a basic guide. In fact, you may adjust something to make sure it’s working fine with your Shopify store.