how to add drop-down areas in product page shopify

hey guys christian here and today we're,going to go over a fairly new update,where you can add custom fields to your,products and of course i'm going to show,you some examples at the end let's get,started,custom fields or meta fields enable you,to customize the functionality and,appearance of your shopify store by,letting you save specialized information,that isn't usually captured by the,shopify admin you can use metafields for,internal tracking or to display,specialized information on your online,store in a variety of ways for example a,candle seller might want to display a,burn time for candles on their product,pages,while a grocery store may want to,display a product expiration date for,canned goods in our example we're,actually going to add,model information recitan information in,a collapsible menu to the product page,so you can actually see that dynamic,data on a per product basis which you,can do before all right and then for,those of you who don't know exactly what,i'm talking about i'm going to show you,here in our totally 90s kit website so,i'm going to click on the little eyeball,here i'm going to open up,and find one of our products i'm gonna,go to the fresh prince of bel air,and click on the yellow shirt,and when we talk about custom fields if,you think about all these right here so,the fresh prince design d this is,technically a field this is the title of,that product right uh this is another,field this will be the pricing,and so forth so each of these things,right here are technically fields now,what you couldn't do before was add,custom ones and that's what we're going,to show you how to do today there's two,ways to access the actual meta fields i,keep saying custom fields but custom,fields and meta fields are the same,thing,but if we go here to settings,and you'll see that now we have a meta,fields option,it's going to be pretty fairly new so,as you can see some of the,options here are still coming soon so,there will be some videos in the future,that we'll be talking about meta fields,and how to use them for collections,customers and orders but for now we have,products and variants as the only,options that we can add extra midi,fields so we're gonna go to products,and then in here we can add a new,definition,and then in here we can do,let's see product,um,sizing,in the description you can add a,description if you like uh this would be,for again people who are inputting this,information,you they might need an extra description,for it so let's put,and then you have the option to select,the content type um,you have a lot of different things in,here as color date and time file json,files,measurements number rating reference,text true or false and urls depending on,what you pick based on these content,type it's going to be the exact content,so if you pick url for example you will,have to type in a full url for that,custom,field to actually work so in this in,this instance we're just going to do,product sizing so it's going to be,general text so we're going to click on,text for that,then in here you can do single line or,you can do a multi-line etc,and then validation you can actually,create,rules so you can have a minimum length a,maximal length or,with the regular expression there's,certain keywords that need to be,included,within that particular thing,i'm just going to save this just for now,just so we can kind of see what we're,working with here,now typically when you go to your,products,and let's go to the one that we were at,which is the,this one the yellow shirt,just as i showed you those fields on the,live website the fields over here you'll,see the the title description these are,all different fields the actual picture,or media the variants are all different,fields and then here towards the bottom,once we start adding,custom fields or meta fields you'll,start seeing them populate right here so,product sizing,we have it in here and we can add,information you see the description will,show right here at the bottom it's a,single line,click on save on that,and now that we've saved that for that,particular product,now,we're gonna go back to our,online store,and we're gonna click customize but,before we keep going on i want to say,welcome to everyone new my name is,christian pinon one of the co-founders,here at the branding we've been helping,frustrated store owners since 2015,become impactful still owners tutorials,tactics and strategies and one of the,ways you can support our channel is by,hitting that subscribe button and turn,it on notification now that we're back,here in the editor we're gonna click on,the product page,i'm gonna go to the default page,and then i'm gonna expand on this,oh alert custom alert customer caution,caution um,actually we're gonna take a little break,here we're gonna go we have to rewind,and go back uh this is a good good,learning opportunity here for us,in order,to fully use the new meta fields you,have to use,a,online store 2.0 theme,these are newly created themes,for this particular feature set and for,additional features that's coming in the,future so if your store is not a 2.0,store you will need to upgrade to a,better more updated theme which we will,be making a video on this pretty soon,talking a little bit more in depth about,that,but,since this theme right here is,technically not,uh supported with the new,os 2.0,we're going to click on exit real quick,and i'm going to show you,where you can find these new themes now,some of the old themes,they have updated their themes to,have the new 2.0 stuff,but you have to actually fully click the,button and,update it and you will see a message,right here at the very top where it will,say hey this theme has a new version,please update please do because it will,include a lot of new features that you,currently don't have,and they will keep adding more in the,future now um i'm going to see explore,free themes when i click on that and,yeah in here i believe that yeah the,only one right now is the recording of,this video the only free theme is the,dawn,theme so you see it has a badge that,says os 2.0 but there are,a few other ones so i'm going to click,on both paid and free and have check,mark the online store 2.0 you will see,that some of the older ones um like fret,expand streamline,uh i remember avenues one of the old,ones impulse for these impulses i know a,lot of our clients motion is another one,so all these older ones they have,upgraded them to the 2.0 and as you can,see the pricing has gone up a little bit,on these um this one's 310 this is 300,280,but it's because they opened up the,floodgates to,truly have a custom experience when it,comes to to your themes so,for this particular website that we're,doing here,we're gonna just do dawn and i think i,have it uploaded already here,see yeah dawn is right here so what,we're gonna do is we're actually gonna,customize this one that way we can kind,of see what we're working with when it,comes to these new meta fields,all right so yeah in here we're going to,go and do the same process go to,products,and default product,and then in here you can see the,difference um the product information is,actually broken down into each separate,field right so potentially if you wanted,to hide the i don't know the title of it,you can literally just hide the title by,clicking a button whereas before is,probably a little bit more complicated,and you have to do a little bit of,custom code and custom work to it now in,order to add the,precision information that we added,we're going to click on add block,and then,for this particular theme the don theme,it gives you a few options on what you,can do,as far as the content,typically you may find that you just,have the option for text,but you do have some other ones in here,i want to do the collapsible tab because,that's just additional information that,doesn't need to be necessarily displayed,right away,um,and once we click on if you can see,right here it's already been added we,can click on collapsible tab,and then the heading obviously,it's actually i've been saying sizing,info but what i want to do is model info,actually so we're going to do model info,and that way,the tab content,if you wanted to if you only had one,model for your whole store then it,doesn't make sense necessarily to do,individual for each product but if you,have individual models or you haven't,used five or six different models then,having all those six different model,information in there might not be the,best thing to do so,for example if i if i start typing in,something here,this is going to be considered static,text so this something something that i,added in here into the model info it's,going to show for every product no,matter what,but because we've added that extra meta,field that custom field we can actually,connect it to that so,in here instead of just typing something,something we can click on the insert,dynamic source,and then we have our product sizing,already in here so we can click on that,and then insert it and it will look,something like that so you necessarily,have to type it again you just have to,make sure you type it on your product,field when you're creating the product,or editing the product so now we hover,over this,oh obviously so because,this particular product doesn't have it,it doesn't show but we had it on this,one,we click on the model info and then we,have our information that we typed in,previously,now before we keep moving on i want to,tell you about our free master class,training that will walk you through the,five pillars that must be in place for,your online store to scale consistently,and profitably no matter what's going on,in the world make sure to check the link,in the description below,now,i also want to say that we can,get to the meta fields from here so if,we click back on the insert dynamic,source,you'll see the app meta field which will,take you back to the page that we found,through the settings,and so we're going to click back on,products and let's add another one here,our definition let's say that we were,selling candles like we said in the,beginning of the video so let's say that,this is the candle like the burn time,right,so burn time,and the description,this is,this is how long,candle burns,and then content type,we're actually going to do a number,okay perfect,and click save on that,i'm going to go back over here,and then for this particular information,what we can do,let's add a new block,and then for this one let's do just a,text,so this would be always permanent right,here at the bottom,but we can also move it around so we can,click on it,and move it we click on that text block,and then in here what we can do is we,can say candle,burn time,say my colon say my semicolon is the two,dots right,or is it colon,i never know,no it has to be colon right,i want to look this up real quick colon,colon is the two dots semicolon has a,dot and a little hanging down thing yeah,i want i want the colon yeah i want a,colon so,in this particular case we can actually,combine static text,with the dynamic data so i'm going to,put the candle burn time colon,and then i'm going to add insert the,dynamic source and we can include that,burn time in there let me click on,insert but because we don't have that,yet what i'm going to do is i'm going,gonna go back to our handy dandy store,we go to products,and then what what shirt i am okay it's,product d which is the yellow one,we're gonna go to this one,and scroll down to the bottom,and i will see the burn time in here now,just an example because we selected a,number has to be an integer um if i type,in i don't know,free oh it wouldn't even let me,so i'm typing i'm trying to type,something and i won't let me because it,has to be a number so let's say burn,time is,so we can do four save on that,go back to our store over here i'm gonna,refresh this,reload,this might not save but we can do that,again real quick,okay yes i got rid of it so i want to,add block we're going to do text,i'm going to click on text block again,and then candle,current time,colon we're gonna insert the dynamic,data which is the burn time,so now we have our four over here,and then we can add something to the end,again so it's four hours right,that's not a very long candle but let's,add a spacing in there,and boom there you go the only dynamic,data in here is actually that number,that four in there so that means that,whenever,people are inserting or putting in the,products um,information,they can actually just put the number,four and all the other information will,be populated right here within the theme,all right that's all we have for today,if you like this video make sure to hit,that like button and leave a comment,down below let me know if you want to,learn a little bit more about this meta,field or custom fields and how they can,help you and your store and your product,pages be more customized,see ya,you

Congratulation! You bave finally finished reading how to add drop-down areas in product page shopify and believe you bave enougb understending how to add drop-down areas in product page shopify

Come on and read the rest of the article!