shopify show emails with customers in notes

what's up guys today i want to do a,follow-up video for a tutorial i already,did on how to add a field for gift notes,for engravings for any sort of product,customization and that's this tutorial,here add a note field to products in,shopify 2.0 and i showed you how to add,this field basically using the custom,liquid block but in today's tutorial i,want to show you how to output this,message to the order confirmation email,that the customer receives when they buy,from your store so this is what that,email may look like after you've done,this tutorial we're just going to be,outputting this line here that outputs,that message or whatever you have as,your product customization this tutorial,will also work if you did not follow my,tutorial like if you didn't follow this,video but you're using bold product,options or you're using some other kind,of app,or a different tutorial or a different,method to add product uh customizations,here you can still follow today's,tutorial to be able to output them to,the email so let's get started now the,first thing that we want to do is open,up the order confirmation email template,to do that we go to settings and then we,go to notifications this is where all,the email templates are stored this is,the code for all of the emails in,shopify the one we're looking for is the,first one in this list the order,confirmation so let's click into that,and what you'll see is a bunch of code,html and liquid now we can actually,preview this email using the preview,button here and yeah that shows you what,the email looks like,but this actually isn't very useful for,us because it won't show any product,customizations here so,what i mean is the stuff that we fill,out here,the preview button when you click it it,it doesn't know that we have that stuff,so it's not going to populate anything,into those fields so what we need to do,instead,is,make test orders on your store there are,two ways to do this you could set up,bogus payments under payment methods,this is a the bogus gateway which is,included in shopify and you might need,to turn off shipify payments or whatever,your main payment method is stripe or,whatever in order to turn on the bogus,gateway once you turn that on you can,use fake credit card details like 111,something like that to make a test order,but the second and uh,probably the easier way to make a test,order is what i'm doing right now,which is just to have a free product,you know a product that costs zero,dollars and also to have free shipping,so that you don't have to pay anything,during checkout and you can just make as,many test orders as you want of this,free product okay once you've sorted out,how you're actually gonna make test,orders let's get back into this order,confirmation email template now the,email template we don't really need to,edit a lot of the code here we're just,going to be adding something in i'll,just tell you quickly that just in case,you need this information if you want to,change the wording in your email for,example if you want to change thank you,for your purchase to any other type of,words you can change that here if you,want to change you will receive an email,you can change that just don't touch,anything that's in between curly braces,like this and then further down the,email as well things that are in html,you know you can change this without,actually touching the html tags but,anyway what we want to do,is scroll down,to find,the,code relating to,every item in our cart or every item,that was purchased actually and i'll,show you what we're looking for using,this preview again i'm just going to,open up the chrome inspector by clicking,here,clicking inspect,and this is in google chrome but you can,basically see the class names,the html you can see the html,of,these items so this is,called span.order list item title,and then this is order list item variant,i want my code directly below that but,still inside of this description cell,right so i'm going to look for these,and i'm going to put my code directly,below that so here we are on line 191,and this is the product description cell,which is the container inside of which,we want to put our code,and then here we have the item title,which is the title of the product and,then we have the variant title which,goes directly below that so we're going,to make some space here and we're going,to be pasting our code into here,around line 210 now the actual code i'm,not going to write it out line by line,i've already posted it on my website,ed.codes so go there click on tutorials,and then find this tutorial the order,confirmation email,and this is the code that we need i'll,run you through it quickly but first,let's just paste it in so paste it in,here let's just highlight this a bit and,tab in so it's nice and neat so that,these unless tags line up and these ones,too let's just tab in like that so that,looks pretty good and guys okay quick,pause because as i was editing this,video i just realized that i already had,the code pasted in here and i forgot to,remove it,for the purposes of this demonstration,so just ignore the fact that i have this,twice okay,you can just ignore this,and for you it will look like this the,code that you will be pasting in will be,in between this variant line with this,ndif and the line after it will be if,line dot selling plan allocation okay,but now let's just move on with the,video you'll just be seeing two of these,but it's not really a big deal now let,me walk you through this code kind of,quickly so you just understand what's,going on and maybe you can make your own,edits if you really need to,so the first line is basically just,checking that there is a,note field that it exists something like,this right if there is then we're,probably going to be outputting,something,so we output this container div then we,loop through each of these properties,and what that means is that you might,have multiple of these so you might have,multiple message fields you might have a,message field and like a drop down,something like that right if you're if,your situation is more complex and then,loops through those and it checks that,those have been actually filled out on,this line,so if someone's filled this out,then it will output something if nothing,has been filled out,then we don't want to output you know,message and then something blank right,if if people have left that blank would,rather just not output anything right,like here and then the actual body of,this is,paragraph text and we have,property.first,and property.last separated by this,colon symbol and property.first is,obviously the heading of that property,of that field,and proper deal.last is the value and,i've wrapped it all in small,in this small tag because that's an easy,way to make something just a little bit,smaller uh just so it's kind of like,this size otherwise it would be quite,big it'd be like the product title size,but you can feel free to change this you,can get rid of the small tags if you,want it to be a bit bigger,you can uh add a style tag into the,paragraph and you can make something a,different color right this is all,depending on your level of knowledge of,html and css you can make some small,changes to this you can make the first,or the last one bold by uh by wrapping,it in strong tags,like so,right that would make,the actual value bold while this stays,regular,um lots of things that you can do,but i'm gonna get rid of this for now,and yeah that's pretty much it we're,going to save,and uh another thing that i want to,remind you of is you can always revert,this template to default right in case,you mess anything up in case you test,your email after this and something's,gone wrong if you've made a typo here or,something you can reset it and kind of,redo this tutorial or something and so,finally you're all done now that you've,saved it you can go through and make a,test order make sure that everything's,working that you can see it in cart in,checkout and then finally in the email,and i actually just made a test order,and that's the point when i realized,that i had left my previous code from,before recording this,inside and that's why it's outputting,this twice for me but it will be only,once for you and one last thing that i,just realized if you want to have this,message visible in the email that you,yourself as the store owner receive when,someone orders from your store you can,also add this here by going to settings,notifications scrolling all the way down,to the bottom and finding the new order,template go into that template scroll,down to,line 183 and as you can see i've added,the same code exactly the same code no,changes,to line 183 directly under the,ifline.sku where it outputs the skew of,the product and above the,ifline.sellingplan allocation again as,in the previous template that's pretty,much all there is to this tutorial if,you have any questions if you want me to,elaborate on something please let me,know if you found this video helpful if,you got it done then please leave a like,and yeah that's all for today good luck,with it and i'll see you next time

Congratulation! You bave finally finished reading shopify show emails with customers in notes and believe you bave enougb understending shopify show emails with customers in notes

Come on and read the rest of the article!