how to add line items on shopify

hey welcome back graduates so today i'm,going to be teaching you how to get more,information on your product pages now,there could be a number of reasons why,you need to collect more information i'm,not talking about data for you know,analytics tracking but you can actually,use,this this strategy to collect analytical,data but that's another video this is,more or less if you're selling custom,jewelry or you know you need somebody to,enter their name for the engraving or,maybe it's for a you know a gift and you,need to add a gift message now i know,you can use the notes part of most cart,carts on themes but this is allows you,to get it right on the product page and,it adds right to the uh the cart and,i'll demonstrate that right now so right,here you can see this is dawn theme by,the way so this theme will be for dawn,theme if you want to use the code,if you're going to take the code that i,provide you and put in a different theme,you will have to adapt it to the theme,styling because some input boxes don't,look as pretty on other themes,i just went ahead and,took the,classes that you know the search has and,i just use those classes um,if you guys want a more in-depth video,on how to you know stylize these input,boxes uh to a theme let me know in the,comments below and we'll make the video,so right now i'm just gonna put you know,glenn and i'll just put some testing,stuff for,the video,and then once you click add to cart now,you're going to see something happen on,dawn theme this is actually the video,after this one we're going to teach you,how to add a slide-out cart to your,theme this is not a dawn cart this is a,custom cart that we created,no this will not be free but it will be,very affordable and you'll be able to,follow the tutorial and add it to your,store,but this is a slide-out cart now as you,can see name glenn and then something,else testing stuff for the video there,you go so that's that's even more data,and that'll show up on the orders but,i'm going to refresh this page because,now it's gone,and we'll go delete this,and again this tutorial is coming a lot,of people are asking how to add,slide-out carts and this is going to be,kind of a cool ongoing project we're,going to add more features to it you'll,get update packs that sort of thing but,anyways let's get right to it so as,always what you want to do is you want,to go into your theme you'll be on the,home click on online store,then you want to go to edit code for the,theme that you want to add the line item,and these are called line item,properties and i'll even show you a,really cool tool tool that was actually,created by shopify so what you need to,do is you need to go and find your,product template and again this is dawn,theme so we're going to click on product,json right here,and then what we're going to do is if,you see the first section is main,product that's the file you need to find,main hyphen product so and we know it's,a section because it's called sections,and the type is main hyphen product so,now we're going to go to sections and,we're going to look for main hyphen,product there it is main hyphen product,now line item properties always have to,be within the form,so whenever you're submitting data on a,page typically it's in a form and you'll,see tags um you know that say form,and i can show you that right now wrong,wrong page so i will click on here i'll,bring over my my developer window here,and you see how it says form you want,everything to be underneath like below,this,these are all validators they're hidden,you don't see them usually it's what,helps shopify understand what you're,trying to add to cart,so now what we're going to do is we're,going to do control f and we're just,typing form,now you can do it a few ways now we can,do it this way which is just plain html,but there is no html form here now and i,believe we can do form oops,form,no we can't,form,okay i'm completely wrong here i look,like an idiot so let's just keep hitting,enter until we find our form,now we see form product this is a,different form,well i know where it is,trying to show you how to find it my,goal is to try to teach you and help you,understand what it is that you that i'm,doing in these videos but it doesn't,always work so here's the main form this,is the main form so they're using uh,they're eliminating white space that's,why i couldn't find it,you know so the reason why i couldn't,find it was they're doing this,which helps eliminate any any white,space so this is the one that we want,and we know this because,this is the hidden field that we found,and then if you notice here we have the,product form submit button,and we'll we'll just kind of compare and,contrast these right here right so we've,got,the product form underscore buttons and,product form underscore buttons and then,right there is the button type equals,submit button type equal submit so we,know we're in the right area we want it,to be,probably above the add to cart here most,likely that's typically where people put,it i can give you a good example of,another client of ours where we did a uh,we did simple line item property for,them,and as well as a customization so these,are all line item properties right here,um you know and they're above the add to,cart but they're also above the quantity,selected but i think in this case we're,going to put it up just above the carts,make it easier now i already have the,code ready,i'll include this as well you just want,to highlight everything,and we're just going to paste this in so,i'm going to copy this,i'm going to go back to where i was and,we'll put it right above that one and,let's just clean this up for for fun,all right now the way i handled this,code is,i wanted you to be able to add as many,line item properties as you need and the,way i handle it is i handle it through,tags so where i'm going to show you that,product and if you noticed i did input,colon here initials input colon name and,that's why you have well you don't have,it right now until i save it and you'll,see why so what i'm doing is i'm saying,for every tag that's in the product.tags,and if the tag contains input colon,we're going to assign the property to,equal that tag name but we're also going,to remove input colon and then,every item will have the property,because we're assigning property equals,the tag but we're removing this this uh,this is what we're searching for that,way it doesn't show up input colon you,know name you don't want it to show up,on there and then everything that,anything you put inside of that tag will,show up on the order,so let's just hit save,we'll do a refresh,and name,something else there you go so now let's,go back to the product and let's just,let's remove uh well this is the wrong,product i'm just all over the place,today guys,we'll refresh this,there you go something else,and this does go in order because it's a,for loop so it's going in order of how,you enter them so you see how this is,this this is technically the last one,because i added this last i had a name,first so what i'll do is i'll do,input,and i'll do one,so we're going to add that that should,show up first let's hit save,i'll refresh,shopify of course takes forever,so we might need to just refresh a few,times because,voiceover on chrome voiceover i don't,know why that keeps doing that,i really don't know what i'm doing,okay so we're just going to go back wait,for this to update there we go so,there's one now we can go and add,another one,and again you know it goes in the order,that you enter it otherwise you know so,you got to be careful with how you enter,it you know how do you want to see the,data come in on the order,and,take a bit to update voiceover,does anybody know why on mac this,happens i'm just holding down the,control button and it just does that i,don't understand why,drives me nuts so there you go one two,so that it's really that easy now,there's a tool out there called,uh ui generator and it is by shopify i,believe it's by shopify i'm not entirely,certain but it works great there's,different types of line item properties,you can add you can do i i typically use,tech short you can do radio buttons and,you can do one,see how that see how you can just kind,of pick various options so you're going,to allow people to pick various options,now if you guys want me to create a,snippet that works with all of these and,you use tags for that,you know i can do that i can make,another video let me know in the,comments below and we can make a more,advanced one and that will be available,on our website ecom graduates dot com,also guys make sure you join our group,and if possible please if you if this,helped you in any way shape or form,please drop a like comment and subscribe,that way we know you know we're on the,right track we want to keep making,awesome videos like this,you know where we can teach you how to,add all these different features to your,store,you know it they really do help you out,they help you save money,i know i know,some of our past snippets are you know,we are charging for those now like i,said in previous videos we usually,release them for free for about you know,a week and then we you know add the,price and they're really cheap it's like,five some of them are ten dollars i mean,it's really really affordable as you,know coming from you know paying you,know ten dollars a month for this app to,add this ability one time charge of you,know five to ten dollars maybe 25,that slide out card that we're creating,that will cost more than most of them,because it was a lot of work but it's,going to add a lot of value to your,store and it's going to save you a ton,of money on you know increased,conversion rates and just not having to,pay for an app,anyways guys thank you so much for,watching i appreciate it if you have any,questions as always just drop a comment,below if you need to email us support,e-com graduates you can and also join,our facebook group all the links are in,the description below as well as the,file to this,tutorial thanks for watching guys

Congratulation! You bave finally finished reading how to add line items on shopify and believe you bave enougb understending how to add line items on shopify

Come on and read the rest of the article!