Adding a Parallax Section to Your Shopify Store

Driss
October 21, 2020

A parallax section creates an engaging visual effect where the background image appears to move at a different speed than the foreground content as users scroll. This tutorial will guide you through implementing a parallax section with fixed scrolling using HTML, CSS, and Liquid in your Shopify store.

Benefits of a Parallax Section

Creates a visually engaging user experience
Draws attention to featured products or content
Adds depth and visual interest to your homepage
Enhances the overall aesthetic of your store

Prerequisites

Shopify admin access
Ability to edit theme files
A product to feature in the parallax section

Step-by-Step Implementation

1. Create a Theme Backup

From your Shopify admin, go to Online Store > Themes, and duplicate your active theme for safe editing.

2. Update Theme Styles

In your duplicated theme, navigate to the Assets folder
Open the theme.scss.liquid file
Add the following CSS code to the file:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120


// 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%;
  }
}

3. Create the Parallax Section

Navigate to the Sections folder in your theme editor
Create a new file called parallax-featured-product.liquid
Copy and paste the following code into the file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


 {% comment %}
   custom
   code by
   https://www.doudmine.com/
{% endcomment %}
{%- 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 %}

4. Add the Section to Your Homepage

Go to your Shopify admin
Navigate to Online Store > Pages > Home page
Click Customize to open the theme editor
Find the “Featured Product Parallax” section in the section picker
Add the section to your homepage where you want it to appear

5. Configure the Section Settings

In the theme editor, select the parallax section
Choose your desired background image using the image picker
Select the product you want to feature
Customize the button text as needed

Result

Your parallax section will now display on your homepage with a visually engaging scrolling effect. As users scroll, the background image will remain fixed while the foreground content moves, creating an attractive depth effect that highlights your featured product.

Additional Notes

The parallax effect may not work on all mobile devices due to browser limitations
Choose high-quality images for the best visual results
Test the section on different devices to ensure proper responsiveness

For additional support, feel free to reach out via the contact form.