shopify show metafields on product page

Using metafields to customize your Shopify product pageshey everyone it's Laura here with,fluorescen

Fluorescent Themes for Shopify

Updated on Jan 24,2023

Using metafields to customize your Shopify product pages

hey everyone it's Laura here with,fluorescent and today I'm going to walk,you through how to use metafields and,dynamic sources to make your product,pages smarter for your customers before,we dive in it's important to mention,that this functionality is only,available on Shopify stores using an os2,version theme to find out what version,your theme is and for instructions on,updating check out the link in the video,description below,let's get started with the basics what,is a meta field and how are they,different from Dynamic sources,well meta fields are extra data fields,built into Shopify that allow you to,store additional information for,products collections orders blogs and,Pages these fields can then be used to,display unique content on your site they,are accessed through your Shopify admin,and you don't need to edit the code,files to use them,an example of where meta fields are,useful is if a merchant who sells skin,care products wants to display their,ingredients or allergy information or a,merchant who sells Furniture wants to,display item Dimensions or shipping,details,because this information might be,different for each product meta Fields,allow you to display this unique data,for each individual product without,having to use multiple product templates,Dynamic sources on the other hand are,accessed in your theme editor and these,are what links the data you've stored as,a meta field to sections within your,theme pretty handy right,it might feel overwhelming at first but,I'm going to walk you through just how,easy it is to start using this feature,for our tutorial I'm going to show you,how we've used meta fields in our,stiletto demo shop to display materials,information in an accordion on the,product page the first step is to write,the metafield options in your Shopify,admin to do this we'll navigate to,settings and then meta fields and for,our example we'll click on products from,there let's click on ADD definition and,start building our new meta field,we'll add a name to the meta field but,describes what it will be used for in,our example this is where we'll describe,the Fabrics used so we'll name our meta,field materials,adding a description is optional and is,simply a description of the meta field,to help you input the correct values it,will appear in the Shopify admin but,will not be visible to customers,next we'll click on select content type,button and select text,and for this example we'll select,multi-line text click save and repeat,the process for as many meta Fields as,you want to use on your product page,you'll see here that we've already got,this meta field created so we're ready,to move on to our next step adding the,values into your product meta Fields,when you navigate to your products,listing you'll now see that metafield,sections are available at the bottom of,each page you'll see in our stiletto,example we've already populated these,values for our materials field go ahead,and fill those in for each of your,products and then we can start the final,step of linking these in your theme,if you have a large product catalog you,may find using a third-party app useful,for applying these meta fields in bulk,we've included a link in the video,description for our favorite app to help,you with this,now that your products all have their,meta field data set up let's hop into,your theme and get those connected on,your product page,the first thing we'll do is head to your,theme editor and click on customize once,you're into the editor let's navigate to,the product page where you want those,accordions to appear,now from the product overview section in,the toolbar we'll click add block and,choose the collapsible row on,open this new section and give it a,title in our case we'll use materials,then in the text section we'll click the,dynamic sources icon in the top right,corner select our materials meta field,that we just created and then click,insert then we'll save our changes and,that's it now you've successfully added,meta Fields into your theme like a pro,if you'd like to learn more about other,ways you can use meta fields and dynamic,sources in your theme please see the,links in the description

The above is a brief introduction to shopify show metafields on product page

Let's move on to the first section of shopify show metafields on product page

Let PPSPY's experts help you find the best shopify product on your Shopify business!

Find shopify products (It's Free)
No difficulty
No complicated process
Find trending products
3.5K Ratings


PPSPY has the world's largest selection of shopify products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

shopify show metafields on product page catalogs

Shopify Product Page - Customization and Tips To Use Metafields

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!