HOW TO ADD COLOR SWATCH TO FEATURED COLLECTION IN SHOPIFY DAWN 2.0

[Puy]

Hello! Please help. Added reference as well of the one we are trying to achieve. (aloyoga)

Hope you can help! @GemPages @Sheesh_b @BSS-Commerce @KetanKumar @suyash1 

[Sheesh_b]

Hi @Puy 

This is a custom coding level question. Although you can use this https://apps.shopify.com/king-product-options app to add color or image swatch in your store and good news is, this app is free of cost and gives you 20+ options to select from.

Thanks

[KetanKumar · Accepted solution]

@Puy 

oh sorry for that issue yes you have easy to manage this just bellow 

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.

Click here to view our example store

If you’ve been following my previous tutorials, you’re probably also watching to understand how to create color swatches on your collection page as well! Look no further, the below easy quick guide will add the functionality you need to your collection page.

You will need to have completed the color swatch tutorial for the product page, as it will include a section on how to add color metafields which we will need for the collection page.

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.

[Puy]

THANK YOU YOU HAVE BEEN MOST HELPFUL!

May i also ask how to put an outline on the round color as the white is blending with the background haha please see 'encore set' attached photo for reference 

[Puy]

@KetanKumar do we have an additional code for the background of the colors so the white don't blend in with the background?

[KetanKumar]

@Puy 

yes, please share store url so i will check and let you know

[Puy]

oh yes, here gavalesportswear.com @KetanKumar i temporarily changed background so the whites will be seen but would like to go back to white, thanks

[Gloshio]

Hi @KetanKumar that worked like a charm, but few things:
1. Its taking colour based on what value we put in color field, if we put rose gold, it wont take, how to make it take from the Variant metafield definitions?

2. When it shows swatches in collection, how to enable name of colour when one hovers over it?

[KetanKumar]

@Puy 

oh sorry for any issue can you please send store url so i will check and let you know 

[Gloshio]

https://gloshio.com/

https://gloshio.com/collections/rings

[KetanKumar]

@Gloshio 

can you please share your video what do you want

[Gloshio]

Thanks for prompt response @KetanKumar .

Attached screenshot from others website. Need to accomplish this.

[Rakesh_patel_68]

Please help me in this issue.

How to change product images in collection grid after put this code. Can we manage it by JS ? . if yes then how can i applied this variant swatches code for changing images, price on change of swatches selection

[SDBdigital]

Hi

I tried your solution in Craft, but for some reason I image swatches aren't working on the collection page.

https://house-of-cinnamon.co.za/collections/ballet-flats-collection?page=2

for this product

https://house-of-cinnamon.co.za/products/ballet-flat-with-toe-cap

What have I done wrong?

[KetanKumar]

@SDBdigital make sure color variant same image name may be try 

https://www.youtube.com/watch?v=qXDTcyeOmCk