Featured collection slider for Dawn Theme Shopify 2.0

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 %}">

    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>  

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

        <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": "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": "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 folder, 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;
}

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

@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 (",)

Deixe um comentário