Scrolling collection lists provide a dynamic way to showcase products while boosting user engagement. Expanding on our previous guide on scrolling text banners, this tutorial focuses on implementing horizontal scrolling for collections in Shopify’s Dawn theme—optimized for modern eCommerce needs.
Why Scrolling Collections Improve Conversions
Stores that implement horizontal scrolling for their collections experience a
38% increase in session times, as users tend to browse more deeply compared to static grid layouts. This design approach aligns well with a mobile-first experience,
with 72% of users finding horizontal swiping more intuitive than traditional pagination when shopping on mobile devices. Additionally, scrolling collections enhance visual storytelling, allowing merchants to create seamless thematic merchandising experiences, such as transitioning from a “Summer Essentials” collection to “Back-to-School Picks,” guiding customers through curated product journeys effortlessly.
Strategic Use Cases
- New Arrivals Carousel – Auto-scroll to showcase the latest collections.
- Category Highlights – Smooth horizontal navigation between product types.
- Trending Now – Algorithm-driven collection displays for real-time popularity tracking.
Technical Implementation Best Practices
Before modifying any code, always create a backup of your theme. Test all changes on this copy to ensure everything functions correctly before publishing to the live site. This precaution protects your main theme and ensures a seamless user experience.
Step 1: Create Collection Template
In the sections folder, create a new file named collection-list-marquee.liquid
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media screen and (min-width: 990px) {
.grid--6-col-desktop .grid__item {
width: calc(8.33% - var(--grid-desktop-horizontal-spacing)* 11 / 12);
max-width: calc(8.33% - var(--grid-desktop-horizontal-spacing)* 11 / 12);
}
.grid--5-col-desktop .grid__item {
width: calc(10% - var(--grid-desktop-horizontal-spacing)* 9 / 10);
max-width: calc(10% - var(--grid-desktop-horizontal-spacing)* 9 / 10);
}
.grid--4-col-desktop .grid__item {
width: calc(12.5% - var(--grid-desktop-horizontal-spacing)* 7 / 8);
max-width: calc(12.5% - var(--grid-desktop-horizontal-spacing)* 7 / 8);
}
.grid--3-col-desktop .grid__item {
width: calc(16.66% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
}
}
{%- endstyle -%}
{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-marquee collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2
id="SectionHeading-{{ section.id }}"
class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{{ section.settings.title }}
</h2>
{%- if section.settings.show_view_all and show_mobile_slider -%}
<a
href="{{ routes.collections_url }}"
id="ViewAll-{{ section.id }}"
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
{%- endif -%}
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}
{%- for block in section.blocks -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns,
placeholder_image: placeholder_image
%}
</li>
{%- endfor -%}
{%- for block in section.blocks -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}-1"
class="collection-list__item desktop-only grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns,
placeholder_image: placeholder_image
%}
</li>
{%- endfor -%}
</ul>
{%- if show_mobile_slider -%}
<div class="slider-buttons">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
>
{{- 'icon-caret.svg' | inline_asset_content -}}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
{{- 'icon-caret.svg' | inline_asset_content -}}
</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
<div
class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
<a
href="{{ routes.collections_url }}"
class="button"
id="ViewAllButton-{{ section.id }}"
aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "Collection list marqueen",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "t:sections.collection-list.settings.title.default",
"label": "t:sections.collection-list.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:sections.collection-list.settings.image_ratio.label",
"info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collection-list.presets.name",
"blocks": [
{
"type": "featured_collection"
},
{
"type": "featured_collection"
},
{
"type": "featured_collection"
}
]
}
]
}
{% endschema %}
<style>
.desktop-only {
display: none;
}
@media screen and (min-width: 990px) {
.collection-marquee .slider-mobile-gutter {
overflow:hidden;
}
.collection-marqueer .slider-mobile-gutter ul {
animation: marquee 18s linear infinite;
width: 200%;
}
.collection-marquee .slider-mobile-gutter ul li {
float: left;
}
.desktop-only {
display: block;
}
@keyframes marquee {
from {
transform: translateX( 0% );
}
to {
transform: translateX( -50% );
}
}
}
</style>
Step 2: Add to Theme
In Shopify Admin:
- Navigate to Online Store > Themes > Customize.
- Add the “Collection list marquee” section to your homepage or anywhere you wish to place it.
Final Thoughts
By integrating scrolling collections into the Dawn theme, eCommerce stores can showcase a greater variety of products and encourage deeper engagement. Following the outlined steps allows merchants to create a dynamic and visually appealing storefront that enhances product discovery.