shopify how to download orders with line items

hi guys so in today's video i wanted to,cover how you can attach additional,pieces of data to line items on your,shopify orders,and so this can come in useful if you,are offering some sort of customization,that you don't want to create additional,product variants for or if that,customization doesn't necessarily fit,well into a product variant,this could be useful as well,so this is actually a front-end,customization and in doing research for,this video i could not actually find,that much information about implementing,this so hopefully you guys find this,video useful and without further ado,let's get right into it alright guys so,the way that we're going to be going,about doing this is adding what shopify,likes to call line item properties,uh or additional line item properties to,your products form field so,if that would make any sense,let me explain this a little bit further,so you can see here that,in our site's code there's this form,element here,that is on every product page so,what this form does,if you don't know anything about html,forms is it's going to wrap up every,single input field in here all the,different values and it will submit them,to this endpoint here and that that of,course it does that when you click,either of these submit buttons so,basically,um we're going to be adding input fields,here so,to do that um for the purposes of this,tutorial i'll just use the online store,editor and give you a brief overview,here,so um if you haven't already i would,recommend duplicating your theme and,instead of working on the live version,uh work on the duplicate just in case,you know,you add something and it pushes live and,so you don't want your customers to be,seeing uh stuff while you're working on,it obviously or if you mess something up,it's nice to have a backup so,uh but once you've done that go ahead,and click edit code we're gonna be,working uh at first we're gonna be,working in this down in the sections,folder,in the main product.liquid file here so,um i want you guys to go and navigate,down to around line,um 425 here in the file,and if you've previously edited this,file it's obviously going to be you know,slightly different than line 425 but the,thing that you're going to be looking,for,is this form,uh liquid statement here,so once you find a line that appears,like this,i want you guys to go ahead and,underneath this input field here,let's go ahead and just to make sure,that we're actually in the right place,we can type uh,this line here which is basically,creating a p element i'm going to go,ahead and save that,and once it's,done saving,uh it'll let me know and then i can go,ahead and refresh here and you'll see,that i have this um,test p tag here,and so now we've we've proven that we're,in the right place all right guys so,let's think of a potential um use case,for this now that we know that we can,add to this,uh area here and we can add to this form,so let's say you're selling jewelry or,something and on your site and you want,to add a custom,you want the the customer to be able to,add their name to the line item so that,uh when you print out the jewelry maybe,you can engrave their name on it or,something like that,so what you can do here,is you can go ahead and first we want to,put a label here and we can say this is,for,uh cust name,and in the label we're gonna put um,your name here,and then we'll close the label tag,and so then we're going to enter the,input and this is where the actual magic,happens so we want this to be of type uh,text,because that's going to give the,customer a text field where they can,enter the name,uh and what we want is maybe we'll make,the id cust,name like this,and then for the name what we want to do,is we want to have this,this is important here it needs to be,properties like this,and then some brackets,and let's just say this is custom,uh name,like that and we're gonna go ahead and,save this,so,this is saved,now what you'll see is we have this your,name here and i can enter in anything,here so let me go ahead and enter in bob,smith or something and go ahead and hit,add to cart the cool thing about a lot,of these themes is they already actually,have this functionality built in to,different parts um they're just waiting,for you to actually put it into the,actual product page here so what you'll,see,is that now,we've added this ape one product and we,have custom name,of bob smith here and if i go to my cart,what you'll notice,is um,these two products i'd added earlier,without the custom name field or custom,name property and so you'll see that,they're actually listed as separate uh,line items here and this product is,listed as a,as separate and it has the proper custom,name field here so let me go ahead and,delete these products and show you that,we can actually even add and if instead,of saying bob smith we do like carol,uh smith here and add this to cart,you'll notice,that again it's added as a new product,here so,the customer can actually see okay i'm,adding this product with this custom,property here so um,let me uh actually show you on the back,end what this is gonna look like when,the order comes in all right guys so,here i am in the checkout and what,you'll notice is that again we have,these line items here and there's custom,name field here,and so,um let me go ahead and show you guys,actually in the um,let me go ahead and show you in the,actual code here,uh how you can use these in your liquid,if you uh,so desire for instance if we go to main,cart,items i think it'll have it here so,let's wait for it to load and then we'll,search for property,let me search for property here,yeah so what you'll see is um here,this,is um,akin to,give me one second let me just go back,to my cart uh,card here,so this this here,this four property and item stop,properties obviously this liquid is just,looping over each property that custom,property that's been added so here you,have property.first and you have,property.last okay,so property.first is gonna refer to,whatever,um,whatever text you entered after that um,properties like in the brackets in the,properties so you can see we did custom,name and so this is property.first here,property.last is what the user input was,or whatever the value was of the input,field,and,you can use a bunch of different,html input types for these things if you,don't know about all the different html,input types um type in w3schools,and then just type in html input types,and it will tell you about this and um,you know i'd have also check out this,html forms here if you're really gonna,start getting into uh customizing your,forms just so you understand sort of,what's going on um because you know we,could do,you know,like an hour long video on expanding,upon these topics but anyways um,so yeah property it up first is whatever,you entered in the,code of your site property.last it's,going to be whatever the user enters as,far as value or if you hard code in the,value yourself it'll be that as well,um and so,this here,the reason this line exists,is,uh,shopify or the dawn theme basically,assumes if the property.last contains,this like slash upload slash that you're,using some sort of link and then instead,of actually just displaying the property,with a p tag or whatever,it assumes that you want to actually,link display the link,and allow users to,go to that link so yeah so you can see,that these themes like most of the free,themes,maybe even all the free themes that,shopify offers already have,some support for these custom properties,in them all right so i'm going to go,ahead and complete the order and then,i'll show you what this order is going,to look like in the back end when it,comes in and what you're going to see,when your customers actually submit,orders using these custom fields okay so,here i am in the back end and what,you'll notice,is uh right here you can see that,it's actually,kept this custom name field and you can,see that it has carol smith here bob,smith for the other one and so when you,go to fulfill these items um you know if,we're using the jewelry example you're,going to have this piece of data here to,draw from so that you actually do the,engraving properly so the other thing,that i want to show you guys really,quickly is if i go ahead and hit the api,here with a request,um,you'll see that so now we have this,order and this is anytime you know,you're using the rest api this is the,object you're gonna get so we have this,order here and what i want to do,is i want to go ahead and look at,if i can find bob smith anywhere in here,and so what you notice here is this line,item has,a uh,under the properties uh its first,property is the custom name and it has,this value of bob smith so this is just,to show you that even if you are going,to use the api or something and you're,going to integrate it with whatever,other piece of technology,you can definitely still use this method,and you're still going to have that,piece of data and everything's going to,work so guys that's how to add,additional pieces of data to your,shopify orders and so i haven't checked,every single one of these input fields,here uh to see if this works with all of,them um but it definitely works with the,main ones and um yeah so if you guys,found this video helpful i'd appreciate,it if you could leave a like,it helps other people find the video who,are having the same issue as you and if,you're interested in you know how to,code shopify sites or how to uh improve,the quality of your shopify site um,definitely consider subscribing to my,youtube channel i post videos here uh,like this one i also do app reviews and,um just give some general ecommerce,advice uh for new shopify store owners,so if that appeals to you uh go ahead,and subscribe and i'll see in the next,video guys

Congratulation! You bave finally finished reading shopify how to download orders with line items and believe you bave enougb understending shopify how to download orders with line items

Come on and read the rest of the article!