How to Add Collection Slider In Shopify

How to Add Collection Slider In Shopify

In this post we talk about How to Add Collection Slider In Shopify

Step 1: Crate a section collection slider and paste below code

  
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
    <h2>{{ section.settings.title | escape }}</h2>
    </div>
    {% endif %}
    {%- assign collection = collections[section.settings.collection] -%}
    {% case section.settings.grid %}
    {% when 2 %}
    {%- assign max_height = 530 -%}
    {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
    {%- assign max_height = 345 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
    {%- assign max_height = 250 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
    {%- assign max_height = 195 -%}
    {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
    {% endcase %}
    {%- assign product_limit = 12 -%}
    <ul data-slides="{{section.settings.grid}}"class="grid grid--uniform grid--view-items collection-slider">
    {% for product in collection.products limit: product_limit %}
    <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
    {% include 'product-card-grid', max_height: max_height %}
    </li>
    {% else %}
    {% for i in (1..product_limit) %}
    <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
    <div class="grid-view-item product-card">
    <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
    <span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
    </a>
    <div class="grid-view-item__image-wrapper">
    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
    {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
    <div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
    {% include 'product-price' %}
    </div>
    </li>
    {% endfor %}
    {% endfor %}
    </ul>
    {% if section.settings.show_view_all %}
    <hr class="hr--invisible" aria-hidden="true" />
    <div class="text-center">
    <a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
    {{ 'collections.general.view_all' | t }}
    </a>
    </div>
    {% endif %}
    </div>
    {% schema %}
    {
    "name": {
    "de": "Featured Kategorie",
    "en": "Collection Slider",
    "es": "Colección destacada",
    "fr": "Collection vedette",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "pt-BR": "Coleção em destaque"
    },
    "class": "index-section",
    "settings": [
    {
    "type": "text",
    "id": "title",
    "label": {
    "de": "Titel",
    "en": "Heading",
    "es": "Título",
    "fr": "En-tête",
    "it": "Heading",
    "ja": "見出し",
    "pt-BR": "Título"
    },
    "default": {
    "de": "Featured Kategorie",
    "en": "Featured collection",
    "es": "Colección destacada",
    "fr": "Collection vedette",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "pt-BR": "Coleção em destaque"
    }
    },
    {
    "id": "collection",
    "type": "collection",
    "label": {
    "de": "Kategorie",
    "en": "Collection",
    "es": "Colección",
    "fr": "Collection",
    "it": "Collezione",
    "ja": "コレクション",
    "pt-BR": "Coleção"
    }
    },
    {
    "type": "range",
    "id": "grid",
    "label": {
    "de": "Produkte per Reihe",
    "en": "Products per row",
    "es": "Productos por fila",
    "fr": "Produits par rangée",
    "it": "Prodotti per riga",
    "ja": "行あたりの商品数",
    "pt-BR": "Produtos por linha"
    },
    "min": 2,
    "max": 5,
    "step": 1,
    "default": 3
    },
    {
    "type": "checkbox",
    "id": "show_vendor",
    "label": {
    "de": "Produkt-Lieferanten anzeigen",
    "en": "Show product vendors",
    "es": "Mostrar proveedores del producto",
    "fr": "Afficher les vendeurs",
    "it": "Mostra fornitori prodotto",
    "ja": "商品の販売元を表示する",
    "pt-BR": "Exibir fornecedores do produto"
    },
    "default": false
    },
    {
    "type": "checkbox",
    "id": "show_view_all",
    "label": {
    "de": "'Alle anzeigen' Button anzeigen",
    "en": "Show 'View all' button",
    "es": "Mostrar el botón 'Ver todo'",
    "fr": "Afficher le bouton “Tout voir”",
    "it": "Mostra il pulsante \"Visualizza tutto\"",
    "ja": "「すべて表示」ボタンを表示する",
    "pt-BR": "Exibir botão 'Visualizar tudo'"
    },
    "default": false
    }
    ],
    "presets": [
    {
    "name": {
    "de": "Featured Kategorie",
    "en": "Featured Collection Slider",
    "es": "Colección destacada",
    "fr": "Collection vedette",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "pt-BR": "Coleção em destaque"
    },
    "category": {
    "de": "Kategorie",
    "en": "Collection",
    "es": "Colección",
    "fr": "Collection",
    "it": "Collezione",
    "ja": "コレクション",
    "pt-BR": "Coleção"
    }
    }
    ]
    }
    {% endschema %}
  

Step 2: Paste below css in css file.

  
    .slick-dots {/* position: absolute; bottom: -3.5rem; */ display: block; padding: 0; margin: 0; list-style: none; line-height: 0;}
    .slick-dots li {position: relative; display: inline-block; width: 0.9375rem; height: 0.9375rem; margin: 0 0.875rem; padding: 0; cursor: pointer;}
    .slick-dots li:first-child {margin-left: 0;}
    .slick-dots li:last-child {margin-right: 0;}
    .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 0.9375rem; height: 0.9375rem; padding: 0.3125rem; cursor: pointer; color: transparent; outline: none; border:none; background: rgba(47, 31, 22, 0.5); border-radius: 50%;}
    .slick-dots li button:hover,
    .slick-dots li button:focus,
    .slick-dots li.slick-active button {outline: none; background-color: #2d1d15; transition: all 300ms ease 0s; color: #2d1d15;}
    .collection-slider .slick-track {
    display: flex;
    }
    .collection-slider .product-card {
    width: 100%;
    }
    .collection-slider .slick-prev {
    left: 0;
    z-index: 999;
    }
    .collection-slider .slick-next {
    right: 0;
    z-index: 999;
    }
    .collection-slider {
    padding: 25px;
    overflow: hidden;
    }
  

Step 3: Paste below script in Js file

  
    <script type="text/javascript">
        $(document).ready(function() {
        $('.collection-slider').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1
        });
        })
        </script>
  

If any query please contact me

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top