Wanted to clarify something based on the comments below. Some people are expecting that they will see some fields under variants. You will either not see any fields or if there are fields there that you did not add, those were probably added by some app you installed. So in order show whatever data you want to show on the product variant, you will have to add that field yourself to the variants. In my case I added TestVariantField, TestVariantField2 and VariantDetailsUrl. And then you can see in the code I am using those same fields. So which ever field you add, you will have to change the code to get that field data to show. Hopefully this clears up some the confustion around that. And also Metafields has been renamed to "Custom data" in the settings menu. You can also refer to this blog post on my website: www.shopifywebmyster.com/add-metafields-to-variants-in-shopify/
This is the MOST useful tutorial on shopify product variants on the internet, period. For beginners, there's definitely a learning curve trying to figure out where the code needs renaming to match custom metafields. After a few hours of trial and error, I managed to make this long-awaited edit to the store. You've just earned a subscriber :D
Thank you so much for this amazing free content. I just wanted to add a block of variation metafield so I can write description for each variant selected. Is there a way to add a multi-text block into my product page? Thank you so much.
Sorry, but I can not find the position in the main-product.liquid file and also not the position in the global.js file, which are mentioned in the video. Is there a development in this topic? I am using the DAWN Template 11.0.0. Is there another method for displaying metafields for variants? Who can help? - Thanks!
In the main-product.liquid file, you should find the other elements that you’ll want your variant fields to appear next to. Then put your new for variant fields before or after etc.
Is there a solution to get the variant metafield to display only if a product has the option "Continue Selling When Out of Stock" checked? I want to display a message that says "This variant/size is on backorder and ships within x time" only if "continue selling when out of stock" is checked for that variant. I highly appreciate your tutorial, it is the best I found on Variant Metafields. 🙌
Thank you thank you thank you. p.s. Do you know how to display metafields that aren't just text? I'm trying to display a "List of Products" field type, which shows the products contained within a bundle variant..
Hi, Firts off all, thank you for your content, it is amazing. Second time I have a problem with the code that you introduce in your video. If I fill up all the variants metafields, it will display all of the variant metafields data in the product page and it is not changing dynamicly If i pick a variant. I see all of the metafields data no matter which variant is selected. I use Dawn theme as you. What is the problem? Any idea? Thanks!
@Biyu Huang HI, I checked the document against video. I haven't found any difference. I see as well at product load all variants metafields displayed. Thank you for advice.
@@vasaramuse Yes I found the issue, I had put some old codes to one of my liquid, idk which one contains custom code. I just repost another theme version that contains less custom code that my last one. And It is worked at all. I recommend to you, try one your oldest dawn theme that doesnt contains any custom code.
Hi, great video! This is what i was looking for. Unfortunately, I can't find the code snippets where you have added the code. main.product.liquid doesn't exist there. I am using the empire theme. Do you have any idea how to add it.
Sorry for the delayed response. I am not familiar with Empire theme. May be it uses a different section type. Please check in product.json what is the type. In Dawn theme (as shown in video) it is main-product. If you see something different look for a file with the same name in sections folder and if you find it that would be the equivalent of main-product.liquid file for you.
Wanted to clarify something based on the comments below. Some people are expecting that they will see some fields under variants. You will either not see any fields or if there are fields there that you did not add, those were probably added by some app you installed. So in order show whatever data you want to show on the product variant, you will have to add that field yourself to the variants. In my case I added TestVariantField, TestVariantField2 and VariantDetailsUrl. And then you can see in the code I am using those same fields. So which ever field you add, you will have to change the code to get that field data to show. Hopefully this clears up some the confustion around that.
And also Metafields has been renamed to "Custom data" in the settings menu.
You can also refer to this blog post on my website:
www.shopifywebmyster.com/add-metafields-to-variants-in-shopify/
This is the MOST useful tutorial on shopify product variants on the internet, period. For beginners, there's definitely a learning curve trying to figure out where the code needs renaming to match custom metafields. After a few hours of trial and error, I managed to make this long-awaited edit to the store. You've just earned a subscriber :D
Glad to know it was helpful. Thanks for subscribing
@@Webmyster Hi, I experience the same issue. Is there any fix in place? I appreciate your help. Thank you
can you do a new version for this video because there is no metafield field when we clic the variants
Hi, will you have an update on this...because I see my files very different from yours at the moment. Thanks
Not working. cant find the lines in my theme.
This is unreal, so so helpful. Thanks so much! Subbed
How does this work on Shopify 2.0 themes, I do not have a global.js file ?
Can we do this same for prestige theme? any references? facing issue on variant change
Thank you so much for this amazing free content. I just wanted to add a block of variation metafield so I can write description for each variant selected. Is there a way to add a multi-text block into my product page? Thank you so much.
Sorry, but I can not find the position in the main-product.liquid file and also not the position in the global.js file, which are mentioned in the video. Is there a development in this topic? I am using the DAWN Template 11.0.0. Is there another method for displaying metafields for variants? Who can help? - Thanks!
In the global.js file, find “class VariantSelects” and you’ll see the onVariantChange() function inside.
In the main-product.liquid file, you should find the other elements that you’ll want your variant fields to appear next to. Then put your new for variant fields before or after etc.
Thanks Sir, How to make separate boxes for all this metafield
Is there a solution to get the variant metafield to display only if a product has the option "Continue Selling When Out of Stock" checked? I want to display a message that says "This variant/size is on backorder and ships within x time" only if "continue selling when out of stock" is checked for that variant. I highly appreciate your tutorial, it is the best I found on Variant Metafields. 🙌
Hi, thanks for the great explanation. I've got good hopes that this will solve our problem. Will this work for the theme CRAFT also?
Thanks!
It works!!! Thank you so much :D
Thank you thank you thank you.
p.s. Do you know how to display metafields that aren't just text? I'm trying to display a "List of Products" field type, which shows the products contained within a bundle variant..
Hi,
Firts off all, thank you for your content, it is amazing. Second time I have a problem with the code that you introduce in your video. If I fill up all the variants metafields, it will display all of the variant metafields data in the product page and it is not changing dynamicly If i pick a variant. I see all of the metafields data no matter which variant is selected. I use Dawn theme as you.
What is the problem? Any idea?
Thanks!
Did you find a solution to this? I am having the same issue. Thanks!
@Biyu Huang HI, I checked the document against video. I haven't found any difference. I see as well at product load all variants metafields displayed. Thank you for advice.
@@vasaramuse Yes I found the issue, I had put some old codes to one of my liquid, idk which one contains custom code. I just repost another theme version that contains less custom code that my last one. And It is worked at all. I recommend to you, try one your oldest dawn theme that doesnt contains any custom code.
Thanks for the video!
All of your codes are not in your doc.
Cheers!
Thanks for the input. I'll check
Hi, great video! This is what i was looking for. Unfortunately, I can't find the code snippets where you have added the code. main.product.liquid doesn't exist there. I am using the empire theme. Do you have any idea how to add it.
Sorry for the delayed response. I am not familiar with Empire theme. May be it uses a different section type. Please check in product.json what is the type. In Dawn theme (as shown in video) it is main-product. If you see something different look for a file with the same name in sections folder and if you find it that would be the equivalent of main-product.liquid file for you.
@@Webmyster Hey, I checked the code you have in the google doc but it is a different code to the one shown in the video
@@ivartorr1469 sorry for the delayed response. I have updated the doc.