Collection List Slider

March 8, 2022

Compatibility: Compatible with Dawn 3.0 version only

Show case all your collections using a slider. This is a slider for the collections and not products. For product slider, please refer here. If you have other Shopify themes or higher version of Dawn or other Shopify 2.0 themes, you can use this universal code here.

Check DEMO store here 💻. Password: made4uo

What is a Collection List Slider?

A collection list slider is a dynamic element that displays a carousel of excerpts or summaries from your Shopify store's product collections. It allows you to showcase multiple collections on a single page, potentially increasing visibility and user engagement with your product offerings.

Why Use a Collection List Slider?

There are several advantages to incorporating a collection list slider on your Shopify store:

Increased Collection Visibility: The slider provides a prominent space to showcase your product collections on key pages of your store, potentially attracting more visitors to explore your product offerings.
Improved User Engagement: The interactive nature of a slider can encourage users to browse through different collections, potentially leading to increased exploration and product discovery.
Enhanced Design Appeal: A well-designed collection list slider can add a visually dynamic element to your store, improving the overall aesthetics and user experience.
Highlight New or Featured Collections: You can use the slider to specifically showcase your latest collections or curate a selection of featured collections to drive user interest.

Additional Considerations:

While collection list sliders offer a dynamic way to showcase your product collections, here are some additional factors to consider for a successful implementation:

Content Selection and Curation:
- Quality Over Quantity: Focus on displaying high-quality collection excerpts or summaries that will pique user interest and encourage them to click through to explore the full collection.
- Target Audience: Curate the collections within the slider to resonate with your target audience and showcase product categories relevant to their interests.
- Balance New and Popular: Maintain a balance between featuring your latest collections and showcasing some of your most popular collections to attract new and returning visitors.
- Visual Appeal: Consider using compelling thumbnail images for each collection within the slider to grab user attention and entice them to click.
Slider Design and Functionality:
- Mobile Optimization: Ensure the collection list slider displays and functions flawlessly on mobile devices, considering the smaller screen size and potential touch interactions.
- Navigation Clarity: Make sure users can easily navigate the slider through clear arrows, dots, or other intuitive controls.
- Loading Speed: Optimize the slider's design and code (if applicable) to ensure it loads quickly and doesn't slow down your store's overall page loading speed.
- Readability: Maintain clear and readable text within the collection summaries or titles on the slider, avoiding excessive text that might overwhelm users on a quick scan.

What you are buying:

A slider for collections list

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 to Your Shopify Store

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 "Collection List Slider", then replace the default code with the code below.

{{ 'collection-list-slider.css' | asset_url | stylesheet_tag }}
<div
class="collectionListSlider"
style="padding-top: {{ section.settings.padding_top | append: "%" }}; padding-bottom: {{section.settings.padding_bottom }}"
>
<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.title | escape }}</h2>
{% endif %}
{% if section.settings.show_view_all %}
<a href="/collections" class="button">View All</a>
{% endif %}
</div>
 
<universal-slider-component style="--border-color: {{section.settings.border_color}};">
{% if section.settings.slider_visual == 'slider' %}
<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="previous slide"
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>
</div>
{% endif %}
<ul class="product-grid slider slider--tablet" 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 %}"
{{ block.shopify_attributes }}
>
{% 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 animate-arrow">
<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 }}%;"
>
<div
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 -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- endif -%}
{%- if card_collection.description == blank -%}
<span class="icon-wrap">
<svg
viewBox="0 0 14 10"
fill="none"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-arrow"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
{% endif %}
</a>
</h3>
{%- if card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}
<span class="icon-wrap"
>&nbsp;
<svg
viewBox="0 0 14 10"
fill="none"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-arrow"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
</p>
{%- endif -%}
</div>
</div>
</div>
{% if settings.card_style == 'card' or card_collection.featured_image %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- endif -%}
{%- if card_collection.featured_image or card_collection.description == blank -%}
<span class="icon-wrap">
<svg
viewBox="0 0 14 10"
fill="none"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-arrow"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
{% endif %}
</a>
</h3>
{%- if card_collection.featured_image == null and card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}
<span class="icon-wrap"
>&nbsp;
<svg
viewBox="0 0 14 10"
fill="none"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-arrow"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
</p>
{%- endif -%}
</div>
</div>
{% endif %}
</div>
</div>
 
<style>
.collectionListSlider .card-wrapper {
background: {{ section.settings.background}};
}
</style>
</li>
{%- endfor -%}
</ul>
{% if section.settings.slider_visual == 'slider' %}
<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="next slide"
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>
{% endif %}
{%- if block_length > 3 -%}
{%- if section.settings.slider_visual == 'slider' -%}
<div class="sliderContainer">
<input type="range" min="0" max="{{block_length | minus: 1}}" value="1" 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>
{% endif %}
 
<div
class="slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' %}hidden {% endif %}"
style="display: flex"
>
<button
type="button"
class="slider-button slider-button--prev"
data-step="1"
name="previous"
aria-label="previous slide"
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"
data-dot="{{forloop.index0}}"
style="padding: 1rem; width: 100%"
aria-label="load-slide{{ forloop.index }} slider-of {{ 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="next slide"
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="load-slide{{ forloop.index }} slider-of {{ 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": "text",
"id": "title",
"default": "Collections",
"label": "Title"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "View all button"
},
{
"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": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "adapt"
},
{
"value": "portrait",
"label": "portrait"
},
{
"value": "square",
"label": "square"
}
],
"default": "square",
"label": "Image ratio"
},
{
"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"
}
],
"default": "numbers",
"label": "Counter"
},
{
"type": "checkbox",
"id": "slider_button_fixed",
"default": true,
"label": "Slider button fixed"
}
],
"blocks": [
{
"type": "featured_collection",
"name": "featured collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Collection List Slider"
}
]
}
{% endschema %}

Step #3. Create new Asset

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

.collectionListSlider {
padding: 5%;
overflow: hidden;
}
 
.collectionListSlider universal-slider-component {
position: relative;
display: block;
}
 
.collectionListSlider .card__information {
padding-bottom: 1rem;
padding-top: 1rem;
}
 
.collectionListSlider .card__heading {
text-align: center;
}
 
 
@media screen and (max-width: 989px) {
.no-js slider-component .slider {
padding-bottom: 3rem;
}
}
 
.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}
 
@media screen and (max-width: 749px) {
.grid--col {
width: 33%;
}
 
}
 
@media screen and (max-width: 481px) {
.grid--col {
width: 50%;
}
}
 
@media screen and (min-width: 750px) {
.grid--col {
width: 20%;
}
}
 
 
.collectionListSlider .collectionListTitleWrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
 
.collectionListSlider .collectionListTitle {
margin: auto 0;
}
 
.collectionListSlider .featured-grid {
display: flex;
padding: 0;
}
 
.collectionListSlider .featured-grid li {
list-style: none;
}
.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-bottom: 1rem;
width: 100%;
 
}
.collectionListSlider .collection-list__item {
padding: 1.5rem;
border: 5px solid transparent;
}
 
.collectionListSlider .slider__slide {
padding-bottom: 0;
padding: 0 1rem;
}
 
@media (prefers-reduced-motion) {
.slider--everywhere {
scroll-behavior: auto;
}
}
 
.collectionListSlider .slider.slider--everywhere .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
scroll-snap-align: center;
}
 
/* Scrollbar */
 
.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;
}
 
@media screen and (max-width: 749px) {
.collectionListSlider .slider-counter--dots,
.collectionListSlider .slider-counter--numbers {
margin: 0;
}
}
 
 
@media screen and (max-width: 749px) {
.collectionListSlider .slider-counter__link {
padding: 0.7rem;
}
}
 
.collectionListSlider .slider-counter__link--dots .dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 0.1rem solid rgba(var(--color-foreground), 0.5);
padding: 0;
display: block;
}
 
.collectionListSlider .slider-counter__link--active.slider-counter__link--dots .dot {
background-color: rgb(var(--color-foreground));
}
 
@media screen and (forced-colors: active) {
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: CanvasText;
}
}
 
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
border-color: rgb(var(--color-foreground));
}
 
.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 {
transform: scale(1.1);
}
 
.collectionListSlider .slider-counter__link--numbers {
color: rgba(var(--color-foreground), 0.5);
text-decoration: none;
}
 
.collectionListSlider .slider-counter__link--numbers:hover {
color: rgb(var(--color-foreground));
}
 
.collectionListSlider .slider-counter__link--active.slider-counter__link--numbers {
text-decoration: underline;
color: rgb(var(--color-foreground));
}
 
.collectionListSlider .slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
 
.collectionListSlider .slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
 
.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);
cursor: not-allowed;
}
 
.slider-button--next .icon {
transform: rotate(-90deg);
}
 
.slider-button--prev .icon {
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;
}
 
@media screen and (min-width: 750px) {
.collectionListSlider .slideshow__controls {
position: relative;
}
 
.slider--tablet.grid--peek .grid__item {
width: 25%;
}
}
 
slideshow-component:not(.page-width) .slider-buttons {
border-right: 0;
border-left: 0;
}
 
.collectionListSlider .slideshow__control-wrapper {
display: flex;
width: 28rem;
overflow-x: auto;
}
 
.image--active {
border: 5px solid var(--border-color) !important;
}
 
.counter--mobile {
display: none;
}
 
@media only screen and (max-width: 481px) {
.collectionListSlider .counter--mobile {
display: flex;
}
.collectionListSlider .slideshow__control-wrapper {
display: none;
}
}
 
.collectionListSlider .slider-counter__link {
display: flex;
align-items: center;
justify-content: center;
}
 
.collectionListSlider .smallDot {
width: 0.4rem !important;
height: 0.4rem !important;
}
 
.collectionListSlider .mediumDot {
width: 0.75rem !important;
height: 0.75rem !important;
}
 
 
/* slider counter */
 
.collectionListSlider .slidecontainer {
width: 100%;
}
 
.collectionListSlider .sliderCounter {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: .7;
-webkit-transition: .2s;
transition: opacity .2s;
}
 
.sliderCounter:hover {
opacity: 1;
}
 
.sliderCounter::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 5px;
margin: 10px 0;
border-radius: 5px;
background: black;
cursor: pointer;
}
 
.sliderCounter::-moz-range-thumb {
height: 5px;
padding: 5px;
border-radius: 5px;
margin: 10px 0;
background: black;
cursor: pointer;
}
 
.sliderCounterBox {
display: flex;
align-items: center;
}
 
.sliderCounterButton {
display: none;
position: absolute;
background: black !important;
color: white !important;
transition: all .2s ease;
z-index: 10;
}
 
.collectionListSlider:hover .sliderCounterBtn--prev{
left: -5%;
}
 
.collectionListSlider:hover .sliderCounterBtn--next {
right: -5%;
}
 
.sliderCounterBtn--prev > svg{
transform: rotate(90deg);
}
 
.slider_button_fixed.sliderCounterBtn--prev {
left: -10%;
}
 
.slider_button_fixed.sliderCounterBtn--next {
right: -10%;
}
 
.sliderCounterBtn--prev {
left: -5%;
}
 
.sliderCounterBtn--next {
right: -5%;
}
 
.sliderCounterBtn--next > svg{
transform: rotate(-90deg);
}
 
.sliderCounterButton:hover {
transform: scale(1.1);
}
 
.sliderCounterButton > svg {
height: 2rem !important;
}
 
@media screen and (max-width: 749px) {
.sliderCounterBtn--prev {
left: -5%;
}
.sliderCounterBtn--next {
right: -5%;
}
}
 
.card-wrapper {
color: inherit;
height: 100%;
position: relative;
text-decoration: none;
}
 
.card {
text-align: var(--card-text-alignment);
text-decoration: none;
}
 
.card--card {
height: 100%;
}
 
.card--card,
.card--standard .card__inner {
border-radius: var(--card-corner-radius);
border: var(--card-border-width) solid rgba(var(--color-foreground), var(--card-border-opacity));
position: relative;
box-sizing: border-box;
}
 
.card--card:after,
.card--standard .card__inner:after {
content: '';
position: absolute;
width: calc(var(--card-border-width) * 2 + 100%);
height: calc(var(--card-border-width) * 2 + 100%);
top: calc(var(--card-border-width) * -1);
left: calc(var(--card-border-width) * -1);
z-index: -1;
border-radius: var(--card-corner-radius);
box-shadow: var(--card-shadow-horizontal-offset) var(--card-shadow-vertical-offset) var(--card-shadow-blur-radius) rgba(var(--color-shadow), var(--card-shadow-opacity));
}
 
.card .card__inner .card__media {
overflow: hidden;
/* Fix for Safari border bug on hover */
z-index: 0;
border-radius: calc(var(--card-corner-radius) - var(--card-border-width) - var(--card-image-padding));
}
 
.card--card .card__inner .card__media {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
 
.card--standard.card--text {
background-color: transparent;
}
 
.card-information {
text-align: var(--card-text-alignment);
}
 
.card__media,
.card .media {
bottom: 0;
position: absolute;
top: 0;
}
 
.card .media {
width: 100%;
}
 
.card__media {
margin: var(--card-image-padding);
width: calc(100% - 2 * var(--card-image-padding));
}
 
.card--standard .card__media {
margin: var(--card-image-padding);
}
 
.card__inner {
width: 100%;
}
 
.card--media .card__inner .card__content {
padding: calc(var(--card-image-padding) + 1rem);
position: relative;
}
 
.card__content {
display: grid;
grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
padding: 1rem;
width: 100%;
}
 
.card__content--auto-margins {
grid-template-rows: minmax(0,auto) max-content minmax(0,auto);
}
 
.card__information {
grid-row-start: 2;
padding: 1.3rem 1rem;
}
 
@media screen and (min-width: 750px) {
.card__information {
padding-bottom: 1.7rem;
padding-top: 1.7rem;
}
}
 
.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__inner:not(.ratio) > .card__content {
height: 100%;
}
 
.card__heading {
margin-top: 0;
}
 
.card__heading:last-child {
margin-bottom: 0;
}
 
.card--card.card--media > .card__content {
margin-top: calc(0rem - var(--card-image-padding));
}
 
.card--standard.card--text a::after,
.card--card .card__heading a::after {
bottom: calc(var(--card-border-width) * -1);
left: calc(var(--card-border-width) * -1);
right: calc(var(--card-border-width) * -1);
top: calc(var(--card-border-width) * -1);
}
 
.card__heading a::after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
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(var(--color-foreground), 0.3);
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}
 
.card__heading a:focus-visible:after {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}
 
.card__heading a:focus:not(:focus-visible):after {
box-shadow: none;
outline: 0;
}
 
.card__heading a:focus {
box-shadow: none;
outline: 0;
}
 
@media screen and (min-width: 990px) {
.card .media.media--hover-effect > img:only-child,
.card-wrapper .media.media--hover-effect > img:only-child {
transition: transform var(--duration-long) ease;
}
 
.card:hover .media.media--hover-effect > img:first-child:only-child,
.card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
transform: scale(1.03);
}
 
.card-wrapper:hover
.media.media--hover-effect
> img:first-child:not(:only-child) {
opacity: 0;
}
 
.card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
 
.underline-links-hover:hover a {
text-decoration: underline;
text-underline-offset: 0.3rem;
}
}
 
.card--standard.card--media .card__inner .card__information,
.card--standard.card--text > .card__content .card__heading,
.card--standard > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
display: none;
}
 
.card--standard > .card__content {
padding: 0;
}
 
.card--standard > .card__content .card__information {
padding-left: 0;
padding-right: 0;
}
 
.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
display: none;
}
 
.card--extend-height {
height: 100%;
}
 
.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
display: flex;
flex-direction: column;
}
 
.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
flex-grow: 1;
}
 
.card .icon-wrap {
margin-left: 0.8rem;
white-space: nowrap;
transition: transform var(--duration-short) ease;
overflow: hidden;
}
 
.card-information > * + * {
margin-top: 0.5rem;
}
 
.card-information {
width: 100%;
}
 
.card-information > * {
line-height: calc(1 + 0.4 / var(--font-body-scale));
color: rgb(var(--color-foreground));
}
 
.card-information > .price {
color: rgb(var(--color-foreground));
}
 
.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;
}
 
@media screen and (max-width: 749px) {
.collection .grid__item:only-child {
flex: 0 0 100%;
max-width: 100%;
}
}
 
@media screen and (min-width: 750px) {
.collection .title-wrapper-with-link--no-heading {
margin-top: calc(6rem + var(--page-width-margin));
}
}
 
@media screen and (max-width: 989px) {
.collection .slider.slider--tablet {
margin-bottom: 1.5rem;
}
}
 
.collection .loading-overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
width: 100%;
padding: 0 1.5rem;
opacity: 0.7;
}
 
@media screen and (min-width: 750px) {
.collection .loading-overlay {
padding-left: 5rem;
padding-right: 5rem;
}
}
 
.collection.loading .loading-overlay {
display: block;
}
 
.collection--empty .title-wrapper {
margin-top: 10rem;
margin-bottom: 15rem;
}
 
.collection__view-all {
margin-top: 2rem;
}

Step #4. Add javascript code

Still at the Asset folder, open the global.js and add the code below. This javascript code share with other code I have, please check if you have "UniversalSldierComponent", if so, no need to do step #4.

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.sliderControlWrapper = this.querySelector('.slideshow__control-wrapper');
 
this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link'));
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 #6. 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

Collection list sliders offer a dynamic and visually engaging way to showcase your Shopify store's collections.

Collection List Slider

What is a Collection List Slider?

Why Use a Collection List Slider?

Additional Considerations:

Steps on how to add Collection List Slider to Your Shopify Store

Step #1. Open your code editor

Step #2. Create a new section file

Step #3. Create new Asset

Step #4. Add javascript code

Step #5. Save the changes

Step #6. Customize theme

Conclusion

0 comments

Leave a comment

Your cart is empty

Your cart is empty

Country/Region

Language

Country/Region

Language

Collection List Slider

What is a Collection List Slider?

Why Use a Collection List Slider?

Additional Considerations:

Steps on how to add Collection List Slider to Your Shopify Store

Step #1. Open your code editor

Step #2. Create a new section file

Step #3. Create new Asset

Step #4. Add javascript code

Step #5. Save the changes

Step #6. Customize theme

Conclusion

0 comments

Leave a comment