Dawn theme collection page color swatch trubleshooting

[Sivadarshan]

I'm using dawn theme latest version in that, I custom coded color swatch on collection page using an Youtube tutorial, it was working fine but i need to customize even further like in desktop view it was ok but in mobile view the the color swatch are shown in 2 lines which makes the collection page little messy, so I need to make the color swatch if it was more than 5 color then it needs to be increase the count and rather than showing all the color, if possible we can make it has scroller. I'll share the reference how i want in mobile view.

Website : https://offnorth.com/?_ab=0&_fd=0&_sc=1              (or)     https://mannavan.myshopify.com/collections/all

password: offnorth

Thanks in advance 🙂 

[topnewyork]

Hello, @Sivadarshan 
You can watch this tutorial, hope you will find your solution..

Thanks!

[Sivadarshan]

@topnewyork Thanks But this is for product page, But I need to customize in collection page is that possible.

[topnewyork]

Hello, @Sivadarshan sorry for late reply 

Note: This also works for the Craft, Crave, Sense and Studio Theme.

Note: Older versions of the Dawn theme uses the Product-Card.liquid instead of Card-Product.liquid snippet file, and the assigned value for the product is 'product_card_product' not 'card_product. You will need to make the changes in the below code for the old versions of the Dawn theme.

Change Card-Product.Liquid

Changing this code which add the element to all product cards which use this code. This also includes the ‘You May Also Like’ section, and other sections aswell. Go to edit code, head over to the Snippet folder and find card-product.liquid. Once found, scroll down until you find the below code

{% render 'price', product: card_product, price_class: '' %}

Right under the above code, paste the below

{% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            <div class="product_tile_color_holder">
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.image.swatch %}
              {% assign background_style = "url(" | append: variant.metafields.image.swatch | append: ")" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  <!--- Coded by jotting.com --->
              <input
                     type="radio"
                     name="{{ card_product.id }}_card_color"
                     id="{{ card_product.id }}_color_{{ forloop.index }}"
                     style="background: {{ background_style }}; background-size: cover;">
              {% endfor %}
            </div>
            {% endif %}
            {% endfor %}

Add Code To Base.css
Now, head over to the Asset folder, find base.css and paste the below code at the bottom of the file

input[type=radio][name$=_card_color]{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                appearance: none;
                background-size: 9px 9px;
                background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, #ebebeb 0, #ebebeb 50%);
}

You’re now done! you now have an awesome collection variant color swatch on your Dawn theme.