How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
Gradually becoming one of the most popular web design trends, the parallax scrolling effect has become even more popular on various online platforms in the last few years. Parallax scrolling, simply put, is when background content on a website moves at a different speed than the foreground content while scrolling.
Becoming even popular in Shopify stores, you shouldn’t be surprised to see several different elements on a page move at different speeds, thereby creating a three-dimensional space effect.
Wondering how to create a stunning Parallax scrolling section in your Shopify store? Then this tutorial on how to create a stunning parallax scrolling section in your Shopify store is exactly what you need.
In this tutorial, we would help you figure out how to create a stunning parallax scrolling section on on your Shopify store using code HTML and CSS, and LIQUID.
Create A Stunning Parallax Scrolling Shopify
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme, and then click Actions > Duplicate.
3. Find the duplicate of your live theme then click Actions > Edit Code.
4. On the left bar, search for a folder called Assets then add the following code inside the “theme.scss.liquid” file
// Parallax Featured Product Style
.featured {
position: relative !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
height: 400px;
color: #fff;
font-size: 18px;
font-size: 1.125rem;
overflow: hidden;
}
.featured h3 {
color: #fff;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
font-size: 36px;
font-size: 2.25rem;
}
.featured .price_box {
display: inline-block;
margin-right: 15px;
float: left;
}
.featured .price_box .new_price {
font-size: 2rem;
color: #fff;
}
.featured .price_box .old_price {
color: #999;
text-decoration: line-through;
display: inline-block;
white-space: nowrap;
font-weight: 500;
font-size: 16px;
font-size: 1rem;
margin-left: 5px;
font-size: 1.125rem;
}
.opacity-mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);
}
.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
}
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
.margin_60 {
padding-top: 60px;
padding-bottom: 60px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 40px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column-one {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
@media (max-width: 767px) {
.featured {
font-size: 16px;
}
.featured h3 {
color: #fff;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
font-size: 28px;
}
.featured .price_box .new_price {
font-size: 20px;
color: #fff;
}
.margin_60 {
padding-top: 30px;
padding-bottom: 30px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column-one {
-ms-flex: 0 0 50%;
flex: 0 0 90%;
max-width: 100%;
}
}
5. Again on the left bar, search for a folder called Sections then create a new file called “parallax-featured-product.liquid”
- Copy and paste the following code inside the “parallax-featured-product.liquid” file
<div class="featured lazy" style="background: url({% if section.settings.img_product %}{{ section.settings.img_product | img_url: 'master' }}{% else %}https://via.placeholder.com/1200x800{% endif %}) 50% 70%;">
<div class="opacity-mask d-flex align-items-center">
<div class="container margin_60">
<div class="row justify-content-center justify-content-md-start">
<div class="column-one">
<h3>{{ featured_product.title }}</h3>
<p>{{ featured_product.description | truncate: 100 }}</p>
<div class="feat_text_block">
<div class="price_box">
<span class="new_price">{{ featured_product.variants.first.price | money }}</span>
{%- if featured_product.variants.first.compare_at_price > featured_product.variants.first.price -%}
<span class="old_price">{{ featured_product.variants.first.compare_at_price | money }}</span>
{%- endif -%}
</div>
<a class="btn" href="{{ featured_product.url }}" role="button">{{ section.settings.txt_button }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /featured -->
{% schema %}
{
"name": "Featured Product Parallax",
"settings": [
{
"type": "header",
"content": "Parallax featured product"
},
{
"type": "image_picker",
"id": "img_product",
"label": "Section image"
},
{
"type": "text",
"id": "txt_button",
"label": "Button text",
"default": "View more"
},
{
"type": "product",
"id": "featured_product_handle",
"label": "Select product"
}
],
"presets": [
{
"name": "Featured Product Parallax",
"category": "Products"
}
]
}
{% endschema %}
That’s it now, your Section is ready to showcase your featured product.
How to Create A Stunning Parallax Scrolling Section Using Shopify
You don’t have to be a software developer to use this tutorial on how to create a stunning parallax scrolling section in your Shopify store. This tutorial is a DIY lesson that can be used by beginners and software experts to create A parallax section on Shopify.
Leave us a comment to let us know if this tutorial worked for you.
Visit our website Ecom Experts to find more Shopify coding tutorials.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
