Customize Color Swatches with Count on Collection Page - Dawn 2.0 theme

Store Design
, , , , , , , ,
1

I’m using the latest version of the Dawn theme and have added custom code to display color swatches on the collection page. The feature works well, but for products with more colors (e.g., 12 colors), the swatches are spilling into a second line, which doesn’t look clean.

I want to customize the swatch display for both mobile and desktop views:

  • Show the first 5 color swatches as they are.
  • Display the remaining colors as a count (e.g., +7 in small text).

I’ll attach a reference image for better understanding.

Screenshot 2024-12-17 124726.png
Screenshot 2024-12-17 124726.png428×576 101 KB

website : https://twy7bt2f2c5z6mmv-25088491610.shopifypreview.com

Tutorial used : https://www.youtube.com/watch?v=DNL1wDG2zWQ&t=648s

Thanks in advance.

2

@rifat_Shop Thanks for the solution can you provide an video tutorial to how to do that, as I don’t know much about coding