how to make sure form uploads images shopify

bonjour shopify world my name is andrew,from ecom experts dot io and in,this video i'm gonna do a code along,with you so you can,finally add files to your orders,in other words when clients check out on,your store and they want to add a file,or an image or something to it,they can finally do that now this is,gonna be so much easier,like it's gonna make your life much much,easier but before we,go ahead and jump in and below in the,description there is a link if you click,on that,fill in your information you will,receive an email with all of the code,that i'm going to be copying pasting,within the theme so you don't have to,kind of you know,figure out the code no just copy and,paste it keep it simple people,and by the way next to that link if you,go a little bit,up to the right there is a subscribe,button and a like button and it would,really mean the world to me,if you know you would click both alright,enough about that let's just jump,straight into our very,ugly store right here so um actually let,me show you what it currently looks like,so you know i'm not bamboozling you,if i go on a product um i can you know,add it to cart i can buy it now,but i cannot add my own image to it,no it's jewelry i wouldn't know why so,how do we do that all right let's get,out of here,because there's nothing to do we go to,online store,right here and first and foremost and,this is a super important i say it is in,every video and in every video there's,someone that doesn't do it and then,cries about it in the comments,you have to duplicate your theme so you,see this is the current team,we go to actions we go to duplicate,and ta-da it's currently duplicating,why is that important now we're going to,be working on this version,if we make a mistake it doesn't affect,our live version like i don't have to,close down my store because i i,messed something up we can just delete,this version if you don't do this,and you work on your live version and,you make a mistake you,are pooped and then you're gonna be in,the comments uh this doesn't work,andrew you screwed over my store,um so yeah no duplicate your store super,important all right,now that you have a duplicate right here,we click on,actions and we go into edit,code we're going to go to templates so,it should look like,this when you load and we're going to go,to templates right here and we're going,to add a new template,from the drop down we're going to be,choosing,and we're not going to call it alternate,but we're going to call it,exactly the same way as in the document,below again,follow the link put in your information,and you will get,a email with the code it's going to be,called customizable now be careful when,you copy it that there is no spacing,before or,after that's completely unwanted because,it might not work,create the template okay next we're,going to be looking for a line of code,so i can actually see it already right,here it's the product,template section but in case,you don't see it first i don't know what,reason the easiest way to do it is on,your keyboard you do command,if for mac control f for windows,there's this little search that pops up,and,you just type in copy paste exactly the,term that we're searching that's,mentioned in the dock in the link below,and you will see it appears right here,okay so in our case it's on line number,five for you it might be somewhere,completely different i'm not familiar,with,your specific theme but we're going to,remove that,and we're going to replace it,so we don't need this anymore,au revoir bye bye bon voyage,and we replace it with what is provided,in the um in the document and by the way,what we're doing is actually we're,referring to a new section that we're,actually going to be building right now,but first let's save this bad boy right,here,or bad girl not judging you know,a lot of women in tech they're fantastic,i have,a lot of female developers on my team,and they're awesome,um so saving it um,you see that i sometimes get these,recordings get long,now we're going to go to the left in the,section department,right here and we're going to be adding,a new section,create a new section called again just,copy paste it exactly like in the,document provided and again make sure,that there is no spacing,in your title in the beginning or,after so there's no unnecessary spacing,perfect it's exactly like it was in the,document,we created the section it's building the,section,it's and there we go our section is,created now we,have to change the code within this all,of this is not necessary so we can,delete that,so in the section directory right here,we're going to search for,product template or something in the,line here product,template dot liquid we command,a on a mac control a,on windows and we copy,all of that then we go back,we close this and we go back to the,product customizable templates,section that we've just built which is,product customizable template this one,and we pasted the exact same code,boom paste done okay so,now we're going to be looking for uh the,type is equal to submit so command,f on a mac control f on windows and we,type in type,is equal to submit,close the brackets here we go we have a,button type is equal to submit,and now that we found that we're going,to,you know go at at the beginning here so,right before the button,not here right here you type,enter in a couple of times so you create,spacing spacing is absolutely no problem,you can create as much spaces as you,like it will not affect your code,and then in that new created white space,you're going to,copy paste the,line item property that is provided in,the document,so in this case we're asking for a,custom picture,we click save now we go to online store,and we need,to put our version alive otherwise the,next step will not,work so um do this when you don't have,too much traffic because there might,still be a bug on your site,so go into online store this is the,version we have worked on you go to,action and you go to publish it's going,to ask you if you're sure that you want,to publish you're going to say yep i'm,sure,already and there you go now our version,is live,why is this important it's because we,have to change the,template of the product we want to have,the,additional feature on it's going to be,clear in just a second,so now go to products and let's say you,want people to upload an,image to um this brace this leather bag,right here i don't know why,but you maybe want to print their face,on the leather back so they need to,upload a picture of their face,so you go to products you choose the,project you want in this case it's the,letterbag,and then you scroll down and you go to,team templates,you click and now you will have the uh,product dot customizable that's,available right here you can ignore the,other ones,um but you should now have product,dot customizable because we just created,it a second ago,you choose that one and you save,it's as simple as that now you can view,and there you go there is no file chosen,uh i can choose a file and i add it to,cart,oh there is one big problem though this,entire solution will not work with the,ajax pop-up card like this you will have,to have the card,page so that's the last step that we,have to do we have to go to online store,right here okay so to change that we're,gonna go and customize,blah blah blah we're going to go to home,page actually no team settings right,here on the bottom i'm sorry,so right here team settings add to cart,notification,we're going to be removing the show,notification when an item is moved,to the cart and we're going to save that,and there we go let's go back to,products right here to see how it looks,on our live site our black,leather bag that has no secret,um we do it in view,we can choose a file,i have no idea what this picture is,i just added a file an image right there,and i do add to cart and it will bring,me to the cart page,with a link to the photo i can check out,and we're good to go,now i as a store owner will get the link,to the pictures,people upload and that's really going to,make,my life much easier if you have a print,on demand or anything like that store,so i hope this video was helpful for you,make sure to share it with a friend,check out our other dev,videos when i have a green hoodie make,sure to like and subscribe i also,do shopify app reviews there is one,right here that you,probably might want to check out product,builder if you're doing this you know,this might be,very useful and time saving for you my,name is andrew from ecom experts dot io,make sure to check out the full channel,it's just about shopify and i will see,you in another video adios

Congratulation! You bave finally finished reading how to make sure form uploads images shopify and believe you bave enougb understending how to make sure form uploads images shopify

Come on and read the rest of the article!