Featured collection slider for Dawn Theme Shopify 2.0

Featured collection slider for Dawn Theme Shopify 2.0

This might not work with the updated Dawn Theme. If you just added Dawn theme, please check this code instead here

We created a variant slider in the product page recently. See link. We can easily use the logic for the collection slider but if we notice, we rather just use the featured collection available as a section. 

In this tutorial, we will create a collection slider using the featured collection. We just have to do some customization. 

 

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Section folder and create a section, we will name it "collection-slider"
  3. In the new section, paste the code below, then click SAVE

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
{{ 'collection-slider.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
assign total_products = section.settings.collection.products.size
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
endif
-%}
<div class="slider-container collection page-width page-width-desktop">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}" style="width: 100%">
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>

{% if section.settings.view_all == true %}
<a href="{{ section.settings.collection.url }}">
<button class="button button--primary">View All</button>
</a>
{% endif %}
</div>
<slider-component style="display: block;" >
<ul class="product-slider-box grid grid--2-col product- {% if total_products == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop
{% else %} grid--3-col-tablet{% endif %}{% if total_products > 4 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
{% if total_products > 2 %}
slider slider--tablet grid--peek{% endif %}
negative-margin--small"
role="list"
id="product-slider-box">
{%- for product in section.settings.collection.products limit: section.settings.product_to_show -%}
<li class="product-slider grid__item slider__slide" id="product-slider"
data-slide-index="{{forloop.index}}">
{% render 'product-card',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 4 -%}
<div class="slider-buttons no-js-hidden {% if total_products < 4 %} small-hide{% endif %}" style="display: flex;">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">
{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total"
data-total-products ="{{total_products}}">{{total_products}}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">
{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
{% schema %}
{
"name": "Collection Slider",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured Collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "product_to_show",
"default": 10,
"min": 1,
"max": 100,
"label": "number of products to show"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},

{
"type": "checkbox",
"id": "view_all",
"default": false,
"label": "Show View All button"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
}
],
"presets": [
{
"name": "Collection Slider"
}
]
}

{% endschema %}

      4.  Go to Asset folder, create a new file, name it "collection-slider"

      5. Open the newly created .css folder and paste the code below, then click SAVE

 .slider-container {
padding: 0 3rem;
width: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
align-items: center;
position: relative;
}


ul {
padding-inline-start: 0px !important;
}

slider-component {
position: relative;
display: block;
width:100%;
}

.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}

.product-slider-box {
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
width: 100%;
height: 100%;
display: flex;
}

.product-slider {
height: 100%;
width: calc(50% - .5rem / 2) !important;
display: inline-block;
}


.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
}


@media screen and (max-width: 989px) {
.grid__item {
padding-left: 1rem;
}
}
/* navigation slider */

.slider-buttons {
display: flex !important;
}

.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}

.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}

.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}

.no-js .slider::-webkit-scrollbar {
display: initial;
}

.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}

.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}

.slider-counter {
margin: 0 1.2rem;
}

.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}

.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
}

.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}


.slider-button .icon {
height: 0.6rem;
}

.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
}

.slider-button--next .icon {
margin-right: -0.2rem;
transform: rotate(-90deg) translateX(0.15rem);
}

.slider-button--prev .icon {
margin-left: -0.2rem;
transform: rotate(90deg) translateX(-0.15rem);
}

.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) translateX(0.15rem) scale(1.07);
}

.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) translateX(-0.15rem) scale(1.07);
}

 

   6. We need to go to the Asset folder again. Open the global.js file and find the slider-component. At the connstructor, lets add this code below

     this.productSlider = this.querySelector('.product-slider-box');

 

  7. At the initPages section, replace the this.totalPages with the code below

 if (this.productSlider) { this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 4} else {
this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1;
}

   8.  At the update() section, replace the this.currentPage with the code below

  if (this.productSlider) {this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 4} else {
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
}

 

Your code at global.js should look like below

 That's it. Let me know if you have questions (",)

 

Updated 10/19/21: For issues with the image has a different height with the ones, I simply delete this code below. 

 .grid--peek .grid__item:first-of-type {
padding-left: 0 !important;
}

Updated 11/12/21: Added a product-limit range. See code in blue.

Updated 11/24/21: Added a show all button. See the section settings to click the show all button. See code in green.

 

Copied!
Back to blog

8 comments

This is a really neat feature, but is there a way to activate the list counter at the bottom? The one that looks like < 1/50 >? Nothing happens when I click the < or > symbols, and there’s no way to adjust the 1/50 value. Thanks!

Erin Rado

Hi Dheeraj,

If you are using this code in particular, you shouldn’t have any problem on having multiple sliders since the code is embed to the theme.

Made4Uo

thank you for sharing the code. Appreciate you helping us.
I too implemented this code and it will works well for one collection-slider. But i have added 2 more collection-slider on to the home page and both have one common issue. Only 2 products are showing on screen. i tried removing and adding again or changing the collection but still only 2 products are show. Could you please advise what modification is required. thank you.

Dheeraj

The Counter below the slider starting from 4 can you do No. of slides starting from 1 instead of no. of products starting from 4.

Arun Mohan

Can you please change the count number? It starts from 4, but it should be 1, and it should count pages, not products. I mean I prefer that way. Can you make the change please ?

Ruhi

Leave a comment