Navigate back to the homepage

How to add the Parallax section in your Shopify

Driss Oudmine
October 21st, 2020 · 1 min read

In this tutorial article we will be adding a parallax section with fixed scrolling using HTML and CSS and LIQUID. You will see that when you scroll the image inside the section will stay in place, so let me show you how to add it to your Shopify store.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Minimal theme, and then click Actions > Duplicate.
  3. Find the theme that called Copy of Minimal 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
1// Parallax Featured Product Style
2.featured {
3 position: relative !important;
4 background-size: cover !important;
5 background-position: center !important;
6 background-repeat: no-repeat !important;
7 background-attachment: fixed !important;
8 height: 400px;
9 color: #fff;
10 font-size: 18px;
11 font-size: 1.125rem;
12 overflow: hidden;
13}
14
15.featured h3 {
16 color: #fff;
17 font-weight: 900;
18 text-transform: uppercase;
19 line-height: 1;
20 font-size: 36px;
21 font-size: 2.25rem;
22}
23.featured .price_box {
24 display: inline-block;
25 margin-right: 15px;
26 float: left;
27}
28.featured .price_box .new_price {
29 font-size: 2rem;
30 color: #fff;
31}
32.featured .price_box .old_price {
33 color: #999;
34 text-decoration: line-through;
35 display: inline-block;
36 white-space: nowrap;
37 font-weight: 500;
38 font-size: 16px;
39 font-size: 1rem;
40 margin-left: 5px;
41 font-size: 1.125rem;
42}
43.opacity-mask {
44 width: 100%;
45 height: 100%;
46 position: absolute;
47 left: 0;
48 top: 0;
49 z-index: 2;
50 background-color: rgba(0, 0, 0, 0.5);
51}
52.align-items-center {
53 -ms-flex-align: center!important;
54 align-items: center!important;
55}
56.d-flex {
57 display: -ms-flexbox!important;
58 display: flex!important;
59}
60.margin_60 {
61 padding-top: 60px;
62 padding-bottom: 60px;
63}
64.container {
65 width: 100%;
66 padding-right: 15px;
67 padding-left: 40px;
68 margin-right: auto;
69 margin-left: auto;
70}
71.row {
72 display: -ms-flexbox;
73 display: flex;
74 -ms-flex-wrap: wrap;
75 flex-wrap: wrap;
76}
77.column-one {
78 -ms-flex: 0 0 50%;
79 flex: 0 0 50%;
80 max-width: 50%;
81}
82
83@media (max-width: 767px) {
84 .featured {
85 font-size: 16px;
86 }
87 .featured h3 {
88 color: #fff;
89 font-weight: 900;
90 text-transform: uppercase;
91 line-height: 1;
92 font-size: 28px;
93 }
94 .featured .price_box .new_price {
95 font-size: 20px;
96 color: #fff;
97 }
98 .margin_60 {
99 padding-top: 30px;
100 padding-bottom: 30px;
101 }
102 .container {
103 width: 100%;
104 padding-right: 15px;
105 padding-left: 15px;
106 margin-right: auto;
107 margin-left: auto;
108 }
109 .row {
110 display: -ms-flexbox;
111 display: flex;
112 -ms-flex-wrap: wrap;
113 flex-wrap: wrap;
114 }
115 .column-one {
116 -ms-flex: 0 0 50%;
117 flex: 0 0 90%;
118 max-width: 100%;
119 }
120}

5. Again on the left bar, search for a folder called Sections then create a new file called “parallax-featured-product.liquid”

6. Copy and paste the following code inside the “parallax-featured-product.liquid” file

1{% comment %}
2 custom
3 code by
4 https://www.doudmine.com/
5{% endcomment %}
6{%- assign featured_product = all_products[section.settings.featured_product_handle] -%}
7<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%;">
8 <div class="opacity-mask d-flex align-items-center">
9 <div class="container margin_60">
10 <div class="row justify-content-center justify-content-md-start">
11 <div class="column-one">
12 <h3>{{ featured_product.title }}</h3>
13 <p>{{ featured_product.description | truncate: 100 }}</p>
14 <div class="feat_text_block">
15 <div class="price_box">
16 <span class="new_price">{{ featured_product.variants.first.price | money }}</span>
17 {%- if featured_product.variants.first.compare_at_price > featured_product.variants.first.price -%}
18 <span class="old_price">{{ featured_product.variants.first.compare_at_price | money }}</span>
19 {%- endif -%}
20 </div>
21 <a class="btn" href="{{ featured_product.url }}" role="button">{{ section.settings.txt_button }}</a>
22 </div>
23 </div>
24 </div>
25 </div>
26 </div>
27</div>
28<!-- /featured -->
29
30{% schema %}
31{
32 "name": "Featured Product Parallax",
33 "settings": [
34 {
35 "type": "header",
36 "content": "Parallax featured product"
37 },
38 {
39 "type": "image_picker",
40 "id": "img_product",
41 "label": "Section image"
42 },
43 {
44 "type": "text",
45 "id": "txt_button",
46 "label": "Button text",
47 "default": "View more"
48 },
49 {
50 "type": "product",
51 "id": "featured_product_handle",
52 "label": "Select product"
53 }
54 ],
55 "presets": [
56 {
57 "name": "Featured Product Parallax",
58 "category": "Products"
59 }
60 ]
61}
62{% endschema %}

That’s it now, your Section is ready to showcase your featured product. I hope this article is helpful for you!

Hey, if you have any issues implementing the Parallax section into your Shopify Store. DM me on Instagram so I can help

More articles from doudmine

Customize product badges and add NEW badge & HOT badge

The first impression on the website is vital. So an image badge costs a million words and advertisements.

October 17th, 2020 · 1 min read

Products carousel slider for Shopify

I´m going to show you step by step how to implement Product slider within the Minimal theme.

September 19th, 2020 · 1 min read
© 2020–2021 doudmine
Link to $https://www.instagram.com/doudmine/Link to $https://www.youtube.com/channel/UCYF73P2A2NdVr6c9aONH22w