How To Add Swatches On Collection Page?
ฝัง
- เผยแพร่เมื่อ 27 ก.ค. 2024
- Swatches On Collection Page
In today's tutorial, I'll guide you through the process of adding image swatches to your collection page. This feature will enhance the visual appeal of your products and improve your Shopify store's user interface.
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Blog: websensepro.com/blog/swatches...
Swatches On Product Page
• How To Add Color Swatc...
Timestamps:
00:00 - Introduction
01:33 - Special Offer for New Shopify Users
04:35 - Disabling Hover Effect on Collection Page
06:36 - Adding Custom Snippets and Assets
08:10 - Adding Custom Assets
08:25 - Adding Swatches to Featured Collection Page
12:50 - Finalizing with Schema Settings
13:57 - Previewing the Results
14:25 - Adding Swatches to Search Page
19:50 - Conclusion
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us - วิทยาศาสตร์และเทคโนโลยี
![How To Show Selected Variant Images [Dawn 14.0.0]](http://i.ytimg.com/vi/FHzBvy85ais/mqdefault.jpg)
![How To Add Lookbook Section in Shopify [Without APP]](/img/n.gif)
Thank you. Looking forward to more tutorials in the near future..
You're welcome!
OMG!!!! THANK YOU VERY MUCH FOR THIS VIDEO! MY E-COMMERCE IS SOO COOL NOW. I WISH YOU THE BEST. THANKS
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
Thanks Bilal!
You welcome
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
Love you sir
Love you too
Thank you for sharing this! it's very helpful. How can I center swatches to align with the thumbnail image?
With some more codes 😀😀
It's very useful video! Requesting a tutorial for add multiple variation images to the product.
Will do soon
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.
Any plans for an update on this for Dawn 13.0.x?
Sure, if more demanded
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
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
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
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
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
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?
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!
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
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?
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, 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
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
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
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
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
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!
Can you please show how to add a transparent and sticky header for dawn 12.0.0
Sure, will create a video on that
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 make a quick add to cart button after selecting the swatches please?
great suggestion
Can I still hope for a custom accordion on footer? 🙃 Thanks, teacher!
Collapsible footer is coming shortly, stay tuned
Sir it's not working on dawn theme kindly check this
Tested and checked, working fine for us
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
Hey dear link don't show kindly check this matter and update
websensepro.com/blog/swatches-on-shopify-collection-page/
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 ?
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