Navigate back to the homepage

Advanced Slider for your Shopify store

Driss Oudmine
February 5th, 2021 · 1 min read

Product Sliders allows showing all suggested products friendly that match to customer’s expectation via a responsive slider. This product slider you’re going to see is full of advanced features such as sale and sold out badges also change product picture on hover effect and more! so if you like this tutorial please share it with your friends. so let’s get started

  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 Layout then Copy and paste the following code inside the file ‘theme.liquid’ on the line 33.
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/themes/splide-skyblue.min.css">

5. On the same file ‘theme.liquid’ Copy and paste the following code inside it on the line 75 then Save.

1<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/js/splide.min.js"></script>

6. Next, On the left bar, search for a folder called Sections then create a new file called ‘advanced-slider’

7. After you created the file, delete what’s inside it then paste the following code inside it

1<style>
2 .header-section {
3 display: flex;
4 align-items: center;
5 margin-bottom: 15px;
6 }
7
8 .header-section a {
9 text-decoration: underline !important;
10 margin-left: auto;
11 }
12
13 @media screen and (max-width: 640px) {
14 .header-section a {
15 margin-top: -16px;
16 }
17 }
18
19 .header-section h5 {
20 color: #111;
21 font-size: 0.9375em;
22 font-weight: 600;
23 line-height: 1;
24 text-transform: uppercase;
25 letter-spacing: 0.4em;
26 margin-bottom: 2em;
27 }
28
29 .product-carousel .product-carousel__wrapper {
30 margin: 0 -0.9375em !important;
31 margin-bottom: 3.125em !important;
32 }
33
34 .product-carousel__item {
35 padding: 0 0.9375em;
36 outline: 0;
37 }
38
39 .product-box {
40 position: relative;
41 }
42
43 .badge--sale {
44 top: 12px;
45 right: 12px;
46 }
47
48 .thumbnail {
49 position: relative;
50 text-align: center;
51 overflow: hidden;
52 margin-bottom: 1.5625em;
53 -moz-transition: all 0.7s ease;
54 -o-transition: all 0.7s ease;
55 -webkit-transition: all 0.7s ease;
56 -ms-transition: all 0.7s ease;
57 transition: all 0.7s ease;
58 }
59
60 .thumbnail__action {
61 position: absolute;
62 top: 26px;
63 left: 15px;
64 -webkit-transition: 0.2s ease-in-out;
65 -o-transition: 0.2s ease-in-out;
66 transition: 0.2s ease-in-out;
67 opacity: 0;
68 z-index: 9;
69 }
70
71 .thumbnail:hover .thumbnail__action {
72 opacity: 1;
73 }
74
75 @media screen and (max-width: 640px) {
76 .thumbnail__action {
77 opacity: 1;
78 }
79 }
80
81 .thumbnail__action--cart {
82 color: #444444;
83 display: inline-block;
84 text-align: center;
85 width: 40px;
86 height: 32px;
87 line-height: 32px;
88 margin: 0 2px;
89 background-color: #fff;
90 border: 1px solid rgba(151, 151, 151, 0.3);
91 }
92
93 .thumbnail__img {
94 display: block;
95 height: 100%;
96 width: 100%;
97 }
98
99 .thumbnail__img--overlay::after {
100 content: "";
101 position: absolute;
102 top: 0;
103 left: 0;
104 width: 100%;
105 height: 100%;
106 background-color: #fff;
107 opacity: .7;
108 z-index: 7;
109 }
110
111 .thumbnail__img img:nth-child(1) {
112 visibility: visible;
113
114 }
115
116 .thumbnail__img img:nth-child(2) {
117 position: absolute;
118 top: 0;
119 left: 0;
120 visibility: hidden;
121 }
122
123 .thumbnail__img:hover img {
124 -webkit-transition: opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
125 transition: opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
126 transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
127 transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 2s cubic-bezier(0, 0, 0.44, 1.18);
128 }
129
130 .thumbnail__img:hover img:nth-child(2) {
131 visibility: visible;
132
133 }
134
135 .product-details__header {
136 display: -webkit-box;
137 display: -ms-flexbox;
138 display: flex;
139 -webkit-box-align: center;
140 -ms-flex-align: center;
141 align-items: center;
142 -webkit-box-pack: justify;
143 -ms-flex-pack: justify;
144 justify-content: space-between;
145 margin-bottom: 5px;
146 }
147
148 .product-vendor {
149 color: #888;
150 font-size: 0.8125em;
151 font-weight: normal;
152 line-height: 1;
153 text-transform: capitalize;
154 }
155
156 .product-details__name {
157 color: #111;
158 font-size: 1em;
159 font-weight: 500;
160 text-decoration: none;
161 line-height: 1.625em;
162 -webkit-transition: 0.2s ease-in-out;
163 -o-transition: 0.2s ease-in-out;
164 transition: 0.2s ease-in-out;
165 cursor: pointer;
166 display: block;
167 margin-bottom: 3px;
168 overflow: hidden;
169 -o-text-overflow: ellipsis;
170 text-overflow: ellipsis;
171 display: -webkit-box;
172 -webkit-line-clamp: 1;
173 -webkit-box-orient: vertical;
174 }
175
176 .product-details__footer {
177 display: -webkit-box;
178 display: -ms-flexbox;
179 display: flex;
180 -webkit-box-align: center;
181 -ms-flex-align: center;
182 align-items: center;
183 }
184
185 .product-details__footer .price--main {
186 margin-right: 0.76923em;
187 }
188
189 .price--main {
190 color: #111;
191 font-size: 0.8125em;
192 font-weight: 600;
193 line-height: 1;
194 }
195
196 .price--discount {
197 color: #888;
198 font-size: 0.8125em;
199 font-weight: normal;
200 line-height: 1;
201 text-decoration: line-through;
202 }
203
204 .splide__arrow--prev,
205 .splide__arrow--next {
206 font-size: 12px !important;
207 }
208
209 .splide__arrow--prev {
210 left: -2.6em !important;
211 }
212
213 .splide__arrow--next {
214 right: -2.6em !important;
215 }
216
217 .splide__pagination,
218 .splide__arrow {
219 z-index: initial !important;
220 }
221
222 .splide__arrow svg {
223 fill: {{ settings.color_primary }};
224 }
225
226 .splide__arrow:hover svg {
227 fill: {{ settings.color_primary | color_modify: 'alpha', 0.6 }};
228 }
229
230 .splide__pagination__page.is-active {
231 background: {{ settings.color_primary }};
232 }
233
234 .splide__pagination__page:hover {
235 background: {{ settings.color_primary | color_modify: 'alpha', 0.6 }};
236 }
237
238 /**************************\
239 Demo Animation Style
240 \**************************/
241 @-webkit-keyframes mmfadeIn {
242 from {
243 opacity: 0;
244 }
245
246 to {
247 opacity: 1;
248 }
249 }
250
251 @keyframes mmfadeIn {
252 from {
253 opacity: 0;
254 }
255
256 to {
257 opacity: 1;
258 }
259 }
260
261 @-webkit-keyframes mmfadeOut {
262 from {
263 opacity: 1;
264 }
265
266 to {
267 opacity: 0;
268 }
269 }
270
271 @keyframes mmfadeOut {
272 from {
273 opacity: 1;
274 }
275
276 to {
277 opacity: 0;
278 }
279 }
280
281 @-webkit-keyframes mmslideIn {
282 from {
283 -webkit-transform: translateY(15%);
284 transform: translateY(15%);
285 }
286
287 to {
288 -webkit-transform: translateY(0);
289 transform: translateY(0);
290 }
291 }
292
293 @keyframes mmslideIn {
294 from {
295 -webkit-transform: translateY(15%);
296 transform: translateY(15%);
297 }
298
299 to {
300 -webkit-transform: translateY(0);
301 transform: translateY(0);
302 }
303 }
304
305 @-webkit-keyframes mmslideOut {
306 from {
307 -webkit-transform: translateY(0);
308 transform: translateY(0);
309 }
310
311 to {
312 -webkit-transform: translateY(-10%);
313 transform: translateY(-10%);
314 }
315 }
316
317 @keyframes mmslideOut {
318 from {
319 -webkit-transform: translateY(0);
320 transform: translateY(0);
321 }
322
323 to {
324 -webkit-transform: translateY(-10%);
325 transform: translateY(-10%);
326 }
327 }
328
329 /* RESETS */
330 .opacity-img {
331 opacity: .6;
332 }
333
334 .thumbnail__action--cart:hover .header-bar__cart-icon {
335 color: {{ settings.color_primary }};
336 }
337
338 .modal__overlay {
339 z-index: 10;
340 }
341
342 .badge--sold-out {
343 top: 35% !important;
344 }
345</style>
346
347<div class="product-carousel index-section">
348 <div class="container splide">
349
350 <div class="header-section">
351 {%- if section.settings.section_title != '' -%}
352 <h2 class="section-header__title">{{ section.settings.section_title }}</h2>
353 {%- endif -%}
354 <a href="/collections/all">View All</a>
355 </div>
356
357
358 <div class="splide__track">
359 <div class="product-carousel__wrapper splide__list">
360 {%- assign featured_product = collections[section.settings.featured_product_handle] -%}
361 {%- if featured_product != empty -%}
362
363 {%- for product in featured_product.products -%}
364
365 {%- assign on_sale = false -%}
366 {%- if product.compare_at_price > product.price -%}
367 {%- assign on_sale = true -%}
368 {%- endif -%}
369
370 {%- assign sold_out = true -%}
371 {%- if product.available -%}
372 {%- assign sold_out = false -%}
373 {%- endif -%}
374
375 <div class="product-carousel__item splide__slide">
376 <div class="product-box">
377 {% if on_sale and section.settings.show_sale_sticker %}
378 <div class="badge badge--sale">
379 <h5 class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">
380 {{ 'products.product.sale' | t }}</h5>
381 </div>
382 {% endif %}
383
384 {% if sold_out and section.settings.show_sold_out_sticker %}
385 <div class="badge badge--sold-out">
386 <h5 class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">
387 {{ 'products.product.sold_out' | t }}</h5>
388 </div>
389 {% endif %}
390
391 <div class="thumbnail">
392 {%- if product.available -%}
393 <div class="thumbnail__action">
394
395 <form action="/cart/add" method="post" enctype="multipart/form-data">
396 <select name="id" style="display:none;">
397 {% for variant in product.variants %}
398 <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
399 {% endfor %}
400 </select>
401 <button type="submit" class="thumbnail__action--cart" title="Add to Cart">
402 <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
403 </button>
404 </form>
405 </div>
406 {%- endif -%}
407
408 {%- if product.images.size > 1 -%}
409
410 <a class="thumbnail__img" href="{{ product.url | within: collection }}">
411 {%- if sold_out -%}<div class="thumbnail__img--overlay"></div>{%- endif -%}
412 <img style="max-width: 100% !important;"
413 src="{{ product.featured_image.src | img_url: "large" }}" data-src="{{ product.featured_image.src | img_url: "large" }}"
414 alt="{{ product.featured_image.alt | escape }}" />
415
416 {%- for image in product.images limit: 1 offset: 1 -%}
417 <img style="max-width: 100% !important;"
418 src="{{ image.src | img_url: 'grande' }}" data-src="{{ image.src | img_url: 'grande' }}"
419 alt="{{ product.featured_image.alt }}" />
420 {%- endfor -%}
421
422 </a>
423
424 {%- else -%}
425
426 <a class="thumbnail__img" href="{{ product.url | within: collection }}">
427 {%- if sold_out -%}<div class="thumbnail__img--overlay"></div>{%- endif -%}
428 <img style="max-width: 100% !important;"
429 src="{{ product.featured_image.src | img_url: "large" }}" data-src="{{ product.featured_image.src | img_url: "large" }}"
430 alt="{{ product.featured_image.alt | escape }}" />
431 </a>
432
433 {%- endif -%}
434 </div>
435
436 <div class="product-details">
437 <div class="product-details__header">
438 <div class="product-vendor">{{ product.vendor }}</div>
439 <div class="product-rate"><i class="fas fa-star"></i><i class="fas fa-star"></i><i
440 class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
441 </div>
442 </div>
443 <a class="product-details__name"
444 href="{{ product.url | within: collection }}">{{ product.title | truncate: 30 }}</a>
445 <div class="product-details__footer">
446 <h5 class="price--main">{{ product.variants.first.price | money }}</h5>
447
448 {%- if product.variants.first.compare_at_price > product.variants.first.price -%}
449 <h5 class="price--discount">{{ product.variants.first.compare_at_price | money }}</h5>
450 {%- endif -%}
451 </div>
452 </div>
453 </div>
454 </div>
455 {%- endfor -%}
456 {% else %}
457 The collection is empty!
458 {%- endif -%}
459
460 </div>
461 </div>
462 </div>
463</div>
464
465<script>
466 document.addEventListener('DOMContentLoaded', function () {
467 var elms = document.getElementsByClassName( 'splide' );
468 for ( var i = 0, len = elms.length; i < len; i++ ) {
469 new Splide( elms[ i ], {
470 perPage: 2,
471 perMove: 3,
472 rewind: true,
473 fixedWidth: 330,
474 arrows: {{ section.settings.show_arrows }},
475 pagination: {{ section.settings.show_pagination }},
476 breakpoints: {
477 '640': {
478 perPage: 2,
479 perMove: 1,
480 fixedWidth: 200,
481 arrows: false,
482 flickPower: 100,
483 pagination: false,
484 rewind: true,
485
486 },
487 '480': {
488 perPage: 2,
489 perMove: 1,
490 fixedWidth: 190,
491 arrows: false,
492 flickPower: 100,
493 pagination: true,
494 rewind: true,
495
496 }
497 }
498
499 } ).mount();
500 }
501 });
502</script>
503
504{% schema %}
505 {
506 "name": "Product Carousel",
507 "settings": [
508 {
509 "type": "header",
510 "content": "Section Heading"
511 },
512 {
513 "type": "text",
514 "id": "section_title",
515 "label": "Section Title",
516 "default": "Section Title Here"
517 },
518 {
519 "type": "header",
520 "content": "Products"
521 },
522 {
523 "type": "collection",
524 "id": "featured_product_handle",
525 "label": "Select Collection"
526 },
527 {
528 "type": "checkbox",
529 "id": "show_sale_sticker",
530 "label": "Show Sale Sticker",
531 "default": true
532 },
533 {
534 "type": "checkbox",
535 "id": "show_sold_out_sticker",
536 "label": "Show Sold out Sticker",
537 "default": true
538 },
539 {
540 "type": "checkbox",
541 "id": "show_arrows",
542 "label": "Show Slider Arrows",
543 "default": true
544 },
545 {
546 "type": "checkbox",
547 "id": "show_pagination",
548 "label": "Show Slider Pagination",
549 "default": true
550 }
551 ],
552 "presets": [
553 {
554 "name": "Products slider",
555 "category": "Slider Sections"
556 }
557 ]
558 }
559{% endschema %}

7. Congratulations, Now you have an advanced products Slider that cost money for free on your store!

More articles from doudmine

Modern Products carousel slider for Debut theme

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

November 20th, 2020 · 1 min read

How to add the Parallax section in your Shopify

In this article, you will learn how to add a section with a parallax effect to boost the visual experience of your home page.

October 21st, 2020 · 1 min read
© 2020–2021 doudmine
Link to $https://www.instagram.com/doudmine/Link to $https://www.youtube.com/channel/UCYF73P2A2NdVr6c9aONH22w