What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

Puy
Shopify Partner
18 0 2

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

Screenshot 2023-02-20 at 12.59.37 AM.png

f5eb7a89-362b-4cb5-bfd4-b72a28952c6c.jpeg

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

Accepted Solution (1)

KetanKumar
Shopify Partner
37433 3664 12118

This is an 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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 15 (15)

Sheesh_b
Shopify Partner
522 116 120

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

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

KetanKumar
Shopify Partner
37433 3664 12118

This is an 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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Puy
Shopify Partner
18 0 2

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 

 

Screenshot 2023-02-20 at 11.26.35 PM.png

Puy
Shopify Partner
18 0 2

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

 

KetanKumar
Shopify Partner
37433 3664 12118

@Puy 

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Puy
Shopify Partner
18 0 2

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
Tourist
6 0 3

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
Shopify Partner
37433 3664 12118

@Puy 

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
37433 3664 12118

@Gloshio 

can you please share your video what do you want

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gloshio
Tourist
6 0 3

Thanks for prompt response @KetanKumar .

 

Attached screenshot from others website. Need to accomplish this.Untitled.jpg

Rakesh_patel_68
Shopify Partner
35 5 6

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
SDBdigital
Shopify Partner
86 0 17

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
Shopify Partner
37433 3664 12118

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

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
alqur
Visitor
2 0 0

hi, my variants are showing on collection however they're all white. How do I change them to their appropriate color?