Add Collection List Slider - Shopify Themes

collection list slider shopify

Compatibility: Compatible with all Shopify 2.0 FREE themes. Updated to latest version 12.0

Show case all your collections using a slider. This is a slider for the collections and NOT products.  For product slider, please refer here

Check DEMO store here 💻. Password: made4uo

What are Add Collection List Slider?

A collection list slider is a user interface element that presents your product collections in a swipeable format. It improves navigation and product discovery for customers by allowing them to browse through multiple collections efficiently, especially on devices with limited screen space.

Why Use are Add Collection List Slider?

There are several reasons to incorporate a collection list slider into your Shopify store:

  • Enhanced Navigation: Sliders allow customers to browse through multiple collections efficiently, especially on devices with limited screen space.
  • Increased Visibility: By featuring collections prominently, you can drive traffic to specific categories or new product lines.
  • Improved Customer Engagement: The interactive nature of sliders can keep visitors engaged and encourage them to explore more of your store's offerings.

Additional Considerations:

  • Ensure the slider functions and displays seamlessly across all devices, especially on smartphones and tablets where screen space is limited. You might consider using a slider that adapts the number of collections displayed based on the device viewport.
  • For optimal presentation within the slider, consider the size and format of your collection images and titles. You might want to experiment with different image sizes and concise titles to ensure they are well-displayed on various screen sizes.
  • Provide clear and intuitive navigation controls (arrows, dots) for users to browse through the collections within the slider.
  • Large image files can slow down loading times. Use optimized image sizes and consider lazy loading techniques to ensure the slider loads quickly and doesn't impact your store's performance.

    •  

    What you are buying:

    • A slider for collections list
    • Options to change the card background and active border
    • Option to set how many items for desktop, tablet, and mobile
    • Included option to set the maximum width of the section
    • Added an option to hide the collection title
    • Option to show counter as dots, slider, and number
    • Added an option to show button on side

    What makes our code better:

    • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
    • We do not leave or add codes use to advertise for our website
    • Our code is mobile friendly

    Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

    []

    Steps on how to add Collection List Slider

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

    Step #2. Create a new section file

    In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

    {{ 'collection-list-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>
<div
  class="collectionListSlider{% if section.settings.hide_title %} collection-title--hidden{% endif %}"
  style="
    padding-top: {{ section.settings.padding_top | append: "px" }};
    padding-bottom: {{section.settings.padding_bottom | append: "px" }};
    max-width: {{ section.settings.section_width | append: "px" }}
  "
>
  <div class="collectionListTitleWrapper{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
    {% if section.settings.title != blank %}
      <h2 class="collectionListTitle {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
    {% endif %}
    {% if section.settings.show_view_all %}
      <a href="/collections" class="button btn">View All</a>
    {% endif %}
  </div>
  <universal-slider-component style="--border-color: {{section.settings.border_color}};">
    <div class="sliderCounterBox">
      <button
        type="button"
        class="sliderCounterButton sliderCounterBtn--prev slider-button {% if section.settings.slider_button_fixed != true %}slider_button_fixed{% endif %}"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        style="display: flex"
        aria-controls="Slider-{{ section.id }}"
      >
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
        </svg>
      </button>
      <ul class="product-grid slider slider--tablet slider--everywhere " role="list">
        {%- for block in section.blocks -%}
          {% assign block_length = forloop.length %}
          <li
            class="collection-list__item grid__item grid--col{% if section.settings.swipe_on_mobile %} slider__slide{% endif %} {% if forloop.first %}image--active{% endif %}"
            {{ block.shopify_attributes }}
            style="--desktop-items: {{ section.settings.desktop_items }};--tablet-items: {{ section.settings.tablet_items }}; --mobile-items: {{ section.settings.mobile_items }}"
          >
            {% assign card_collection = block.settings.collection %}
            {% assign media_aspect_ratio = section.settings.image_ratio %}
            {% assign columns = columns %}
            {%- liquid
              assign ratio = 1
              if card_collection.featured_image and media_aspect_ratio == 'portrait'
                assign ratio = 0.8
              elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
                assign ratio = card_collection.featured_image.aspect_ratio
              endif
              if ratio == 0 or ratio == null
                assign ratio = 1
              endif
            -%}
            <div class="card-wrapper">
              <div
                class="card card--{{ settings.card_style }}{% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}{% if extend_height %} card--extend-height{% endif %}{% if card_collection.featured_image == nil and settings.card_style == 'card' %} ratio{% endif %}"
                style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
              >
                <a
                  href="{{ card_collection.url }}"
                  class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if card_collection.featured_image or settings.card_style == 'standard' %} ratio{% endif %}"
                  style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
                >
                  {%- if card_collection.featured_image -%}
                    <div class="card__media">
                      <div class="media media--transparent media--hover-effect">
                        <img
                          srcset="
                            {%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
                            {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
                            {{ card_collection.featured_image | img_url: 'master' }} {{ card_collection.featured_image.width }}w
                          "
                          src="{{ card_collection.featured_image | img_url: '1500x' }}"
                          sizes="
                            (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
                            (min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
                            calc(100vw - 3rem)
                          "
                          alt="{{ card_collection.title | escape }}"
                          height="{{ card_collection.featured_image.height }}"
                          width="{{ card_collection.featured_image.width }}"
                          loading="lazy"
                          class="motion-reduce"
                        >
                      </div>
                    </div>
                  {%- endif -%}
                </a>
 
                {% if settings.card_style == 'card' or card_collection.featured_image %}
                  <div class="card__content">
                    <div class="card__information">
                      <h4 class="card__heading">
                        <a href="{{ card_collection.url }}" class="full-unstyled-link">
                          {%- if card_collection.title != blank -%}
                            {{- card_collection.title | escape -}}
                          {%- else -%}
                            {{ 'onboarding.collection_title' | t }}
                          {%- endif -%}
                        </a>
                      </h4>
                      {%- if card_collection.featured_image == null and card_collection.description != blank -%}
                        <p class="card__caption">
                          {{- card_collection.description | strip_html | truncatewords: 12 -}}
                        </p>
                      {%- endif -%}
                    </div>
                  </div>
                {% endif %}
              </div>
            </div>
            <style>
              .collectionListSlider .card-wrapper {
              background: {{ section.settings.background}};
              }
            </style>
          </li>
        {%- endfor -%}
      </ul>
 
      <button
        type="button"
        class="sliderCounterButton sliderCounterBtn--next slider-button {% if section.settings.slider_button_fixed != true %}slider_button_fixed{% endif %}"
        name="next"
        style="display: flex"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
        </svg>
      </button>
    </div>
 
    {%- if block_length > 3 -%}
      <div class="sliderContainer{% unless section.settings.slider_visual == "slider" %} hidden{% endunless %}">
        <input type="range" min="0" max="{{block_length | minus: 1 }}" value="0" class="sliderCounter" id="myRange">
      </div>
      <style>
        .collectionListSlider .sliderCounter::-webkit-slider-thumb {
        width: calc(100% / {{block_length }});
        }
 
        .collectionListSlider .sliderCounter::-moz-range-thumb {
        width: calc(100% / {{block_length}});
        }
      </style>
 
 
      <div
        class="slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' or section.settings.slider_visual == 'hide' %}hidden {% endif %}"
        style="display: flex; border: none"
      >
        <button
          type="button"
          class="slider-button slider-button--prev"
          data-step="1"
          name="previous"
          aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
          aria-controls="Slider-{{ section.id }}"
        >
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
          </svg>
        </button>
        <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'numbers' %} caption{% endif %}">
          <div class="counter--mobile">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="slider-counter--total">
              {{ block_length }}
            </span>
          </div>
          <div class="slideshow__control-wrapper slider">
            {%- for block in section.blocks -%}
              <button
                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link sliderCounterLink {% if forloop.first %}slider-counter__link--active{% endif %}"
                data-dot="{{forloop.index0}}"
                style="width: 100%"
                aria-label="
                  {{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }}
                  {{ forloop.length}}
                "
                aria-controls="Slider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        </div>
        <button
          type="button"
          class="slider-button slider-button--next"
          name="next"
          data-step="1"
          aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
          aria-controls="Slider-{{ section.id }}"
        >
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
          </svg>
        </button>
      </div>
      <noscript>
        <div class="slider-buttons" style="display: flex">
          <div class="slider-counter">
            {%- for block in section.blocks -%}
              <a
                href="#Slide-{{ section.id }}-{{ forloop.index }}"
                data-dot="{{forloop.index}}"
                class="slider-counter__link link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length}}"
              >
                {{ forloop.index }}
              </a>
            {%- endfor -%}
          </div>
        </div>
      </noscript>
    {%- endif -%}
  </universal-slider-component>
</div>
 
{% schema %}
{
  "name": "Collection List Slider",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "range",
      "id": "section_width",
      "min": 900,
      "max": 2100,
      "step": 100,
      "default": 1200,
      "unit": "px",
      "label": "Section maximum width"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Collections",
      "label": "Title"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size",
      "info": "Only applicable to Shopify 2.0 Free themes latest versions"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "View all button"
    },
    {
      "type": "checkbox",
      "id": "hide_title",
      "default": false,
      "label": "Hide collection titles"
    },
    {
      "type": "header",
      "content": "Responsive settings"
    },
    {
      "type": "range",
      "id": "desktop_items",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "unit": "#",
      "label": "Number of collections in desktop"
    },
    {
      "type": "range",
      "id": "tablet_items",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 3,
      "unit": "#",
      "label": "Number of collections in tablet"
    },
    {
      "type": "range",
      "id": "mobile_items",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 2,
      "unit": "#",
      "label": "Number of collections in mobile"
    },
    {
      "type": "header",
      "content": "Additional Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 99,
      "step": 1,
      "unit": "%",
      "default": 0,
      "label": "Section padding top"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 99,
      "step": 1,
      "unit": "%",
      "default": 0,
      "label": "Section padding bottom"
    },
    {
      "type": "header",
      "content": "Collection card"
    },
    {
      "type": "color",
      "id": "background",
      "label": "Card background",
      "default": "#eee"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#eee"
    },
    {
      "type": "select",
      "id": "slider_visual",
      "options": [
        {
          "value": "dots",
          "label": "dots"
        },
        {
          "value": "numbers",
          "label": "numbers"
        },
        {
          "value": "slider",
          "label": "slider"
        },
        {
          "value": "hide",
          "label": "hide"
        }
      ],
      "default": "numbers",
      "label": "Counter",
      "info": "Only applies on mobile"
    },
    {
      "type": "checkbox",
      "id": "slider_button_fixed",
      "default": true,
      "label": "Show slider button on the side"
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "featured collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection List Slider"
    }
  ]
}
{% endschema %}

    Step #3. Create a new asset

    Open the Asset folder, and "create a new asset." Create a new CSS file and name it "collection-list-slider", then place the code below.

    .collectionListSlider .card .media,
.collectionListSlider .slidecontainer,
universal-slider-component .card__media {
  width: 100%;
}
.collectionListSlider .slideshow__control-wrapper.slider {
  display: flex;
  align-items: center;
}
.collection-title--hidden .card__content {
  opacity: 0;
  height: 0;
}
.collectionListTitleWrapper {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.collectionListSlider:hover .sliderCounterBtn--prev,
.sliderCounterBtn--prev {
  left: 0;
}
.collectionListSlider:hover .sliderCounterBtn--next,
.sliderCounterBtn--next {
  right: 0;
}
.card--card .card__heading a::after,
.card--standard.card--text a::after,
.card__heading a::after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.card,
.card-information,
.collectionListSlider .card__heading {
  text-align: center;
}
.collectionListSlider {
  overflow: hidden;
  margin: 0 auto;
}
.collectionListSlider ul.product-grid.slider.slider--tablet {
  display: flex;
}
.collectionListSlider universal-slider-component {
  position: relative;
  display: block;
}
.collectionListSlider .card__information {
  padding-bottom: 10px;
  padding-top: 10px;
}
.collectionListSlider .collectionListTitle {
  margin: auto 0;
}
.collectionListSlider .featured-grid {
  display: flex;
  padding: 0;
}
.collectionListSlider .featured-grid li,
.collectionListSlider li {
  list-style: none;
}
.collectionListSlider .slider--tablet {
  display: flex;
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1rem;
  width: 100%;
  padding-left: 0;
}
.collectionListSlider .collection-list__item {
  width: calc(100% / var(--desktop-items));
  padding: calc(0.5vw + 5px);
}
.collectionListSlider .slider__slide {
  padding: 0 1rem;
}
.collectionListSlider .slider {
  scrollbar-color: rgb(var(--color-foreground))
    rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.collectionListSlider .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;
}
.collectionListSlider .slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}
.collectionListSlider .slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}
.collectionListSlider .slider-counter {
  margin: 0 1.2rem;
  display: flex;
  min-width: 2rem;
  justify-content: center;
}
.collectionListSlider .slider-counter--dots,
.collectionListSlider .slider-counter--numbers {
  margin: 0;
}
.collectionListSlider
  .slider-counter__link--active.slider-counter__link--dots
  .dot {
  background-color: rgba(0, 0, 0);
}
.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}
.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover,
.sliderCounterButton:hover {
  transform: scale(1.1);
}
.collectionListSlider .slider-counter__link--numbers {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
}
.collectionListSlider .slider-counter__link--numbers:hover,
.slider-button:not([disabled]):hover {
  color: #000;
}
.collectionListSlider
  .slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: #000;
}
.collectionListSlider .slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.collectionListSlider .slider-button {
  color: rgba(0, 0, 0, 0.75);
  background: 0 0;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-button .icon {
  height: 0.6rem;
}
.slider-button[disabled] .icon {
  color: rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}
.slider-button--next .icon {
  transform: rotate(-90deg);
}
.slider-button--prev .icon,
.sliderCounterBtn--prev > svg {
  transform: rotate(90deg);
}
.slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg) scale(1.1);
}
.slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg) scale(1.1);
}
.spaced-section--full-width:last-child
  featured-slideshow-component:not(.page-width)
  .slideshow__controls {
  border-bottom: none;
}
.collectionListSlider .slideshow__control-wrapper {
  overflow-x: auto;
}
.image--active {
  border: 5px solid var(--border-color);
}
.collectionListSlider .card--card.card--media .card__inner .card__information,
.collectionListSlider .card--card.card--media > .card__content .card__badge,
.collectionListSlider .card--card.card--text .card__inner,
.collectionListSlider
  .card--standard.card--text.article-card
  > .card__content
  .card__information,
.collectionListSlider
  .card--standard.card--text
  > .card__content
  .card__heading,
.collectionListSlider .card--standard > .card__content .card__badge,
.collectionListSlider .card--standard > .card__content .card__caption,
.collectionListSlider .counter--mobile {
  display: none;
}
.collectionListSlider .smallDot {
  width: 0.4rem !important;
  height: 0.4rem !important;
}
.collectionListSlider .mediumDot {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
.collectionListSlider .sliderCounter {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  padding: 0;
  border-radius: 10px;
  background: #d3d3d3;
  outline: 0;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.sliderCounter:hover {
  opacity: 1;
}
.sliderCounter::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background: #000;
  cursor: pointer;
}
.sliderCounter::-moz-range-thumb {
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background: #000;
  cursor: pointer;
}
.card--extend-height,
.card__inner:not(.ratio) > .card__content,
.collectionListSlider .card--card {
  height: 100%;
}
.sliderCounterBox {
  display: flex;
  align-items: center;
}
.sliderCounterButton {
  display: none;
  position: absolute;
  background: #000 !important;
  color: #fff !important;
  transition: 0.2s;
  z-index: 5;
}
.slider_button_fixed.sliderCounterBtn--prev {
  left: -100%;
}
.slider_button_fixed.sliderCounterBtn--next {
  right: -100%;
}
.sliderCounterBtn--next > svg {
  transform: rotate(-90deg);
}
.sliderCounterButton > svg {
  height: 2rem !important;
}
.card {
  text-decoration: none;
}
. collectionListSlider .card--card,
.collectionListSlider .card--standard .card__inner {
  position: relative;
  box-sizing: border-box;
}
.collectionListSlider .card--card:after,
.collectionListSlider .card--standard .card__inner:after {
  content: "";
  position: absolute;
  z-index: -1;
}
.collectionListSlider .card__inner .card__media {
  overflow: hidden;
  z-index: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.card--standard.card--text {
  background-color: transparent;
}
.collectionListSlider .card .media,
.collectionListSlider .card__media {
  bottom: 0;
  position: absolute;
  top: 0;
}
.card__media {
  margin: 0;
  width: calc(100% - 2 * 0rem);
}
.collectionListSlider .card__inner {
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}
.collectionListSlider .card__inner .card__content {
  padding: 1rem;
  position: relative;
}
.card__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 10px;
  width: 100%;
}
.card__content--auto-margins {
  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
}
.card__information {
  grid-row-start: 2;
}
.card__badge {
  align-self: flex-end;
  grid-row-start: 3;
  justify-self: flex-start;
}
.card__badge.top {
  align-self: flex-start;
  grid-row-start: 1;
}
.card__badge.right {
  justify-self: flex-end;
}
.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}
.card--card.card--media > .card__content,
.card__heading {
  margin-top: 0;
}
.card__heading:last-child {
  margin-bottom: 0;
}
.card__heading a::after {
  content: "";
  position: absolute;
  z-index: 1;
}
.card__heading a:after {
  outline-offset: 0.3rem;
}
.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(0, 0, 0, 0.3);
  outline: rgba(0, 0, 0, 0.5) solid 0.2rem;
}
.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(0, 0, 0, 0.3);
  outline: rgba(0, 0, 0, 0.5) solid 0.2rem;
}
.card__heading a:focus,
.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}
.card__information:hover a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card__information:hover {
  transform: scale(1.05);
}
.card--standard > .card__content {
  padding: 0;
}
.card--extend-height.card--media,
.card--extend-height.card--standard.card--text {
  display: flex;
  flex-direction: column;
}
.card--extend-height.card--media .card__inner,
.card--extend-height.card--standard.card--text .card__inner {
  flex-grow: 1;
}
.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform 0.2s;
  overflow: hidden;
}
.card-information > * + * {
  margin-top: 0.5rem;
}
.card-information {
  width: 100%;
}
.card-information > * {
  color: #000;
}
.card-information > .price {
  color: rgba(0, 0, 0);
}
.card-information > .rating {
  margin-top: 0.4rem;
}
.card-information > :not(.visually-hidden:first-child) + :not(.rating) {
  margin-top: 0.7rem;
}
.card-information .caption {
  letter-spacing: 0.07rem;
}
.card-article-info {
  margin-top: 1rem;
}
.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}
.ratio::before {
  content: "";
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}
.hidden {
  display: none !important;
}
.collectionListSlider .card__content {
  margin: auto;
}
@media screen and (min-width: 750px) {
  .collectionListSlider {
    padding: 0 5rem;
  }
}
@media screen and (max-width: 750px) {
  .collectionListSlider .collection-list__item {
    width: calc(100% / var(--tablet-items));
  }
}
@media screen and (max-width: 481px) {
  .collectionListSlider .collection-list__item {
    width: calc(100% / var(--mobile-items));
  }
}

    Step #4. Still at the Asset folder,

     Open the global.js or theme.js and add the code below. 

    class UniversalSliderComponent extends HTMLElement {
   constructor() {
      super();
      this.sliderControlWrapper = this.querySelector('.slider-buttons');
 
      this.slider = this.querySelector('ul');
      this.sliderItems = this.querySelectorAll('li');
      this.sliderCounter = this.querySelector('.sliderCounter');
      this.currentPageElement = this.querySelector('.slider-counter--current');
      this.pageTotalElement = this.querySelector('.slider-counter--total');
      this.prevButton = this.querySelector('.slider-button--prev');
      this.nextButton = this.querySelector('.slider-button--next');
 
      this.sliderButtonPrev = this.querySelector('.sliderCounterBtn--prev');
      this.sliderButtonNext = this.querySelector('.sliderCounterBtn--next');
 
      this.step = 0;
 
      this.sliderControlLinksArray = Array.from(this.querySelectorAll('.sliderCounterLink'));
      this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
      this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
      this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
 
      if (this.sliderCounter) {
         this.sliderButtonPrev.addEventListener('click', this.onButtonClick.bind(this));
         this.sliderButtonNext.addEventListener('click', this.onButtonClick.bind(this));
         this.sliderCounter.addEventListener('change', this.sliderCounterUpdate.bind(this));
      }
   }
 
   update(slide) {
      this.sliderItems.forEach(image => {
         image.classList.remove('image--active');
         image.removeAttribute('aria-current');
      });
 
      this.currentPageElement.innerHTML = slide + 1;
      this.pageTotalElement.innerHTML = this.sliderItems.length;
      this.sliderItems[slide].classList.add('image--active');
      this.sliderItems[slide].setAttribute('aria-current', true);
      this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');
      this.sliderControlButtons.forEach(link => {
         link.classList.remove('slider-counter__link--active');
         link.removeAttribute('aria-current');
      });
 
      this.sliderControlButtons[slide].classList.add('slider-counter__link--active');
      this.sliderControlButtons[slide].setAttribute('aria-current', true);
 
      this.slideScrollPosition = slide * this.sliderItems[0].clientWidth;
 
      this.slider.scrollTo({
         left: this.slideScrollPosition
      });
 
      if (this.sliderCounter) {
         this.sliderCounter.value = slide;
      }
 
      if (this.querySelector('.dot')) {
         const controlWidth = this.querySelector(`[data-dot='${0}']`).clientWidth;
         const controlOffset = this.querySelector(`[data-dot='${slide}']`).offsetLeft;
         this.querySelector(`[data-dot='${slide}']`).scrollIntoView({
            block: "nearest",
            inline: "center"
         });
         this.querySelectorAll(`.dot`).forEach(dot => dot.classList.remove('mediumDot'));
         this.querySelectorAll(`.dot`).forEach(dot => dot.classList.remove('smallDot'));
 
         if (controlOffset > controlWidth * 10) {
            if (slide > 4 && slide < this.sliderItems.length - 5) {
               this.querySelector(`[data-dot='${slide - 5}'] > .dot`).classList.add('smallDot');
               this.querySelector(`[data-dot='${slide - 4}'] > .dot`).classList.add('mediumDot');
            }
         }
 
         if (controlOffset < (controlWidth * 10) + (controlWidth * (this.sliderItems.length - 1))) {
            if (slide > 4 && slide < this.sliderItems.length - 5) {
               this.querySelector(`[data-dot='${slide + 4}'] > .dot`).classList.add('mediumDot');
               this.querySelector(`[data-dot='${slide + 5}'] > .dot`).classList.add('smallDot');
            }
         }
      }
   }
 
   onButtonClick(event) {
      event.preventDefault();
      if (event.currentTarget.name === 'next') {
         this.step++;
         if (this.step > this.sliderItems.length - 1) {
            this.step = 0
         }
      } else {
         this.step--;
         if (this.step < 0) {
            this.step = this.sliderItems.length - 1
         }
      }
      this.currentIndex(this.step);
   }
 
 
   linkToSlide(event) {
      const dotIndex = event.currentTarget.dataset.dot;
      this.step = dotIndex;
      this.currentIndex(this.step);
   }
 
   currentIndex(index) {
      this.update(index);
   }
 
   sliderCounterUpdate(event) {
      event.preventDefault();
      this.step = this.sliderCounter.value;
      this.currentIndex(this.step);
   }
}
 
customElements.define('universal-slider-component', UniversalSliderComponent);

    Step #5. Save the changes

    Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

    Step #4. Customize theme

    Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.

    Conclusion

    Adding a collection list slider to your Shopify store can be a powerful tool to improve navigation, increase product discovery, and ultimately boost sales. By considering the various factors discussed in this article, such as placement, customization options, and mobile responsiveness, you can create a slider that seamlessly integrates with your store's design and enhances the user experience. Remember to monitor the slider's performance and adjust your strategy based on customer interaction data. With a well-implemented collection list slider, you can effectively showcase your product collections and keep visitors engaged while browsing your store.

    2 comments

    What seems to be the problem. If you cannot see the code, please follow the steps mentioned above. You can also contact me at chat with us

    Made4uo •

    I bought the code and it does not work correctly, can you correct it please

    Guillermo •

    Leave a comment