Dawn Theme - Change multi column slider controls to dots

Topic summary

Goal: switch mobile slider controls in Dawn (Shopify’s default theme) from numeric counters (e.g., 1/3) to dot pagination across sections (multicolumn, featured collection, featured blog).

What worked initially:

  • Multicolumn and collection list: edit sections/multicolumn.liquid to remove the numeric counter markup and output dot links via a loop; modify Assets/global.js (SliderComponent) to activate and sync dot controls.
  • Featured collection and featured blog: remove the numeric counter blocks in their section files and add loops. Note: featured blog must loop over blog.articles (not collection products), as corrected by the OP.

Later developments (compatibility/regressions):

  • A theme update appears to break the earlier global.js override. An alternative SliderComponent class was shared to restore dot behavior.
  • A subsequent report claims the new JS “doesn’t work,” and it also breaks the mobile menu (burger) on mobile.

Key technical notes:

  • “Dots” = pagination bullets; global.js controls all sliders; sections referenced: multicolumn, featured-collection, featured-blog.
  • Screenshots are central for visual differences between controls.

Status: partially solved earlier; later updates introduced breakage. No confirmed final fix; unresolved/ongoing.

Summarized with AI on December 30. AI used: gpt-5.

Hello @cabinandcrate

Hello there.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find sections > featured-collection.liquid and replace code:

Remove this code.


    1
     / 
    {{ 'general.slider.of' | t }}
    {{ products_to_display }}
  

Add this code.


  

    {%- for block in section.settings.collection.products limit: section.settings.products_to_show -%}
    
    {%- endfor -%}
  

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find sections > featured-blog.liquid and replace code:

Remove this code.


  1
   / 
  {{ 'general.slider.of' | t }}
  {{ section.settings.post_limit }}

Add this code.


  

    {%- for block in section.settings.collection.products limit: section.settings.products_to_show -%}
    
    {%- endfor -%}