shopify how to add custom metafields for variant

a sharp failures in this video I am,going to show you how you can present,data related to your variants on the,product page with the help of meta,fields and also I'll give you some,customization tips related to it if you,haven't seen the first video I created,on the topic go please watch that that's,this part one right here what if you,have different variations of your,product and one of the variant has some,data specific,to that variant that you want to show,and how are you going to achieve that,now that will take a bit more,customization then let's do that,now before I move forward let's go take,a glance at the variant Metal Fields,that I had added so then here you're,seeing different meta Fields I added so,let's go check out a product so for,example I'm gonna go back to this,product here so in here not because this,is related to the variant I am going to,go into say blue here edit and just like,we added the meta field data before,all the way down here you can see,already there's all these fields these,are from the variant meta fields and,then I already have specified some,values in here and the same way you are,gonna go and specify your values for,your variance in here so now if I go,back to the other variant right now,you're saying here this is plastic and,unspecified field for this these two,fields and now I wanted to specify a,different value Mary your variants have,different data they you know that you,want to show and here I only have it for,this pink product and the all the others,are empty back to main Dash,product.liquid in here we are going to,add some more code let's go to line,around,397-ish,kinda around here,and,right around here so where you're seeing,this and unless so right after that I'm,going to paste this code now so,basically what's happening in here is,we're going to the variance and we're,doing some things we're hiding and,showing stuff like that but one thing,that you might want to really know and,focus on is this area what is this I,already have some of these fields added,to the meta field for the variant as you,can see I'm named them like test variant,whatever and then I am looking if that,value is there then relative to that I,am,showing that now,why is it important for you to,understand this here is that you might,have different fields right so you might,have Dimensions or something else so,make sure to change this to whatever you,are showing for the variant I have,material and then I am connecting that,to a field that I added then I have care,instructions then I have another field,that I also added a URL in the variant,and uh then I have relative code to show,that so one important thing I left out a,piece of code very important you need to,add this in for right after this diff,and then save,next what we're gonna do is go to,global.js which is in the assets folder,So within here look for global.js,right here,you are gonna go down to line 70,7771,that's around,right here,okay right here either you see you this,else condition right here so what you're,going to do is right before this update,options and where this closing bracket,is hit enter and you are going to add,this function,and then what you're going to do is,put this function right above right,around here so the same way this dot,this,and then close this bracket like,this and then one more thing you need to,do is in here you're going to paste this,so this is the line you're going to add,up here,and this down here and now save this and,then we need to add just a bit of CSS so,go to section mean,product.css in the assets folder I'm,going to go all the way down and I'm,going to paste a bit of,this custom,CSS,save this so back here on the page I'm,going to refresh this,and you can see down here,these fields showed up and blue selected,now let me select pink look at that no,more those fields show here just this,link shows this was the meta field that,was there if you guys remember now go,back to Blue again so there you go this,way you can present different data,related to your variants so the next one,I'm going to show you is how you can,show a pop-up here if you have any more,details to show for your variant so this,is different than the pop-up we saw,earlier that Shopify provides,in the customized area you see in here,there's this pop-up so this pop-up here,if you add this this is going to be,showing for uh every variant every,product it's going to be there at all,times so what I am going to show you is,like the pop-up that is connected to a,variant field that only shows when,the variant has some more detail so how,we are going to achieve that is first,let's go into our meta Fields area,so go into variants and you'll see this,field up here I've already added one it,is content type page so just to show you,how you're going to do that is name it,to whatever you want custom dot whatever,you want to name this this doesn't have,to be custom you can name it whatever,you want and then here in the uh,it's not gonna let me go let's do test,pop-up,and then in here you are going to select,type,page like this,and then you save it,so now you have a variant field in there,that is connected to a page this page is,going to be the content that's going to,show in the pop-up so now let's go back,into the code,foreign and down where we had this code,for custom variant Fields I am going to,add some more code,right here so this is what I pasted of,course I will leave a link where you can,copy this and there's a basically just a,modal showing and there's some code that,opens it and yeah it is kind of like a,lot of stuff going on here and let me,save this,and now next we're gonna go into CSS and,add a bit of CSS in here,so down here uh maybe you guys don't,have this I had added this to fix some,margins between that description that,was showing for the variants but this is,the most important one right here I,added so I add this at the end save,and now let's go back and check out,our variance where we need to specify,now what page we want to show so we will,go back into the product,so I'm gonna go into,ping edit,go all the way down,and I am using this field I had added,before this is the new one that we added,I already have this in code so I'm just,going to continue to use that so here,you can just change it to whichever page,you want to show I just have it tied to,privacy policy for now and uh so that's,it make sure whichever variant you want,to show that pop-up for you have to,select some page here otherwise of,course it's not going to show so go back,into,our page here and let's see so I had,added this for pink where is it,pink variant so let's go to I'm going to,refresh this page first so on Blue this,is just all stuff showing I click on,pink,and you can see right here there's this,pop-up field so this is what I had in,the code and then if you click this look,there's this privacy page so if you go,back to the code,you can see that in this code you will,see here right here this is the pop-ups,of course you can change this to,whatever you want this to say or you,could also just add another field or,something you know and then get the text,from there so that's it for now guys if,you like the video please leave me a,thumbs up and subscribe to the channel,and I will see you in the next video

Congratulation! You bave finally finished reading shopify how to add custom metafields for variant and believe you bave enougb understending shopify how to add custom metafields for variant

Come on and read the rest of the article!