Good Morning. Thank you for the comprehensive tutorial and your extensive coding. I can confirm it works like a charm on Dawn 12.0.0 as long as every step is followed exactly as your video describes. Unfortunately, the code shows my "SALE" badges as "% OFF". Can you please advise which code to be removed or changed to allow the normal Shopify Badge function to show "SALE"? Thank you for your work.
@@WebSensePro Thanks for getting back to me on this. I am referring to the tutorial of adding the swatches on collection pages. Before altering the clean code of the Dawn 12.0 theme, 2 of my products were listed with blue "Sale" badges (when you have products with "Compare To" pricing set) After performing your code changes, the "Sale badges change to % Discount (for example: showing as "31% OFF" instead of "Sale"). Although I am VERY VERY pleased with your code and the way everything turned out on the site, that one change was unexpected. I am just trying to ignore the change, but it sitting there like a sore red Thumb 🤣! Do you happen to know what needs to change back in the new code (or removed) to return the "Sale" function??? Thanks for your input in advance.
Hello, great work. I have already successfully added the video with the colour swatches to my product page. I would also like to include this code. 2 questions: 1. can I also switch to colour swatches here? 2. would it be possible to display the swatches below the description and price? Thank you for your feedback.
Thanks for the video It worked but i need color swatches instead. your tutorial on product page swatches was good. because there is an option of swatches color or image.
I implemented on 14 without a problem. the only thing to watch out for is in the render sections. you don't want to replace all the code there as dawn made some changes, just add the "-custom" on the first line of the render.
Thank you for that! Very useful! Made it works on Collection Pages, Featured Collection & Search Result. 👍 However, I got an issue with sold out "Red Slash" --- when only 1st size variant is sold out (other size variant still have stock), the swatch still comes with "Red Slash" indicate it's sold out ---- which the fact is only 1 size variant sold out Any logic to update "Red Slash" sold out to look at inventory for all size variants but not only the first one?? 🙏
Thank you so much for the tutorial! I added all of the custom code, however I only get small dots to be displayed on the left side of the card instead of the middle and they don't have any images. You can click them and the images change, but they are tiny without images. Any advice? Thank you!
Thank you so much, I implemented this! However I would like the colors to show and not the variants.. How do I do that? Anyone? (It shows the colors on my product page and variants on homepage and collection page..)
Hello, I followed your tutorial but sadly my page doesn't display swatches. I think its because for my products the variants are called "flavour" not colour, so what and where should I change to reflect that? Thank you!
try this: - go to card-product-custom.liquid - search for: {% assign variant_option_name = "Color" %} {% comment %}Setting: Variant Option Name To Display On Collection Page{% endcomment %} - change the word Color to whatever your variants are called also: - go to card-variant-swatch-custom.liquid - search for these two: width: {{swatchSize}}px; /* Adjust for desired swatch size */ height: {{swatchSize}}px; /* Adjust for desired swatch size */ - change {{swatchSize}} to whatever size you want your images I had to change this because the images would show as small dots, don´t know if that´s in the tutorial, didn´t watch it all.
I guessed that but what and where exaclty? Can you advise? Someone here already replied but I see that the comment was deleted so can you help?@@WebSensePro
Also really interested in this being available for Dawn 13. When I've added to 13.0.1, on the collection page the swatches don't open the variant when clicked. There's also a dot added next to the product card. And the sale tag has switched to showing a "xx% Off" message. I've not tested beyond this stage in the tutorial. It would also be great if this could be added into the Customizer and manage the size and shape of the swatches as you have done in your product page Swatches guide.
Just wanted to bring to your notice. If we combine this tutorial with "Infinite scroll" tutorial, only few swatches work. (Products that were originally on Page 1). After Pagination, Variant data is not found.
Hi there! @WebSensePro Thank for this tutorial. Unfortunately it doesn't work for us, we have Dawn 11 and we have color swatches on product page (also using your tutorial). We did everything step by step but nothing has happen. Could you help me to understand what's the reason? Thanks in advance
I got the variant images to pull, but I can only get color swatches to work on product pages. Any diagnosing tips? Would this work on the related products sections? Also any suggestions on how I might add Buy Now Button a second variant option for say size?
Hey! When clicking on the different colors on any page, the product image doesn't change like in your tutorial. I am using Dawn theme. I have disabled hover effect and followed every step. What could've gone wrong here?
Hey Bilal! Jus wondering if we didn't setup Color as a Product Variant (i.e. T-shirt Black & T-Shirt Blue are 2 diff products), but still wanna group them in Collection Pages in 1 Listing, is there any way to do so ?? 🙃🙏
The colour swatches aren't showing on the collection page, however, I have all my colour variants showing on the collection page, does this code not work if thats the case? thank you
if i have more color swatches it is showing in two or more rows how to show in single row and if we have more color swatches then remaining color swatches to show as indicator like +2, or +5 or +10 remaining swatches please reply
I have managed to add the color swatches, however the picture doesn´t change when I click on the color swatches. Any advice of what can be the problem? I am using Dawn 12
![How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]](http://i.ytimg.com/vi/OkJZbJyNNx8/mqdefault.jpg)
Good Morning. Thank you for the comprehensive tutorial and your extensive coding. I can confirm it works like a charm on Dawn 12.0.0 as long as every step is followed exactly as your video describes.
Unfortunately, the code shows my "SALE" badges as "% OFF". Can you please advise which code to be removed or changed to allow the normal Shopify Badge function to show "SALE"? Thank you for your work.
Which tutorial you are referring here?
@@WebSensePro Thanks for getting back to me on this. I am referring to the tutorial of adding the swatches on collection pages. Before altering the clean code of the Dawn 12.0 theme, 2 of my products were listed with blue "Sale" badges (when you have products with "Compare To" pricing set) After performing your code changes, the "Sale badges change to % Discount (for example: showing as "31% OFF" instead of "Sale").
Although I am VERY VERY pleased with your code and the way everything turned out on the site, that one change was unexpected. I am just trying to ignore the change, but it sitting there like a sore red Thumb 🤣!
Do you happen to know what needs to change back in the new code (or removed) to return the "Sale" function??? Thanks for your input in advance.
Hello, great work.
I have already successfully added the video with the colour swatches to my product page. I would also like to include this code.
2 questions:
1. can I also switch to colour swatches here?
2. would it be possible to display the swatches below the description and price?
Thank you for your feedback.
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Love this, thank you so much! Is it possible to alter the code somewhere to adjust the thickness of the frame around the swatches?
Yes should be pretty simple with CSS
OMG!!!! THANK YOU VERY MUCH FOR THIS VIDEO! MY E-COMMERCE IS SOO COOL NOW. I WISH YOU THE BEST. THANKS
You're welcome!
Thank you for sharing this! it's very helpful. How can I center swatches to align with the thumbnail image?
With some more codes 😀😀
That's great. I did it. Buy only swatch images shown. How can I show variant colors instead of images?
Will add a solution to this as well
@@WebSensePro Would love this option too! You're a hero!
Thanks for the video It worked but i need color swatches instead. your tutorial on product page swatches was good. because there is an option of swatches color or image.
Thanks for suggestion
Any plans for an update on this for Dawn 13.0.x?
Sure, if more demanded
I implemented on 14 without a problem. the only thing to watch out for is in the render sections. you don't want to replace all the code there as dawn made some changes, just add the "-custom" on the first line of the render.
Thank you for that! Very useful! Made it works on Collection Pages, Featured Collection & Search Result. 👍
However, I got an issue with sold out "Red Slash" --- when only 1st size variant is sold out (other size variant still have stock), the swatch still comes with "Red Slash" indicate it's sold out ---- which the fact is only 1 size variant sold out
Any logic to update "Red Slash" sold out to look at inventory for all size variants but not only the first one?? 🙏
Will have to check
@@WebSensePro did you manage to solve this? i'm facing same issue for those sold out variant
Thank you so much for the tutorial!
I added all of the custom code, however I only get small dots to be displayed on the left side of the card instead of the middle and they don't have any images. You can click them and the images change, but they are tiny without images. Any advice?
Thank you!
Its working fine for us
Thank you. Looking forward to more tutorials in the near future..
You're welcome!
Requesting a tutorial on how to get color swatches instead of product image as swatches.
Will try my best to provide that
@@WebSensePro Is it updated?
Thank you so much, I implemented this! However I would like the colors to show and not the variants.. How do I do that? Anyone? (It shows the colors on my product page and variants on homepage and collection page..)
Great suggestion
Hello, I followed your tutorial but sadly my page doesn't display swatches. I think its because for my products the variants are called "flavour" not colour, so what and where should I change to reflect that? Thank you!
try this:
- go to card-product-custom.liquid
- search for: {% assign variant_option_name = "Color" %} {% comment %}Setting: Variant Option Name To Display On Collection Page{% endcomment %}
- change the word Color to whatever your variants are called
also:
- go to card-variant-swatch-custom.liquid
- search for these two: width: {{swatchSize}}px; /* Adjust for desired swatch size */
height: {{swatchSize}}px; /* Adjust for desired swatch size */
- change {{swatchSize}} to whatever size you want your images
I had to change this because the images would show as small dots, don´t know if that´s in the tutorial, didn´t watch it all.
Will need some code changes
I guessed that but what and where exaclty? Can you advise? Someone here already replied but I see that the comment was deleted so can you help?@@WebSensePro
Can I still hope for a custom accordion on footer? 🙃 Thanks, teacher!
Collapsible footer is coming shortly, stay tuned
Also really interested in this being available for Dawn 13. When I've added to 13.0.1, on the collection page the swatches don't open the variant when clicked. There's also a dot added next to the product card. And the sale tag has switched to showing a "xx% Off" message.
I've not tested beyond this stage in the tutorial. It would also be great if this could be added into the Customizer and manage the size and shape of the swatches as you have done in your product page Swatches guide.
Yes, we have planned to create an updated version of the tutorial
Just wanted to bring to your notice. If we combine this tutorial with "Infinite scroll" tutorial, only few swatches work. (Products that were originally on Page 1).
After Pagination, Variant data is not found.
Its not suppose to work with other tutorial, will try find a solution
Hi there! @WebSensePro Thank for this tutorial. Unfortunately it doesn't work for us, we have Dawn 11 and we have color swatches on product page (also using your tutorial). We did everything step by step but nothing has happen. Could you help me to understand what's the reason? Thanks in advance
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
I got the variant images to pull, but I can only get color swatches to work on product pages. Any diagnosing tips? Would this work on the related products sections? Also any suggestions on how I might add Buy Now Button a second variant option for say size?
No it's not currently working on related product section. But we can add some more code to make it work on Related products section
sir can you tell us how the image changes automatically by hovering over the boxes?
Thank you.
This feature is not available in this code right now
Can you please show how to add a transparent and sticky header for dawn 12.0.0
Sure, will create a video on that
Hey!
When clicking on the different colors on any page, the product image doesn't change like in your tutorial.
I am using Dawn theme.
I have disabled hover effect and followed every step. What could've gone wrong here?
Please share more details for e.g theme name and version
Hey Bilal!
Jus wondering if we didn't setup Color as a Product Variant (i.e. T-shirt Black & T-Shirt Blue are 2 diff products), but still wanna group them in Collection Pages in 1 Listing, is there any way to do so ?? 🙃🙏
Please contact via websensepro.com/contact-us for paid support
can you make a quick add to cart button after selecting the swatches please?
great suggestion
It's very useful video! Requesting a tutorial for add multiple variation images to the product.
Will do soon
How would you show a color in the Swatches instead of a photo?
We will work on the tutorial
@@WebSensePro I am also waiting for this sir, would be awesome!
hey my friend thanks for you work, unfortunately it doesnt work for dawn 12.0.0 theme
Code is tested multiple times on Dawn 12.0.0
Could it be that the error is coming from the color-option.liquid file ? (color swatch on product page from another video of you
) @@WebSensePro
@@WebSensePro hello, thank you for this tutorial, the previous one worked very well. Will this one work on Dawn 13? Thank you
The colour swatches aren't showing on the collection page, however, I have all my colour variants showing on the collection page, does this code not work if thats the case? thank you
Colour swatches arent showing but color variants are?
It no longer works on dawn 15.1. But thanks for your work!
Updated tutorial coming next week
brother, i want to shows swatches after the product title and price. How do i within this tutorial?
Will create a tutorial on this
It show variant images as swatches. Why its not showing colors as swatches like on product page?
Will add that feature too
Any update on this? Code works but for my business seeing the color swatch is better
@@pebbles8210Yes for me too.
Will you publish the Video soon bro ?
if i have more color swatches it is showing in two or more rows how to show in single row and if we have more color swatches then remaining color swatches to show as indicator like +2, or +5 or +10 remaining swatches please reply
You can reduce swatches size from Customize settings
@@WebSenseProkindly tell him please how can I do this kindly
it worked but when we click on choose option, it makes the button inactive and we have to go to product page to add it to cart
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
it's not working on Dawn 15.0.0 please can you have look for updated theme
Update in progress
Sir it's not working on dawn theme kindly check this
Tested and checked, working fine for us
Thanks Bilal!
You welcome
Hey dear link don't show kindly check this matter and update
websensepro.com/blog/swatches-on-shopify-collection-page/
Love you sir
Love you too
brother make it as color swatches not as image swatches and mobile optimized it's looks bigger on mobile
Will create updated tutorial
I have managed to add the color swatches, however the picture doesn´t change when I click on the color swatches. Any advice of what can be the problem? I am using Dawn 12
Did you disable zoom on hover?