How To Create a Parallax Scrolling Effect in Shopify
Parallax scrolling is a website 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 on how to add parallax scrolling to a section on your Shopify store.
How to create a Parallax scrolling effect manually
Step 1: Upload the 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:
1 2 3 4 5 6 7 8 9 | .hura-parallax{ background-image:url(//cdn.shopify.com/s/files/1/0015/7417/4755/t/1/assets/home-bg-1.jpg) background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: cover; background-attachment: fixed; display: block; } |
Step 3: Apply the Parallax Scrolling Effect to a section
To add a parallax scrolling effect to an existing section, you only need to put the section in the div container <div class="hura-parallax"></div>.
1 2 3 | <div class="hura-parallax"> <!--- SECTION CODE ---> </div> |
This is only a basic guide. You may adjust something to make sure it’s working fine with your Shopify store.
How to create a Parallax scrolling effect by app
If you’re more technical, you can follow the guide above to do this manually. If you consider yourself non-technical, there are Shopify apps that help you. One of them is called Hura Theme Blocks. Hura Theme Blocks has several app blocks/sections that you can use to make beautiful layouts in Shopify Online Store 2.0. One of them is the Parallax scrolling effect section.
Follow the steps below to learn how to create a parallax scrolling effect in Shopify by app.
Step 1: Install the Hura Theme Blocks app
Go to the Shopify App Store, find the Hura Theme Blocks app, and then install it.
Step 2: Install the Parallax Banner section to the Shopify theme
Go to the app dashboard, browse the section library, find the section name Parallax Banner, choose the theme, and install it.
Step 3: Add the Parallax Banner section to the Shopify store
- From your Shopify admin, go to Sales channels > Online Store > Themes.
- Find the theme you want and then click on the Customize button
- In the Customize page, let’s choose the page you want to customize.
- In the Theme Editor of this page, click on the Add section
- Find the Parallax Banner section, and add it.
- You can customize them to suit your needs and preferences.
- Click Save and you are done.
Conclusion
You can easily add a parallax scrolling effect to your Shopify store by following the guides in this article. Your online store will stand out from your competitors and create an engaging experience for your visitors with this feature.
I hope this article is helpful to you.
