Boost Engagement in Shopify’s Dawn Theme with Scrolling Collections

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 .griditem { 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 .griditem { 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 .griditem { 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 .griditem { 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 -%} {%- unless section.settings.title == blank -%} {{ section.settings.title }} {%- if section.settings.show_view_all and show_mobile_slider -%} {{- 'sections.collection_list.view_all' | t -}} {%- endif -%} {%- endunless -%} {%- liquid assign columns = section.blocks.size if columns > 3 assign columns = 3 endif -%} {%- for block in section.blocks -%} {%- 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 %} {%- endfor -%} {%- for block in section.blocks -%} {%- 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 %} {%- endfor -%} {

Mar 17, 2025 - 09:03

Boost Engagement in Shopify’s Dawn Theme with Scrolling Collections

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


  
    {%- unless section.settings.title == blank -%}
      
        
          {{ section.settings.title }}
        

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          
            {{- 'sections.collection_list.view_all' | t -}}
          
        {%- endif -%}
      
    {%- endunless -%}

    
      
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          
            {%- 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
            %}
          
        {%- endfor -%}
                {%- for block in section.blocks -%}
          
            {%- 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
            %}
          
        {%- endfor -%}
      
      {%- if show_mobile_slider -%}
        
          
          
            1
             / 
            {{ 'general.slider.of' | t }}
            {{ section.blocks.size }}
          
          
        
      {%- endif -%}
    

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      
        
          {{- 'sections.collection_list.view_all' | t -}}
        
      
    {%- endif -%}
  


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

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.

Note: This currently supports only 3 to 6 collections.

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.

For any questions or further assistance, please don't hesitate to reach out. Simply leave us a message, and we will respond to you as soon as possible. We're here to help and look forward to working with you!