shopify show metafields on product page

Shopify Product Page - Customization and Tips To Use Metafields

hey shopify users in this video i am,going to give you some tips about the,product page and also show you how you,can customize the product page on dawn,theme or any other theme to make better,use of the meta field so let's get into,it,so if you're using dawn theme or any of,the free themes you will see a section,like this where you can specify more,information about your product so,on the right hand side you're seeing i,have selected materials i should say,left hand side selected materials on,right hand side you'll see the details,where you can specify the value for,materials now if your,products have like the same material you,might just get away with specifying,something here and then that,same value is going to show for all,materials but,if not they're different materials then,you're going to have to make use of this,insert dynamic source,and you go in there,you will see,you can add a meta field i have some,added right here but i can go in here,and show you just in case you don't know,so here it will take you to these meta,fields in the settings you can also get,to this through the,main admin area but let's go into,products and i have already some fields,in here i am going to quickly add one,more,let's call this,materials,and,then down here you'll see this gets,populated you can give it a description,it's not required this is just for you,and then you have to,select,the content type when you click this,it's gonna be text,and,of course that should be right on top,right here so there's two types of text,values i'm selecting,um single line text and within single,line text you can do one value or list,of values i'll show you a list of values,later but let's just do this and save,now come back here and i am going to,refresh this,and on the right hand side you're seeing,material showed up so i'm going to,select that and,insert,and you can see it showed up like this,uh one thing here,you could do is maybe,like,this,okay then you could also pull this,all right let's save this,and right now you're seeing,probably nothing's gonna show because,there's no value for that product and,how you do that is,you have to go into the product,and i'm going to go and,say,this product here,and i have some other metafields here,i'm just going to specify materials here,say plastic,this,all right,so let's go here i'm going to reload,this page,and we go down here,and you can see,this showed up,um so,you might already know this but i wanted,to just mention this in case you don't,know your total beginner and,one thing i do want to mention here is,this you might be okay with but to me,it's like what's the point if you have,one,line of data to do this collapse and,this to me it doesn't make sense if you,have something like a paragraph showing,then this collapsible area makes sense,so,how,do we make this,better before i get into this let me,show you one more thing about the,meta fields,so here where i selected this materials,meta field i am going to,delete this and i am going to go in here,and now i am going to select a different,type of a meta field so let's go back,into add meta field,back into product,and i am going to go,and add a new meta feel again,materials,list,like this now this time leave this like,this and then of course description if,you want to put in anything in here,you're going to select single line but,this time you're going to do a list of,values,and then just,you can explore there's other criteria,here you can add restrictions here but i,am going to just save this as is for now,go back to customize area and reload,this,on the right hand side you're saying,material list so this time i'll select,that,insert,and i need to,get rid of the earlier one save it,and again we need to go specify values,for these so,i'm gonna go back in the,product,here material list,so if you go in here,metal,plastic,so you can see how it puts those values,in here now save this,so it puts the value separated by a,comma so it might be useful in some,cases now let's go back to what i,mentioned earlier this here to me still,doesn't make sense right collapse this,and it's just like to see just one line,so,what do we do so we want to just show,one line,and,you know some data related to your,product how do we show that so if you go,back to,our customize area,i want to show data separated from this,right it could be right down here,i could be up here so i am going to do,something let's say up here and we could,totally just do a,text field,and then,i'm going to drag this text field say,below price,right here and now,this text field,here you can change the text to,material,and then same thing as the dynamic,source we will go with,this thing single value,here,like that,you can see right here the value shows,up now you could also same way do the,list the same way right your material,just like we did earlier go select that,multi,value,meta field and then it will put it right,here with commas all right so this is,good this is all provided in here you,can use now i am going to step into a,bit more customization so,we can show all this data in a better,way so how we can do that so one thing,you notice here you might,you know,wanna,emphasize on some of this data here like,you can see these single values here you,cannot do anything with it it's just,like,you know you cannot bold it you cannot,basically do any selling nothing so,how do we achieve that so what i'm going,to show you first is how we can add a,rich text field and then present all,this data in a better way,so let's get into it,so,let's go to,code and if you're a total beginner of,course you will go into the code from,your main team and then you click on,here just edit code and it will take you,right here,and then in here you are going to go to,sections and then go to,main,product.liquid,and in main product liquid we are going,to go all the way down to the settings,and in here you will see,this text block right here so let's call,it block it's like a opening and a,closing bracket these are all blocks,like this,and uh,right after this hit enter and then i am,going to copy paste some code in here,which you guys can copy,and write this so make sure there should,be commas at the right place,like this,and,that's it so,save this,so we have added a setting now,what we need to do is also add an area,up here where,we can read that setting so how we are,going to do that is we will go to,line,it's around 248,i believe,actually truly it can be anywhere in,here,where um you have this four block going,on but i am going to just put it right,around 248,so i am,pasting some more stuff in here,right,this,format this a bit,okay so now we are reading that value,that the setting that we added now save,this and let's check this out,in here i'm going to refresh this page,down here now when i go to add block you,can see before we only had text now we,are seeing multi-line text that's what i,added and i am going to drag this up,right around the area where we had the,other text so i'm going to put it right,under it,and then on the right hand side you're,seeing look this is the field that,showed up now what i'm going to,do here is i am going to same way,to,material,and then,get that field,pull this,save this,you go,look over here,refresh this page,you can see,now,this is bolded,and you can,you know apply some styling to it um,so,let's get in a bit more into this wall,few things you can do,here you see there's a link and stuff,you might want to even,show something like,you know see,more details,you know you off the page you want to,send the user somewhere,you could link this to say some,page of yours like say,i will just go into say,pages,then promotions,and,something like that i'm just you know,using whatever you can,put in something what makes sense to you,save this,so just by adding this rich text field,you know you can do a lot more,than before so,we have the capability of doing this,down here,right but,we cannot do it,up here and only option we have to put,the text up here is the single line,which doesn't have all these options so,if you want to separate your,um,data you know presented separate than,the description in this area up here so,you can use,this,field that i showed you or you could,just use,these,down here just drag,these up to around this area like from,here you can just drag them up here,but then maybe you don't want this whole,you know tab that you can expand and,collapse maybe you just want to show,data like this so,um so then that that is not going to,work one more thing i want to show you,guys is that,you have say this link here and you,don't want the,customer to go away from this page you,want to show like a pop-up so they stay,on this page there is an existing,functionality in here,ad block right in here you'll see this,pop-up,and,right here it shows up down here i'm,going to move this up to,that area where we have the other text,and then,this way you can just,modify this to whatever you want here,and then you can select the page from,within here,that you want to open,and this way your,user doesn't go off away from this page,so,that's one more tip i want to give you,guys and,lastly,one more thing i want to say is that,this all,field data that you're adding this here,is,being used for every product so once you,specify any of this this means it's,going to show for every product,that is using the same product template,so,be aware that then you're going to have,to specify this value for every product,and,if you want some,products to not use this you,could just create a different template,for those products and that's how you,could get to show some information from,one product and not the other that will,be the most easy way to go about that,um or if you're comfortable with code,what you could do is just,create a,meta field that shares something like,this product has more details and then,tie that to this,metal line text field existing one,or create another one and then tie it to,that field so that information only,shows when that particular product has,the,data so i have more tips for you guys if,you want to show more data like this uh,for your variants like how are you going,to show that for one variant and not the,other so,this video is getting too long so please,let me know i will create another video,for that and thanks for watching the,videos subscribe to the channel please,like this video and i will see you in,the next video thank you

Congratulation! You bave finally finished reading shopify show metafields on product page and believe you bave enougb understending shopify show metafields on product page

Come on and read the rest of the article!