how to add a gift message box to shopify checkout page

all right what's up guys today i'm going,to show you how to accomplish a very,common task in shopify this is for,stores that sell gifts like maybe it's,something with an engraving maybe it's a,bouquet of flowers maybe it's a gift box,like this either way customers need to,input some kind of,message some kind of note attached to,the gift or the text that's used for the,engraving whatever and this is another,one of those things that you can use an,app for but you can also just do it,easily enough,by writing just a little bit of code you,can copy and paste my code and you can,totally avoid having to install and pay,for an app and it's gotten even easier,with shopify 2.0 okay so we're just,going to be using the custom liquid,block type and we won't even have to,edit the theme or template code in that,case now one more thing that i want to,clarify is that the advantage of having,this message field this note field on,the product page is that the note gets,attached to each individual product so,you know you might already have a note,field on the cart page right but this,attaches the note to the entire order,and what happens if a person orders like,companies often do this they order a,gift for like 10 of their employees,and each gift needs to have a different,message right so in that case that's why,we need to put the message field on the,product and not on the entire order and,it will come through in your shopify,admin like this as you can see under,each product we have,a note and there it will be different,for each product so this works well for,large,uh company orders this tutorial is going,to be using dawn theme,and any variants of dawn so all of the,shopify,free themes that are,for os 2.0,uh they're all actually just dawn theme,as well with different presets okay so,this tutorial is going to work for them,if you're not using dawn it's going to,be a little bit more difficult for you,but i'm still going to explain what you,need to do and i think that you should,be able to figure it out it'll be almost,the same except there will be a few,differences in,the classes that you use for,the,look of the field and also the id of the,form almost everything else is going to,be the same and i'm going to walk you,through that as well on one last thing,if you want to copy and paste any of the,code that i use in this tutorial,you will find it all on my website,ed.codes under the tutorials link and,here i share the entire finished code,and just a quick summary of the steps,that we take and yeah that's all let's,get started i'm just going to hide the,field that i've already built okay so,we're going to start from scratch you,can code along with me we're going to,add a block,custom liquid block,and here it is,let's just type test so that we can see,where it appears on the page,and we can drag it to where we want it,to be so i want mine to be under the,quantity selector but above the buy,buttons and the first thing we're going,to do is to add a text area okay this is,a type of form field,that creates a large multi-line,input so here it is it's appeared on the,page don't worry we're going to make it,larger we're going to make it look a bit,better but firstly we want it to work i,hope you have a name that you want for,this field it might be called gift note,it might be called engraving might be,called love letter whatever you want,okay,you're going to use that name and put it,in the id of this field i'm just going,to call it message,just to keep things simple so we're,adding an id of message,we also want to add a placeholder,okay placeholder text is the text that,you see appear on the field as you can,see it's appeared here,and so,the id will be lowercase but the,placeholder will be actual sentence case,because people see it and then finally,we're going to add a name of this field,and this is going to be the most,important thing,you're going to say properties and then,add these square brackets and then add,message,inside the square brackets now this is,the most important attribute okay each,of these are attributes id placeholder,name,name is the most important attribute,because this is what actually sends,this field to the shopify backend so,whatever you type here whatever you call,it in between these square brackets,that's how it's going to appear,here,inside the order and on the cart page as,well,and it has to be done using this exact,wording so properties and then between,the square brackets whatever you're,calling it,okay that's the first part done let's,hit save so now we have this field but,it's not actually linked to the form so,this data isn't going to be sent when we,click add to cart unless we also add,another attribute so just a space after,this and then you're going to add a form,attribute like this,and this tells it what form it relates,to and we want to relate it to,this form which is the uh you know the,quantity and the buy buttons this is,already a form and all we need is to get,the id of this form and add it here now,here is where it gets confusing if,you're not using dawn theme okay if you,are using dawn theme i can tell you,immediately what you should do it's just,product dash forum dash and then in,these curly braces the section id,so you can copy this,paste it in here and that's all you need,to do so if you are using dawn theme and,you've done this feel free to skip to,the next chapter in this video i'm just,going to spend one or two minutes,explaining,for people who aren't using dawn theme,how they can find this form id for their,theme because it might be a little bit,different okay so if you're not using,dawn then you need to find the forum id,to do that,you can inspect any one of these buttons,and that brings up the code inspector if,using chrome or firefox and we want to,find the form that that is the parent of,these buttons and this this quantity,field right so we're just going to look,up this documentary and just into the,parent the parent the parent until we,find the form that contains all of those,things so here's the form and let's read,this code a little bit so form method,post action card add okay so we know,it's the correct form that adds to cart,and here's the id,the id is product underscore form,underscore and then this random number,that we're not sure what it is so right,away we can tell that it's not going to,be exactly the same as on dawn the,difference here at least in the first,part is that instead of dashes it's,underscores,and then,most often it's the section id now it,could also be,a different id,in this case,i'm guessing that on this theme which is,broadcast by the way,on this theme it says data product id,and there's this number and,it's the same number so,that lets me you know guess that,this number is the product id,so in that case all we need to do here,is instead of section id it's product,dot id,and that would be,the,form id for this broadcast theme i know,it's not very straightforward,and you do need to kind of figure it out,a bit but unfortunately i can't give the,answer for every single theme because,they're all different another thing that,you could do is of course go into the,code editor,by clicking edit code here,and looking at your theme code and,looking for something like,product right looking for,the product form,so it might be in a file like main,product or liquid or it might be in a,file called product form dot liquid not,js you're definitely looking for a dot,liquid file,not json either so here if i open main,product,and i scroll down a little bit,then,i will eventually find the form,i can search for it as well so it's,faster,there's the end form tag and so,and so here's the form tag,um and here if we read this we can see,that it says id,okay,id and then it says product form id,and what does this mean it means that,this is a variable that's been set,higher above in this,in this file,so we can search for product form id,now this isn't it we're looking for,something that says product form id,equals,something right,and here it is assign product form id,equals and then see it's that beginning,product dash form dash,and then it appends the section id,and so when you're outputting that that,basically is otherwise written as,product form dash,and then section,id as i showed you earlier so now that,you've given your form field an id a,placeholder a name,and linked it to the actual form that,it's inside of,everything should work so you can go,ahead and test it just write the word,test add it to cart and then you can,view your cart,and,you should see the name of your field,and then the value that you put in,great so that means it's working now all,we need to do is make it look a bit,nicer and we're almost done,so to make it look a bit nicer and like,it's part of our theme we want to use,css classes right,classes are written like so,it's just another attribute on a html,tag,and then you add a class that has some,css attached to it some styling code,attached to it,we're not going to be writing that css,we want to use the classes that already,exist within this theme so to find out,what those are for this message field or,for a text area we can actually just,have a look at the contact form that you,have by default on every shopify store,here is a text area okay and we're just,going to click inspect right click and,then click inspect,and have a look at the code of that text,area,so we have the id,and here are our classes text area and,field double underscore input we're,going to copy those exact classes and it,should start to look exactly the same,so let's hit save and the page should,reload and it doesn't quite look the,same yet there is probably another,difference,and that is,the fact that in dawn everything all,fields are wrapped with this div,of class field okay a div is just a,container it doesn't actually mean,anything it just wraps the code to make,it more organized and the class of field,well we can see that it does have some,styling rules applied to it so we're,going to do that as well,let's just wrap the entire text area,in a div,so,that closes the div,and let's give a class of,field,so there we go that looks a lot better,a lot more like part of our theme,doesn't it so one thing that you may,have noticed just now is that our,placeholder that said message has,disappeared and that's just because in,dawn,the the styling of dawn is such that the,placeholder is not shown and instead we,use labels,like this quantity here,so we're going to add a label,element,and end label,and inside of this we just need to write,for,before attribute should match the id,of the text area so in my case it's,message,just copy and paste that there,and that links the label to,uh to the form,inside the label we're gonna write,message and lastly just so that it's,styled exactly the same way as this,label we want to use the same class,which is,form underscore underscore label,so let's add that class,and there we go,it looks like it matches this quantity,so that's all there is to adding this,type of simple message field to your,product page,uh just a reminder that on ed.codes and,under tutorials you will find the code,so you can copy and paste and just,change some of the things that you need,to change it is also possible to add,other fields if you need to do that you,might have a customizable product and,maybe you want to add a drop down maybe,a check box maybe more of these fields,so if you're interested in that please,do let me know in the comments uh if,enough people are interested in that i,will make a video on it but obviously,it's going to be a little bit more,difficult than what we just did that's,all for now see you next time

Congratulation! You bave finally finished reading how to add a gift message box to shopify checkout page and believe you bave enougb understending how to add a gift message box to shopify checkout page

Come on and read the rest of the article!