How To Create A Stunning Parallax Scrolling Section In Your Shopify St – EcomExperts

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”

  1. Copy and paste the following code inside the “parallax-featured-product.liquid” file
     {%- assign featured_product = all_products[section.settings.featured_product_handle] -%} 
 <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. 

Leave a comment

About Andrew Durot

He is the co-founder of Ecom Experts, a Shopify focused development agency. 

Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.

Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.

Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!

Check Your Speed

Guides

Leave a comment