Dawn - Multicolumn - Mobile - Change Slider to dots

Store Design

Topic summary

Goal: replace the mobile multicolumn slider’s arrow controls with dot pagination in Shopify’s Dawn theme.

What was done:

  • Template edit to multicolumn.liquid to output dot links for each slide.
  • JavaScript changes in global.js (SliderComponent) to add dot click handling (linkToSlide), update active states, and manage pagination.

Follow-ups and issues:

  • Potential side effects: whether global.js edits affect other sections and having linkToSlide in both SlideshowComponent and SliderComponent were raised but not clearly resolved.
  • Styling bug: the first dot appearing bolder than others after clicking was reported; a “works on my device” retest was suggested, with no specific fix shared.
  • Hiding arrows: a CSS rule was provided to hide slider buttons in the multicolumn section.

Broader compatibility:

  • Applying the approach to Main-product.liquid produced too many dots for 4 images; some reported the code had no effect.
  • A newer Dawn update may have broken earlier logic; an alternative SliderComponent implementation was shared (calculates sliderItemOffset, slidesPerPage, sets active dot), yet others still reported it not working in new themes or dots not highlighting on scroll.

Status: partially resolved (CSS to hide arrows). Dot behavior and cross-section compatibility remain open/ongoing.

Summarized with AI on December 28. AI used: gpt-5.
10

Hello @LitCommerce !

Thank you for this helpfull code it works really well on multicolumn section.

But when I tried it on Main-product.liquid section ( past the same code ) it shows a lot of dots while I have only 4 product images.

dzdzd.JPG
dzdzd.JPG420×279 15.6 KB

Is there any solution you could help with ?