You were asking for clickable swatches, and we finally have it out! I hope this helps you all. If you find it helpful it would mean a lot if you could like and subscribe :). Thank you!
Glad you like it! What would you like to see with the size chart? If it's to create one, does this help? help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart. If you're looking for something else, let me know!
It's great! Im having trouble with formatting after the edit of the product-variant-picker. "Attempting to close HtmlElement 'variant-radios' before LiquidTag 'for' was closed" start line 28 end line 76. Please help me
product-variant-picker isn't actually modified for the collection swatches, but it is if you want the swatches to show up on the product page then you should follow the instructions in this video: th-cam.com/video/-rae4yF1nMQ/w-d-xo.html Assuming you're following the correct set of instructions, then the error is because you're missing an endfor or you've added an additional for loop. If I had to guess, you may have copy+pasted an extra {%- for option in product.options_with_values -%}, when really you should only be adding code to surround that line. Hope that solves your problem!
Good afternoon, thanks for the contribution, if I would like the same, but that the variants carry the color, but with this same format, because in the other video when I press a variant always takes me to the first variant of the product, how could I modify it?
Firstly I followed all steps for collections, products, search pages and it works really well! Only things I have noticed: - Collections don't work well with the quick button feature. - When you click back from the product page - the swatch selector remains (which is good). However the image is not updated. - For product page - when you have a complementary product and enable quick button feature - it opens. However the variant name is not updating on selected color. Again, hats of to you. It is a really neat solution.
Hi prompted, I have followed every step, but it doesnt work on my site, it mite be the problem with Metaobject , I only have two variant, size and color, how do I change in the variant swatch mapping json there, Im using dawn 12, appreciate your help.
Are you getting the swatches to show up but your swatch images aren't found? Some common errors are: - JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension) - The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url)
One question I did have which may have been asked below is, what if on the title page I wanted the swatch to display only the color and not the .jpg? I have a 300x300px file uploaded of just the swatch color and it is pointed in my metaobject, which works when on the selected product, but not on the collection overview.
You can use this with size swatches, but it's designed to show only 1 variant option only. We actually have an updated version of this tutorial: th-cam.com/video/e9EtEe4zKpE/w-d-xo.html
Glad you like it! Re: the 100 variant limit, if your variants are organized under different categories (ex: size + color + type), you can split out a subset of them and make them a different product entirely, and then link those products together like variants. We did a tutorial on how to do this: th-cam.com/video/AIufjwcEBMM/w-d-xo.html. Check it out and let me know if it works!
Hello! Thank you so much for this video, this is super helpful! I was following along and noticed something with my theme. I am using the Brooklyn theme and can't don't have the "main-collection-product-grid", when I do a search nothing comes up. My theme allows for multiple collections to exist on the website at the same time. I don't want to edit the wrong item - could you clarify how I can utilize this in the Brooklyn theme? Got stuck on that piece, you talk about it at 4:50 mark in the video. Any assistance is appreciated!
Thanks for checking out our videos! Unfortunately the Brooklyn theme is an older Shopify 1.0 theme. This customization was designed with the newer Shopify 2.0 themes, so you wouldn't be able to directly follow this unless you upgrade to one of the newer themes (ex: Dawn, Refresh, Sense, etc). You can see all the free Shopify themes here: themes.shopify.com/collections/free-themes It's a bit of work to change your theme over to the new ones, but the advantage is you get a lot of new features! You'll also get to start using all of the customizations we share on our channel too :)
This likely means that your image files aren't found. Some common reasons for that are: - JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension). - Variant names don't perfectly match. They should be case sensitive - The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url) Hope one of these solves your problem!
@@theprompted I was the url. I had changed it to mine. But since I don’t use “myshopify” in my original url hadn’t removed that. When I removed “myshopify” in the url in the coding it worked. THANKS AGAIN!
Hey Promted, I have a question I can't solve. I have sizes from XS-4XL. When I add all of my variants and put 1 into the inventory for all of the sizes my swatch on the outside page displays with a red line through it. Could you please point me in the direction of the page I would need to update my sizing list on? Troubleshooting performed: When I remove the inventory for everything expect small, medium, or large it displays perfectly, which leads me to believe I messed up the sizing somewhere.
Try adjusting the numbers for the "Available" and "On Hand" fields so that those are both >0. Also try different numbers (ex: 10), to make sure you're not updating the inventory incorrectly. To make sure it's not a swatch problem, you can install a brand new fresh Dawn theme, preview it, and check to see if it's also showing inventory unavailable.
@theprompted I followed your tutorial to the end. There are three issues I came across while implementing ---(1). In tutorial, card-product background color is white hence everything looks ok after we add swatch. However, if card background color is not white than there is some weird issue when card is displayed on collection page. Issue is - each card displayed will appear to be visual broken in two pieces with color swatch separating upper and lower portion i.e. Upper portion = Image and swatches , Lower portion = Other card information. ---(2) Original Sample Cards displayed in tutorial have Title and Price - only two fields displayed. Hence, height of all cards appear same after adding swatches. But in real life, if we choose to say add a fourth field e.g. display of star rating then it is having an issue. This is because all product may not have star rating in real life. Due to this, height of card appears different. --(3) If Quick add is enabled in customisation, Add to cart button appears. But when this button is clicked on Collection page, nothing happens i.e. the clicked button becomes disabled and in console it says : Uncaught TypeError: can't access property "classList", this.querySelector(...) is null and flagging error at this.querySelector('.loading__spinner').classList.remove('hidden'); in product-form.js.
Thanks for pointing out these issues! It sounds like you have a more specific set of customizations that all need to work together. Unfortunately this code was designed as a simpler implementation that the majority of people can use. You could try some workarounds: 1) Use a white background 2) Does the star rating behave differently with this solution compared to without it? Doesn't the star rating affect the card height even without the swatches? 3) Turn off Quick Add (you could also try the older implementation where the swatches aren't clickable: th-cam.com/video/jX7bjIG9nPw/w-d-xo.html) If the background, star rating, and quick add features are more important than the swatches, then unfortunately you may need to either adapt the code to work for your store or not use this implementation for now. Hopefully you or someone else can help solve this and share the solution for us all! Until then, I've added these issues to our queue to find a solution, but I can't promise that I'll get to it soon unless more people comment that they have the same problem. I hope you understand!
@@theprompted with star rating and without this implementation, card height remains uniform. Though I am not wizard like yourself but I will try to debug and share if found some solution. One more thing, TH-cam do not have tutorial for vertical grid collection page. You may try. I am working on it but again not wizard like yourself.
@@theprompted -You need to add somewhere that Title image of product should be equal to first color of variant. This is because otherwise last image of variant color is displayed, while first swatch remains selected ! First I could not wrap around this, than found out this issue. -Also, in variants - color should appear as first variant and size material etc afterwards. If this is not done than swatch is not properly picking up png images. -Except quick add to card, i could resolve issue by following changes -Modify base.css product-card-wrapper .card, contains-card-product class for removing border radius. - Modify following in main-collection-product-grid.liquid ----rest of the code ---- {%- for product in collection.products -%} {% assign lazy_load = false %} {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- endif -%} ----rest of the code ---- - Modify card-product-custom.liquid ---rest of the code --- {%- assign difference = card_product.compare_at_price | minus: card_product.price -%} {%- assign float_difference = difference | times: 1.0 -%} {%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%} {%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- 'products.product.on_sale' | t -}} {% comment %} VC Badge on collection start. - This is my first own if endif statement and for statement, - % Discount will be displayed if card has single product. - In case variants are available, first variant which is available that discount will be displayed. If say 1st variant is unavailable, 2nd variant discount and so on {% endcomment %} {% if card_product.has_only_default_variant %} : {{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price -}} % OFF {% else %} {% for variant in card_product.variants %} {% if variant.available == true %} : {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price -}} % OFF {% break %} {% endif %} {% endfor %} {%- endif -%}
Thank you for the amazing tutorial, I just have one problem which I can't get solved: If I add the code (as shown in the video) to the featured collection the color swatches appear but when I click on the color the the T-Shirt color won't change. For example: The T-Shirt is set to wwhite and when I click on black nothing happens - same with the others colors it simply won't change. I have checked if I did something wrong but I tried it 4 times now and it still stays the same - has someone a idea why this is like this?
Sorry that you're having trouble with this! If clicking the swatches doesn't work, it's likely something to do with the javascript. I would double check the following: - card-product-variant-selection-custom.js file was created properly as an asset - the data-section-id parameter was added to the element with class grid product grid - script was added to the bottom of main-collection-product-grid.liquid
For the record whoever is going to use the code , to be pasted for main-collection-product-grid.liquid and to be pasted in featured-collection.liquid is different. Don't copy paste thinking they are one and same. If done that way - either collection swatch or featured product swatch will not work. In fact, all three scripts to be pasted are different.
there is an issue, Sir. I have implemented infinite scrolling on collection page, the swatches stops working after second page loads automatically....Can you help ?
How did you add the infinite scrolling? Where I would look is at how the infinite scrolling code adds additional products, and the custom code you used to modify the first page of products would need to be implemented to the subsequent pages too. Regardless whether the infinite scrolling was added through an app or custom code, it's hard to figure out how to get the two to coordinate without troubleshooting directly in your store. If you're not comfortable with that troubleshooting yourself, my recommendation is to decide between one of the customizations and just use that one for now.
@@theprompted I found the issue but do not know how to implement. The problem with shopify is even if loop through entire collection, it loads products which are being displayed right now. Makes sense for optimisation. However, as side effect varaintDataMap (in code you kindly provided) is not getting refreshed when infinte scroll via ajaxinate is implemented. This is because ajaxinate loads DOM vian ajax directly bypassing shopify's default pagination logic. So two way I could figure out but could not code are 1. Use callback in ajaxinate 2. Some how make some listner which will refresh varaintDataMap variable on each scroll. But again, I don't know how to code either of this exactly.
Oof sorry that it's not working for you. Have you tried using a fresh install of Dawn? There could be a number of different reasons, but with a fresh install you can at least eliminate it being because you have other customizations that may be interacting with the code.
I am able to create swatches from someother route. However, I am not able to assign click event to the individual swatch and on clicking swatch actually hyperlinke of product gets activated and product page open. Any guidance to catch click before product card catches it ?
If you try to build your own method, then there's a lot of different problems you have to solve for, including this problem you're running into now. Changing the swatches is more than just the visual aspect - you have to also link the buttons to the proper variant so that all the pricing, images, and add to cart functionality work as well. The best and simplest suggestion I can give you is to follow the method in the video instead, since I've already considered those issues.
@theprompted I followed your tutorial to the end. There are three issues I came across while implementing ---(1). In tutorial, card-product background color is white hence everything looks ok after we add swatch. However, if card background color is not white than there is some weird issue when card is displayed on collection page. Issue is - each card displayed will appear to be visual broken in two pieces with color swatch separating upper and lower portion i.e. Upper portion = Image and swatches , Lower portion = Other card information. ---(2) Original Sample Cards displayed in tutorial have Title and Price - only two fields displayed. Hence, height of all cards appear same after adding swatches. But in real life, if we choose to say add a fourth field e.g. display of star rating then it is having an issue. This is because all product may not have star rating in real life. Due to this, height of card appears different. --(3) If Quick add is enabled in customisation, Add to cart button appears. But when this button is clicked on Collection page, nothing happens i.e. the clicked button becomes disabled and in console it says : Uncaught TypeError: can't access property "classList", this.querySelector(...) is null and flagging error at this.querySelector('.loading__spinner').classList.remove('hidden'); in product-form.js.
I have my product name center aligned and would like to center align the swatches instead of having them on the left. What would I need to change in the code to do this?
You can try this: go to your Theme Editor --> Collections --> Default Collection. Then select Product Grid, and then enter the following css code into the "Custom CSS" area: .collection-product-card__variants { justify-content: center; }
HI, You explained so well and everything is going pretty well but the sale badge are changing in to the discount percentage can you resolve that cz I want to write some thing in it like New! or any thing if you can help out with that so it would be great. Thanks
Can you give more details about the problem you're having? I'm assuming you've already gone through the sale badge video (th-cam.com/video/ZEr_vSZwo1M/w-d-xo.html) - you might need to re-implement it because we changed the collection page collection file. You can just follow the sale badge video and where we added the "{{- discount_percentage }}% OFF", you can change the text to anything you want. If you want multiple badges (ex: for it to say New in one badge and Sale in another), then that's something I have on my list to look into.
Hi, I have changed the text from the shopify content area but that edited text is just showing on the related products and on the main product page but not on the featured collection section on home page, search page and on the collection page I have seen that video which you refer me but it did not work I think the code of swatches on those area which you have provided are changing that sale badge text in to the discount percentage. Thank you @@theprompted
Hello! There's a way to center the preview color swatches on the Collections page with your image? I tried changins margin on the card-variant-swatch-custom.liquid but thats the margin between colors. I want to center all of them.
Try this: go to your Theme Editor, select Product Grid, and then enter the following css code into the "Custom CSS" area: .collection-product-card__variants { justify-content: center; }
Hi is there a way to show images of the selected variant only, so if I have 16 images, 4 per color, if I click the color it will only show the 4 related color images?
Just wanted to let you know that we have a new video out that modifies the product page to only show the selected variant's images. You can check it out here: th-cam.com/video/qxwo-zd8l80/w-d-xo.html. Thanks for the suggestion! Keep them coming.
Thanks a lot for your helpful videos. However, the question I have is what do I have to do if I want to display the colors of the respective products? (Only colors without JPG and the number of colors varies depending on the product)
I'm glad it helps! If you want to use colors, the easiest thing to do is create image (ex: JPG) files of the color you want to use. So if you want to use Red, just create a file of a red square and upload that for use. You only need to do it once per unique color option. The code will look for whatever color options you have in your JSON entry and only replace those.
Unfortunately this solution was designed for the free Shopify themes, so it might not work with Impulse. I would suggest reaching out to the theme developer, Archetype, to see if they have a solution. If it's for the product pages, they already have a native way of adding swatches: help.archetypethemes.co/en/articles/2765
Hi. I have been following you for some weeks and your channel is just amazing with all the new features you provide and the video explanations. I have been adding your custom badges code and later I tried your product and collection swatches. Independently, each one work perfect (Dawn 14.0) but when I try to use them together it just not work. I cannot have the badges and the swatches showing up at the same time. I reallized that custom badges works with the card-product.liquid and in the swatches feature you add a new card-product-custom.liquid. I tried to add the updated code for the swatches in the product-card.liquid but then it renders the badges outside the product image in the collection. Any clue on how I could use both features at the same time? Thanks in advance
Thanks for following! Appreciate the kind words. This will require some additional development work, but fyi a new version of the collection swatches will be coming out soon, which modifies the original card-product.liquid file instead of using a custom one. Hopefully that will solve your issue. But if you need any development help, we are available for hire now - you can check it out at theprompted.co/hire-us
I mean color swatches for the "Related Products" collection that shows up at the bottom of the product page. I attempted to duplicate the steps for the search and featured collections to the related-products.liquid like so: 1) added the data-section-id="{{ section.id }}" to the unordered list, 2) changed the list item grid to card-product-custom and added the secion_id reference, and 3) copied the script code to the bottom but changing it to loop through section.settings.recommendations.products. I'm seeing the color swatches but they don't actually change. No javascript errors detected either.
Got it! Yes the related products are rendered a bit differently, which is why I didn't include it in the video. Haven't gone back to it yet but will add that to our to-do list.
Thank you for all of the free knowledge. I just replicated your videos onto Dawn 13 and it seems like the swatch selection in the product page no longer is working for me with V.13. The swatch selection collection page works, but once inside the product page it no longer functions.
I found a solution: in file "media-gallery.js" need to comment this: "activeMedia.scrollIntoView({behavior: 'smooth'});" like "if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') { //activeMedia.scrollIntoView({behavior: 'smooth'}); }"
This is for when the page scrolls slightly, right? This has been fixed in the latest version of the themes, but for older ones, you can try to comment out the line "activeMedia.scrollIntoView({behavior: 'smooth'}); in media-gallery.js, by adding two backslashes (//) in front of it Edit: just saw that you responded with your own solution. Glad you figured it out!
@@theprompted I know... but, I was thinking about a way to use the HEX codes with the Metaobject instead uploading multiple and different images for each color
Unfortunately I took that option out to simplify the solution. But if you want to have just the color, the easiest way is to create individual images of the color and use those instead. If you want to still use the color hex code, then some update to the code and metaobjects are needed. While this is for a different use case, you can follow this video as a template on some of those changes: th-cam.com/video/ZFnUWVdSHOI/w-d-xo.html But I'll add this feature to my list for a future update!
@@theprompted So I tried this and added them into the metadata and swatches are not changing to those images... Any idea why? They still show the featured image of the specific variant.
This likely means that your image files aren't found. Some common reasons for that are: - JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension). - Variant names don't perfectly match. They should be case sensitive - The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url) Hope one of these solves your problem!
It's only designed for 1 product variant, but it can be adapted to work with multiple variants! Just requires some additional code on top of what's already there. I'll add it to the list of additional customizations and if we have time to make this update we'll let you know!
It's only designed for 1 product variant, but it can be adapted to work with multiple variants! Just requires some additional code on top of what's already there. I'll add it to the list of additional customizations and if we have time to make this update we'll let you know!
@@theprompted Thanks a lot for your answer :D it took me really the whole night working with chat gpt to get it done and apparently hefound a simple way to do it, you just have to past a snippet code at the right place : {% for variant in product.variants %} {% if variant.available %} {{ variant.title }} {% else %} {{ variant.title }} {% endif %} {% endfor %}
The code as it stands does not change the price, but that's a good suggestion! Will take a look at that. By default, if the product has multiple different prices, it will say "From $XX.XX" to show that there's more than one price.
@@theprompted Yes it will show from $XX but it will be great for it to change prices according to which size I pick on the collection page instead of only the product page. I hope you find a solution!
You were asking for clickable swatches, and we finally have it out! I hope this helps you all. If you find it helpful it would mean a lot if you could like and subscribe :). Thank you!
Thank you man for this pure value. Can you make a tutorial for size chart ?
Glad you like it! What would you like to see with the size chart? If it's to create one, does this help? help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart. If you're looking for something else, let me know!
It's great! Im having trouble with formatting after the edit of the product-variant-picker. "Attempting to close HtmlElement 'variant-radios' before LiquidTag 'for' was closed" start line 28 end line 76. Please help me
product-variant-picker isn't actually modified for the collection swatches, but it is if you want the swatches to show up on the product page then you should follow the instructions in this video: th-cam.com/video/-rae4yF1nMQ/w-d-xo.html
Assuming you're following the correct set of instructions, then the error is because you're missing an endfor or you've added an additional for loop. If I had to guess, you may have copy+pasted an extra {%- for option in product.options_with_values -%}, when really you should only be adding code to surround that line.
Hope that solves your problem!
Good afternoon, thanks for the contribution, if I would like the same, but that the variants carry the color, but with this same format, because in the other video when I press a variant always takes me to the first variant of the product, how could I modify it?
Firstly I followed all steps for collections, products, search pages and it works really well!
Only things I have noticed:
- Collections don't work well with the quick button feature.
- When you click back from the product page - the swatch selector remains (which is good). However the image is not updated.
- For product page - when you have a complementary product and enable quick button feature - it opens. However the variant name is not updating on selected color.
Again, hats of to you. It is a really neat solution.
Thanks for pointing these issues out! Will have to look into them to find a solution.
Hi prompted, I have followed every step, but it doesnt work on my site, it mite be the problem with Metaobject , I only have two variant, size and color, how do I change in the variant swatch mapping json there, Im using dawn 12, appreciate your help.
Are you getting the swatches to show up but your swatch images aren't found? Some common errors are:
- JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension)
- The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url)
Thank you so much! You're a true gentlemen and Shopify scholar.
One question I did have which may have been asked below is, what if on the title page I wanted the swatch to display only the color and not the .jpg? I have a 300x300px file uploaded of just the swatch color and it is pointed in my metaobject, which works when on the selected product, but not on the collection overview.
I was scared to edit any scripts or information and i watched this video and the product variant video and it all worked great!!! Thank you!!!
Love hearing this! Glad it worked for you!
Hello!! And thank u…
This it works with size swatches???
And the add to cart button in collection (with products with more 1 variant?)
You can use this with size swatches, but it's designed to show only 1 variant option only. We actually have an updated version of this tutorial: th-cam.com/video/e9EtEe4zKpE/w-d-xo.html
Great customisation however my products have too many variants , do you have any suggestion for this 100 limit?
Glad you like it!
Re: the 100 variant limit, if your variants are organized under different categories (ex: size + color + type), you can split out a subset of them and make them a different product entirely, and then link those products together like variants.
We did a tutorial on how to do this: th-cam.com/video/AIufjwcEBMM/w-d-xo.html.
Check it out and let me know if it works!
Hello! Thank you so much for this video, this is super helpful! I was following along and noticed something with my theme. I am using the Brooklyn theme and can't don't have the "main-collection-product-grid", when I do a search nothing comes up. My theme allows for multiple collections to exist on the website at the same time. I don't want to edit the wrong item - could you clarify how I can utilize this in the Brooklyn theme? Got stuck on that piece, you talk about it at 4:50 mark in the video. Any assistance is appreciated!
Thanks for checking out our videos!
Unfortunately the Brooklyn theme is an older Shopify 1.0 theme.
This customization was designed with the newer Shopify 2.0 themes, so you wouldn't be able to directly follow this unless you upgrade to one of the newer themes (ex: Dawn, Refresh, Sense, etc). You can see all the free Shopify themes here: themes.shopify.com/collections/free-themes
It's a bit of work to change your theme over to the new ones, but the advantage is you get a lot of new features! You'll also get to start using all of the customizations we share on our channel too :)
Awesome! Thanks a lot! I only have one problem. My swatches are all white. Do you know what I might have done wrong?
This likely means that your image files aren't found. Some common reasons for that are:
- JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension).
- Variant names don't perfectly match. They should be case sensitive
- The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url)
Hope one of these solves your problem!
Ok thanks a lot I’ll try! And thanks for doing these videos!
@@theprompted I was the url. I had changed it to mine. But since I don’t use “myshopify” in my original url hadn’t removed that. When I removed “myshopify” in the url in the coding it worked. THANKS AGAIN!
Hey Promted, I have a question I can't solve. I have sizes from XS-4XL. When I add all of my variants and put 1 into the inventory for all of the sizes my swatch on the outside page displays with a red line through it. Could you please point me in the direction of the page I would need to update my sizing list on?
Troubleshooting performed: When I remove the inventory for everything expect small, medium, or large it displays perfectly, which leads me to believe I messed up the sizing somewhere.
Try adjusting the numbers for the "Available" and "On Hand" fields so that those are both >0. Also try different numbers (ex: 10), to make sure you're not updating the inventory incorrectly.
To make sure it's not a swatch problem, you can install a brand new fresh Dawn theme, preview it, and check to see if it's also showing inventory unavailable.
@theprompted I followed your tutorial to the end. There are three issues I came across while implementing
---(1). In tutorial, card-product background color is white hence everything looks ok after we add swatch. However, if card background color is not white than there is some weird issue when card is displayed on collection page. Issue is - each card displayed will appear to be visual broken in two pieces with color swatch separating upper and lower portion i.e. Upper portion = Image and swatches , Lower portion = Other card information.
---(2) Original Sample Cards displayed in tutorial have Title and Price - only two fields displayed. Hence, height of all cards appear same after adding swatches. But in real life, if we choose to say add a fourth field e.g. display of star rating then it is having an issue. This is because all product may not have star rating in real life. Due to this, height of card appears different.
--(3) If Quick add is enabled in customisation, Add to cart button appears. But when this button is clicked on Collection page, nothing happens i.e. the clicked button becomes disabled and in console it says : Uncaught TypeError: can't access property "classList", this.querySelector(...) is null and flagging error at this.querySelector('.loading__spinner').classList.remove('hidden'); in product-form.js.
Thanks for pointing out these issues! It sounds like you have a more specific set of customizations that all need to work together. Unfortunately this code was designed as a simpler implementation that the majority of people can use.
You could try some workarounds:
1) Use a white background
2) Does the star rating behave differently with this solution compared to without it? Doesn't the star rating affect the card height even without the swatches?
3) Turn off Quick Add
(you could also try the older implementation where the swatches aren't clickable: th-cam.com/video/jX7bjIG9nPw/w-d-xo.html)
If the background, star rating, and quick add features are more important than the swatches, then unfortunately you may need to either adapt the code to work for your store or not use this implementation for now.
Hopefully you or someone else can help solve this and share the solution for us all!
Until then, I've added these issues to our queue to find a solution, but I can't promise that I'll get to it soon unless more people comment that they have the same problem. I hope you understand!
@@theprompted with star rating and without this implementation, card height remains uniform. Though I am not wizard like yourself but I will try to debug and share if found some solution. One more thing, TH-cam do not have tutorial for vertical grid collection page. You may try. I am working on it but again not wizard like yourself.
@@theprompted
-You need to add somewhere that Title image of product should be equal to first color of variant. This is because otherwise last image of variant color is displayed, while first swatch remains selected ! First I could not wrap around this, than found out this issue.
-Also, in variants - color should appear as first variant and size material etc afterwards. If this is not done than swatch is not properly picking up png images.
-Except quick add to card, i could resolve issue by following changes
-Modify base.css product-card-wrapper .card, contains-card-product class for removing border radius.
- Modify following in main-collection-product-grid.liquid
----rest of the code ----
{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
----rest of the code ----
- Modify card-product-custom.liquid
---rest of the code ---
{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- 'products.product.on_sale' | t -}}
{% comment %}
VC Badge on collection start.
- This is my first own if endif statement and for statement,
- % Discount will be displayed if card has single product.
- In case variants are available, first variant which is available that discount will be displayed. If say 1st variant is unavailable, 2nd variant discount and so on
{% endcomment %}
{% if card_product.has_only_default_variant %}
:
{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price -}}
% OFF
{% else %}
{% for variant in card_product.variants %}
{% if variant.available == true %}
:
{{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price -}} % OFF
{% break %}
{% endif %}
{% endfor %}
{%- endif -%}
---rest of the code
Thank you for the amazing tutorial, I just have one problem which I can't get solved: If I add the code (as shown in the video) to the featured collection the color swatches appear but when I click on the color the the T-Shirt color won't change. For example: The T-Shirt is set to wwhite and when I click on black nothing happens - same with the others colors it simply won't change. I have checked if I did something wrong but I tried it 4 times now and it still stays the same - has someone a idea why this is like this?
Sorry that you're having trouble with this!
If clicking the swatches doesn't work, it's likely something to do with the javascript.
I would double check the following:
- card-product-variant-selection-custom.js file was created properly as an asset
- the data-section-id parameter was added to the element with class grid product grid
- script was added to the bottom of main-collection-product-grid.liquid
For the record whoever is going to use the code , to be pasted for main-collection-product-grid.liquid and to be pasted in featured-collection.liquid is different. Don't copy paste thinking they are one and same. If done that way - either collection swatch or featured product swatch will not work. In fact, all three scripts to be pasted are different.
Thx but how can I find a solution that I have the Color swatches on my featured Product section. Thx allready :))
there is an issue, Sir. I have implemented infinite scrolling on collection page, the swatches stops working after second page loads automatically....Can you help ?
How did you add the infinite scrolling? Where I would look is at how the infinite scrolling code adds additional products, and the custom code you used to modify the first page of products would need to be implemented to the subsequent pages too. Regardless whether the infinite scrolling was added through an app or custom code, it's hard to figure out how to get the two to coordinate without troubleshooting directly in your store. If you're not comfortable with that troubleshooting yourself, my recommendation is to decide between one of the customizations and just use that one for now.
@@theprompted appriciate your inputs. Trying to figure out the same. If found solution, will share here with your permission.
@@theprompted I found the issue but do not know how to implement. The problem with shopify is even if loop through entire collection, it loads products which are being displayed right now. Makes sense for optimisation. However, as side effect varaintDataMap (in code you kindly provided) is not getting refreshed when infinte scroll via ajaxinate is implemented. This is because ajaxinate loads DOM vian ajax directly bypassing shopify's default pagination logic. So two way I could figure out but could not code are 1. Use callback in ajaxinate 2. Some how make some listner which will refresh varaintDataMap variable on each scroll. But again, I don't know how to code either of this exactly.
Would that work with the newest update of Dawn v15.2.0?
We suggest using the latest version of our collection swatches instead: th-cam.com/video/e9EtEe4zKpE/w-d-xo.html
i followed the guide for the 3rd time now and did exactly everything 1:1 and the swatches still doesnt show up -_- do you have maybe a solution
Oof sorry that it's not working for you. Have you tried using a fresh install of Dawn? There could be a number of different reasons, but with a fresh install you can at least eliminate it being because you have other customizations that may be interacting with the code.
I am able to create swatches from someother route. However, I am not able to assign click event to the individual swatch and on clicking swatch actually hyperlinke of product gets activated and product page open. Any guidance to catch click before product card catches it ?
If you try to build your own method, then there's a lot of different problems you have to solve for, including this problem you're running into now. Changing the swatches is more than just the visual aspect - you have to also link the buttons to the proper variant so that all the pricing, images, and add to cart functionality work as well.
The best and simplest suggestion I can give you is to follow the method in the video instead, since I've already considered those issues.
@theprompted I followed your tutorial to the end. There are three issues I came across while implementing
---(1). In tutorial, card-product background color is white hence everything looks ok after we add swatch. However, if card background color is not white than there is some weird issue when card is displayed on collection page. Issue is - each card displayed will appear to be visual broken in two pieces with color swatch separating upper and lower portion i.e. Upper portion = Image and swatches , Lower portion = Other card information.
---(2) Original Sample Cards displayed in tutorial have Title and Price - only two fields displayed. Hence, height of all cards appear same after adding swatches. But in real life, if we choose to say add a fourth field e.g. display of star rating then it is having an issue. This is because all product may not have star rating in real life. Due to this, height of card appears different.
--(3) If Quick add is enabled in customisation, Add to cart button appears. But when this button is clicked on Collection page, nothing happens i.e. the clicked button becomes disabled and in console it says : Uncaught TypeError: can't access property "classList", this.querySelector(...) is null and flagging error at this.querySelector('.loading__spinner').classList.remove('hidden'); in product-form.js.
I have my product name center aligned and would like to center align the swatches instead of having them on the left. What would I need to change in the code to do this?
You can try this: go to your Theme Editor --> Collections --> Default Collection. Then select Product Grid, and then enter the following css code into the "Custom CSS" area:
.collection-product-card__variants {
justify-content: center;
}
@@theprompted This worked, thank you so much!!
HI, You explained so well and everything is going pretty well but the sale badge are changing in to the discount percentage can you resolve that cz I want to write some thing in it like New! or any thing if you can help out with that so it would be great. Thanks
Can you give more details about the problem you're having? I'm assuming you've already gone through the sale badge video (th-cam.com/video/ZEr_vSZwo1M/w-d-xo.html) - you might need to re-implement it because we changed the collection page collection file.
You can just follow the sale badge video and where we added the "{{- discount_percentage }}% OFF", you can change the text to anything you want.
If you want multiple badges (ex: for it to say New in one badge and Sale in another), then that's something I have on my list to look into.
Hi, I have changed the text from the shopify content area but that edited text is just showing on the related products and on the main product page but not on the featured collection section on home page, search page and on the collection page I have seen that video which you refer me but it did not work I think the code of swatches on those area which you have provided are changing that sale badge text in to the discount percentage. Thank you
@@theprompted
Hello! There's a way to center the preview color swatches on the Collections page with your image?
I tried changins margin on the card-variant-swatch-custom.liquid but thats the margin between colors. I want to center all of them.
Try this: go to your Theme Editor, select Product Grid, and then enter the following css code into the "Custom CSS" area:
.collection-product-card__variants {
justify-content: center;
}
@@theprompted It worked! Awesome thank you
Do you have an updated version of this for Dawn 15.0?
Updated swatch videos are coming soon!
Hi is there a way to show images of the selected variant only, so if I have 16 images, 4 per color, if I click the color it will only show the 4 related color images?
This would require another customization. It's not something that I have a solution for yet, but I've added it to the list!
Just wanted to let you know that we have a new video out that modifies the product page to only show the selected variant's images. You can check it out here: th-cam.com/video/qxwo-zd8l80/w-d-xo.html. Thanks for the suggestion! Keep them coming.
Thanks a lot for your helpful videos.
However, the question I have is what do I have to do if I want to display the colors of the respective products? (Only colors without JPG and the number of colors varies depending on the product)
I'm glad it helps! If you want to use colors, the easiest thing to do is create image (ex: JPG) files of the color you want to use. So if you want to use Red, just create a file of a red square and upload that for use. You only need to do it once per unique color option. The code will look for whatever color options you have in your JSON entry and only replace those.
@@theprompted Thanks, it hasn't quite worked for me so far but I'll keep trying. Nevertheless, thank you very much for the tip.
hi, is this also possible in impulse theme? i feel the impulse is totally different - its really hard for me to do it
Unfortunately this solution was designed for the free Shopify themes, so it might not work with Impulse. I would suggest reaching out to the theme developer, Archetype, to see if they have a solution. If it's for the product pages, they already have a native way of adding swatches: help.archetypethemes.co/en/articles/2765
Hi. I have been following you for some weeks and your channel is just amazing with all the new features you provide and the video explanations. I have been adding your custom badges code and later I tried your product and collection swatches. Independently, each one work perfect (Dawn 14.0) but when I try to use them together it just not work. I cannot have the badges and the swatches showing up at the same time. I reallized that custom badges works with the card-product.liquid and in the swatches feature you add a new card-product-custom.liquid. I tried to add the updated code for the swatches in the product-card.liquid but then it renders the badges outside the product image in the collection. Any clue on how I could use both features at the same time? Thanks in advance
Thanks for following! Appreciate the kind words.
This will require some additional development work, but fyi a new version of the collection swatches will be coming out soon, which modifies the original card-product.liquid file instead of using a custom one.
Hopefully that will solve your issue. But if you need any development help, we are available for hire now - you can check it out at theprompted.co/hire-us
I got this to work, but now I lost my "Quick Add" modal and functionality. Any ideas?
Thank you for pointing this out - I was able to re-create the issue. Will have to look into this and get back to you!
Any luck with this one? Thanks!@@theprompted
Any chance getting some code for the related products collection? I thought I almost had it based on a few modifications, but not quite.
What are you hoping to achieve with the related products?
I mean color swatches for the "Related Products" collection that shows up at the bottom of the product page. I attempted to duplicate the steps for the search and featured collections to the related-products.liquid like so: 1) added the data-section-id="{{ section.id }}" to the unordered list, 2) changed the list item grid to card-product-custom and added the secion_id reference, and 3) copied the script code to the bottom but changing it to loop through section.settings.recommendations.products. I'm seeing the color swatches but they don't actually change. No javascript errors detected either.
Got it! Yes the related products are rendered a bit differently, which is why I didn't include it in the video. Haven't gone back to it yet but will add that to our to-do list.
Thank you for all of the free knowledge. I just replicated your videos onto Dawn 13 and it seems like the swatch selection in the product page no longer is working for me with V.13. The swatch selection collection page works, but once inside the product page it no longer functions.
Thanks for letting me know, I'll have to look into this. In the meantime do you have a v12 to work with?
fyi - I just made an update to the product and collection code links to include code that is compatible with v13. I hope this helps!
Is it possible to dissable scroll effect which scrolls to the image while clicking on variant?
I found a solution:
in file "media-gallery.js" need to comment this: "activeMedia.scrollIntoView({behavior: 'smooth'});" like
"if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
//activeMedia.scrollIntoView({behavior: 'smooth'});
}"
This is for when the page scrolls slightly, right? This has been fixed in the latest version of the themes, but for older ones, you can try to comment out the line "activeMedia.scrollIntoView({behavior: 'smooth'}); in media-gallery.js, by adding two backslashes (//) in front of it
Edit: just saw that you responded with your own solution. Glad you figured it out!
@@theprompted yeeees, thanks a lot 😀. Also I added your video to my favorite. Good luck and keep going!
This worked! But now... How can I show just the color in the swatch istead of an image? Thanks in advance
Glad it worked! This approach was simplified to be used for any images, so the easiest way is to create simple images of the colors you want to show.
@@theprompted I know... but, I was thinking about a way to use the HEX codes with the Metaobject instead uploading multiple and different images for each color
It can be done, but requires some slight tweaks to the code. I took this approach with collection filters: th-cam.com/video/ZFnUWVdSHOI/w-d-xo.html
Does it still work with Dawn 13 and the Winter Update?
Yes, should work with Dawn 13. Just need to use the v13 version from the code link
how can we show just the color instead of the images as we did with the product page?
Unfortunately I took that option out to simplify the solution. But if you want to have just the color, the easiest way is to create individual images of the color and use those instead.
If you want to still use the color hex code, then some update to the code and metaobjects are needed. While this is for a different use case, you can follow this video as a template on some of those changes: th-cam.com/video/ZFnUWVdSHOI/w-d-xo.html
But I'll add this feature to my list for a future update!
@@theprompted So I tried this and added them into the metadata and swatches are not changing to those images... Any idea why? They still show the featured image of the specific variant.
This likely means that your image files aren't found. Some common reasons for that are:
- JSON code doesn't match the uploaded filename (ex: wrong filename or no file extension).
- Variant names don't perfectly match. They should be case sensitive
- The base_store_files_url in product-variant-swatch-custom.liquid hasn't been updated with your own myshopify url (ex: you left //YOUR-SHOP-NAME.myshopify.com/cdn/shop/files/' as default without replacing it with your actual store url)
Hope one of these solves your problem!
Does this work on multiple product variants in the same page ?
I'd like to know this too?!
It's only designed for 1 product variant, but it can be adapted to work with multiple variants! Just requires some additional code on top of what's already there. I'll add it to the list of additional customizations and if we have time to make this update we'll let you know!
It's only designed for 1 product variant, but it can be adapted to work with multiple variants! Just requires some additional code on top of what's already there. I'll add it to the list of additional customizations and if we have time to make this update we'll let you know!
@@theprompted Ok thank you, if you could show us how that would be so amazing! 🤞🤞🤞
How can i show the size variant on the collection page?
You can update the variant_option_name variable in card-product-custom.liquid. I explain this and show an example at 12:00.
@@theprompted Thanks a lot for your answer :D it took me really the whole night working with chat gpt to get it done and apparently hefound a simple way to do it, you just have to past a snippet code at the right place :
{% for variant in product.variants %}
{% if variant.available %}
{{ variant.title }}
{% else %}
{{ variant.title }}
{% endif %}
{% endfor %}
Is there a way to change the price when changing through the swatches
The code as it stands does not change the price, but that's a good suggestion! Will take a look at that.
By default, if the product has multiple different prices, it will say "From $XX.XX" to show that there's more than one price.
@@theprompted Yes it will show from $XX but it will be great for it to change prices according to which size I pick on the collection page instead of only the product page. I hope you find a solution!
I've added it to the queue :)
Do you have a code for v14?
Coming soon - stay tuned!
where to get code from ?
Link is in the description
Amazing
The link isnt working
Which link are you referring to? Please share so we can review and fix. Thanks!
Thanks bro BIG help
You're welcome!