Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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.
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
This is an accepted solution.
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.
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
@KetanKumar do we have an additional code for the background of the colors so the white don't blend in with the background?
yes, please share store url so i will check and let you know
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
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?
oh sorry for any issue can you please send store url so i will check and let you know
can you please share your video what do you want
Thanks for prompt response @KetanKumar .
Attached screenshot from others website. Need to accomplish this.
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
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?
@SDBdigital make sure color variant same image name may be try
https://www.youtube.com/watch?v=qXDTcyeOmCk
hi, my variants are showing on collection however they're all white. How do I change them to their appropriate color?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024