Create Efficient Receipt HTML Template for Shipping with airSlate SignNow

Receipt html template for Shipping

you welcome welcome my names are no and today I'm going to be showing you how to use the HTML editor with our predefined report templates but this time we're going to be modifying and making actually a brand new sales receipt we have a number of different types of report templates but today we're going to focus entirely on one type which is the sales receipt now this is the current sales receipt in the system it looks okay you've got the address the billing address the shipping address and method and it has the tracking and details of the order what we're going to do in this demonstration we're going to edit this sales receipt and we're going to make advanced changes to it and after we finished we're going to end up with a sales receipt looks like what you see there on the right-hand side so we're moving from this on the left to this on the right and some things about email emails require that you lay things out in the tabular form in using tables and you're gonna see that in my example everything is table based that way will work in all the email clients email is does not function the way of websites to so there's another number of email clients that are very picky especially Microsoft so you have to be cognizant of the fact you need to keep it simple and use tables all email clients aren't the same and specifically again Microsoft you're gonna see all kinds of issues with Microsoft's Outlook email system which in the example we're about to go through will work beautifully in Outlook so we're going to have also we're going to have a responsive layout in the email and to do a responsive layout and email even though we're using in tables the it's essential to provide it with no widths or Heights let it float the way it wants to behave so that's one of the keys and you're going to see that in this presentation what I'm going to do is also add thumbnails and give it a little more graphical appearance this email that you receive so actually have thumbnails of the bottles that you have ordered so if you're using that kind of receipt you will we will need to maintain your thumbnails so again what we can do is going to move from the one on the left to the one on the right there's easy to define your brand within the active club system on your receipts or any other reports for that matter email reports and you won't need any external tools since active comes with this editor which we're about to show you now some basic understanding of HTML is helpful but it's not required but the level of a complexity that we're going to be working on today it would be in a definite plus but the HTML editor can be used by both novices and skilled HTML writers so it covers the entire gamut of users so let's get moving so here we have active Club now I brought up this is the one transaction that we're going to be using to play with us and this transaction has four products on it and we're going to see that in the receipt okay so when I right-click on that transaction here under email job template I can go to my sales receipt and ask for the editing of these templates and it's going to display a number of sales receipt templates because we have so many different kinds we have special ones for the shopping cart for the POS standard template for this show I have picked this one that is the shippers G SOS template this is what it looks like currently today just on my slide let's actually send that to myself so we can see what that would look like in an email they're going to go here job email job template sales receipts and sample and that will come into here and will count to 10 and there she is so this is the email that we're now going to change and it has the full envelope with the header at the top the address and the footer okay so I'm going to highlight that template and I'm going to go edit HTML document so here we have it the old one and I'm going to make some spaces here and I'm going to insert a couple of lines you you to make the undo that need to make this the lines after my cursor these lines are just throwing them so that we have a delineator between the new and the old now in making these HTML templates in this editor it is far easier I have learned to start from scratch rather than trying to play around with this existing one this is consists of here's a table here there's a table here there's a table inside of here and then there's another table inside of there it's just overkill of tables and we're going to be doing this in a much more simplistic way so I'm going to select this text here three clicks will select the paragraph pop it up here oops coffee based okay so there is my the beginning of my email now I'm just going to hop over to look at this in HTML and you will see this is where that line is drawn these two right here these two statements here HH are girls a line everything above that line is now in planed format it has it uses these diff statements so there's no no implied fonts or sizes or anything which is what I want I want the HTML editor has a habit of learning what you're doing and remembering what you do so if you copy say read text then every time you add text it's now going to be read and I want this to be absolutely Plain Jane to make it simple everything I'm going to be doing here is going to be based on simple non formatted text we will do all the formatting at the end now this piece I also want to copy this across but it is red there's a couple of ways I could do that I could re-enter this or I can go over to the HTML and copy the raw text which is this here conformation I'm just going to copy that piece so I get it again in RAW format without any implications as to what its color is or any other current characteristics now the first thing we want to do now is add a table where we're going to put the billing address the payment method the shipping address and the shipping method and that table is a to two columns wide and two rows so let's make a table we'll pick two by two and then it goes there we have a table two by two the first thing I'm going to do is I'm going to open up this little menu that says the properties inspector so when I highlighted the table here at least you want to click it I can get this table properties click on that and I want this table to have a certain type of alignment and I am going to pick the alignment on all the cells so I'm going to go to the cells tab I'm going to pick all using the ctrl key I'm holding the ctrl key down allows me to pick every cell so now they're all selected I'm going to say I want it to be middle left and then I want some more properties here which is a cellpadding so I'm going to go to box and I'm going to say that I want two on top two on bottom and 12 pixels left and right so there is my new box and we'll first put in here billing address tab over to this one they'll tap it the arrow key over to that one payment method shipping address again using the arrow keys over to that and put shipping methods okay now you'll notice that the editor has inserted some spaces here there's a space here I'm sure there's a space at the end of this one there see there's a space here and up here there's a space up here and over this one has a space there we're going to ignore the fact that it's doing that and at the end we're going to get rid of all those spaces in one fell swoop using search and replace but what I did here was not good enough I need to have another road below here I'm going to insert a row and I'm going to insert a row under here and in fact I have one two three four rows on the left and I have one two three four three rows on the right so I need ready to add some more rows there we have it I can now start inserting these these field names these are the database again the left is the database table and the database column or field name now a treble click on this guy will highlight the whole thing and I can control C for copy and paste that in here you'll see it automatically adjust the table treble click on that one paste that in there treble click on this one paste that in there and then the last one coffee and ctrl V to paste it in so now I've got the one on the left done let's do the one on the right treble click copy paste treble click copy paste triple click copy with control C control V to paste now because I put the cell spacing at 12 both on the left and the right you'll have 12 pixels as some padding and I assumed that there's a space here and you can see there is a space again that's a nature of the editor it inserts those spaces as when you make it an empty table it puts a space in the column and we're not going to worry about it we're going to get rid of them all later now I want to do the one below and it has three columns one two three and one two three so it's three by three and so that's easy I'm going to go insert row below insert row below and now we have our table layout treble click to copy this and I'm copying these across without any concern for formatting because they are simply text fields that haven't been colored in any way or given any special properties they look at the track shipment button we will however find something different so again control-c Opie's across now let's do the next one which is the shipping method copy paste copy paste and take the link and take that across as well so now we have recreated those four tables and it's all done in one table so there's one thing however we may be when I highlight the table that's how you selected you get the handlebars see the handlebar in the corners in the middle and then I'm coming down here and I'm going to click table properties properties and the building address and the shipping address I want to give it a little more spacing so I'm going to select that one in that one that cell in that cell and then we go down number four up this cell and that cell applies spacing and instead of 12 to 8 2 pixels at the top and the bottom we're going to go with 12 at the top okay and you can see now the the labels in the tables have got more spacing verses the rows of data inside there okay next next one is package details so we're going to insert here the word packing details again without any concern for formatting so it's right up but up against the table and then we'll add our new table this table is a three columns across and two down so at that location we're going to pick rebuy too we have it and we'll highlight it go to the table properties and we're going to select all the columns or the cells I mean make them all center-left then go more self spate styling and we're going to go with the same layout we had to one before two by two by twelve by twelve okay and then we start filling it in package name weight and tracking code package name weight strapping again no concern for folks or anything like that just plain data and now we'll put in the fields that we need that this is the package that's being delivered you can have an order with more than one package which means more than one tracking code and this will loop over all the packages in the order and display them in the report let's get this one pump it up and then we will go down and do this one sorry this one wait and finally the tracking code treble click selects sentence paste it in okay next one is the actual inventory items and their pricing I'm going to write here order details which we didn't have in the receipt from before and then we are going to pick a table that is it's got one two three four five columns that's a five by two open this up go to 5 by 2 dunk and it goes highlight it click on table properties go to sell properties select all make them all and it you'll notice you that it remembered as an example where it remember the last time - they're all center-left and I'm going to go up to this more styling and it has remembered this as well two by two by twelve by twelve it okay it okay and you can see it resized the table now let's get my words my words are item alcohol quantity unit pricing right so item owl the whole this is the alcohol percentage this is totally an optional column don't need this is the quantity the unit price and the price and then we will go grab our fields if you were didn't have this to refer to you'd have to look at the manual to get these field names since we have an existing receipt we just have to cut and paste now this particular field name is a little different because it has a percent symbol after it so that the data coming from the database needs to add a percent symbol after it and we do the quantity you unit price and the price you there we have it now the next table down is the summary of the order and we will now take a look at what fields we need here that we have it's a 2 by 1 2 3 4 5 two by five so I hope to and down to five voila and highlight it go to click on here table properties sell properties select all will go again with the same alignment although it seemed to default to that go to styling and again it has defaulted that is learning from what I do it goes so let's copy in these words one by one some turtle this is the actual discount rate so not only is it displaying the word discount it's also putting in parentheses the discount percentage sales tax you than the shipping and handling and finally total I'm just going to type in I believe these all need a you I think they should all have a colon : here pull in here go in here go in there and I there and finally the last one is this 1 by 2 table I'm going to write in here comments and it is a one by two we'll do the same thing [Music] save I mean to change the formatting of it so we have select all cells this time it didn't remember the alignment because different size was going to go with middle but we want to go with middle yes middle left and then this one we're going to pick with the twos in the 12 - to 12 and 12 okay and let's just go grab the fields that we need nearly done more you okay and at the end we're going to write thank you for your business and then the footer will take over from there so we've now all duplicated the entire oh no we need to grab these fields over here if this one which is the sub amount and and do not want the red one so I'm going to do that last you and Ling and the amount you now the discount I can retype it if I cut and paste it it's going to bring all these parameters in about the style about it being read which I really don't want to do so I am going to flip over and grab it from the HTML you can go here and do a find discount amount you I am was correct somewhere it would have highlighted it down here there it is that's the one I want and I'm just gonna grab the piece that does not include those Peas control-v to paste it and get rid of those funny characters there we go now it is not colored and again I have this space here I have the space here as bases there in space there but we're going to worry about all this getting rid of all those spaces at the end I'm HIPPA a milestone I am going to do a safe and what does that now look like if I go back to my oh go back here look at the actual template open it up this is what I have and there's the line showing the old stuff though work has been saved let's go back here now the next thing to do is to get rid of the the old stuff I'm going to put a couple of carriage returns in there so that I have some space between the old stuff and Elite and voila all gone now we just have our new template and we're ready to start thinking more about formatting one of the things I want to do is you can see that I have a nice Airy header here and an airy header here that this table does not have that characteristic so I want to collect on that select that table properties cell and we scoop this over to the right you can see so it's the package name the weight in the tracking codes all three click select these three cells more cell spacing and then change this to 12 and 12 okay and what we're going to do the same with this one click on table properties sell and we want to select all the top ones that multiple select cells using the ctrl key hold the ctrl key down more so and it seems to remember that - okay see that actually works did and now it has item alcohol qualities on there all got the nice patting around them the next thing I want to do is I want to move the weight and the tracking code to be right justified you can do that one column at a time down here you could say the alignment tool and do the one column at a time I want to do them all four columns at a time I'm going to select the whole table table properties and I want to select not to go to sell I want this one this one this one and this one are going to be right centered the right icon and hit okay so now these are right justified I want to do the same with this one where I have items' alcohol quantity unit price and price I want four of those to be right justified so I like the table by clicking on the line will properties sell and I want to go with this one this one this one this one this one this one this one this one and that one and again it had remembered that I did let that last time just not that I don't trust it I'm going to highlight it again and hit save so these now are right justified that's nice okay and I need to do the same with the summary so I'm going to go down here click on that puppy table properties and this time I am just going to do all the cells and make them right center justified see that so they all move to the right justified nice and my autosave just saved it for me now this is in a good-enough state for me to take a look at it well one thing I need to do is this piece is the top piece of the top needs some paragraphs going to put my cursor in between those two sentences and hit the paragraph icon here and then I want to fit paragraph here and I want paragraph here so let's preview looks like I need a break here Sony oh I know well that's okay I if I if I select this paragraph and I go style it to normal there we go now it's fine take this paragraph starlet to normal did not go like this one style it to normal and this one here style it to normal since this space which out and want this face in here let me just put in a break and I'm going to do a break here paragraph doesn't seem to be cooperating a set look at preview style it to normal preview think we're good save it reasonably looking now everything to do with colors and fonts and all that stuff come last let's now do a test so I'm going to go back to my transaction and I've been playing with highlighted email job template email sales receipt send sample and go back to I'm a female here don't want that junk here she comes there's our emails and it looks good it's looking good it's exactly what we wanted now we just want to add the pizazz to it okay the first thing to do is to color the headings so I am going to select this table again table properties and then this cell in that cell and then that one and that one we want the background color don't see it like that but the background color let's pick this color right now somehow rather it remember is an example remember that I like things right justified so now it automatically thought I want to right justify those but I did not so I have to go back and I have to say no I didn't want you to add that intelligence and say I want them to be left center now they're back to it way they were now this guy here we need to do the same with that and I'm scared that it's going to change my alignment so I'm going to pick this color one by one and I go down here and I'm going to say that's the color and I'm going to pick that one I'm going to say that's the color and I'm going to pick that one and I'm gonna say that's the color and then this one I'm doing one by one as well these three I can do on once because they are all the same justification [Music] tables properties and we just want top headers we want to continue to be right justified and we want to pick that color law exactly what we like okay now this field here this or this text here I want to make it into a heading heading 3 I'll click on this one I'll turn that into a heading 3 I'll turn this one into a heading 3 and this one into a heading three okay and I see it just saved it hope the one of the bottom here will make that into a normal paragraph so save it up over to my transaction and let's see what it looks like now I can also see it here of course my changes but there's only blue oh but you don't get the replacement of the variables and that's what you get when you send yourself the email so where's my email there is open it up and you can see it's looking much nicer now here we do have when I did change the height of these ones on top it changed the height in between here the padding in between which we did not want to do this is an example of small annoyances so I'm going to pick this table again table properties and I'm gonna pick these cells here to sell pick that one that one that one that one that one go to more so spacing and you'll notice to change them on me double clicked it to here and to their save it okay and it did the same on this one it opened that up when I change the header so table properties and I want to do this one let's go to settle this one this one and this one more cell and it remembered it now from the last one it with two and to okay no it's done save it let's give it a try email job template sales receipts in summer wait for email to come in here she comes open it up and it's looking good except for some reason it change the height of my headers up here which it was not supposed to do all the rest is looking good you you of these CEL Heights changed which didn't ask for them to change this one and this one or cell height of spacing styling and I want 12 112 okay okay good save it I'm going to color the transaction ID and come up here and color that I'm gonna pick that color I also have it's automatically changing the alignment only please hear that I didn't want to do got a mind of its own there we go you I remember I told you about these strange strange spaces that it had inserted here and there is a preview let's let's get rid of all those faces the way to do that flip over to HTML and a space is inserted using this character here it's so I'm going to go search and replace I'm gonna paste in what I just copied which does not include that thing so just ampersand n be SP let me go and I'm going to I want to do a replace and I want to replace it with blank I'm just going to hit replace all and voila they're all gone all those spaces come back over here now everything's nice and clean no spaces now I would like to draw a line underneath packages and underneath all the items and I also want to have a line on top of total and a line below total let me show you what I mean so I'm going to click on this cell right click and I'm going to say insert row below and then I'll click on this cell and go insert row below so now I have a double two more rows but I want this row to be merged into one right click merge cells horizontally this one merge cells horizontally I'm going to click on this upper cell I need to align it left going to click on this one and align that one left and then click back on this one and I'm going to click the underlined and I'm going to click the underlined now I have two cells now in this case it inserted that little space we don't want that here so I'm going to delete that space delete that state I ended undoing um did too much but this one back in delete that delete insert the line and I guess there is no line there so we're good go to preview there is a line there which I don't like there's something going on here that I don't like it won't let me delete it I'm gonna there's an example where you HTML to the rescue go down on the bottom find out why that line is there that's this you you actually it looks good it shouldn't be a line there we're okay yes it looks the same as the one above so what we probably want to do is make the alignment talk left didn't help select the line on the left didn't help Dave how are we doing the other thing I don't really like about it and it's it's in Dar well we needed the the discount needed a discount to be read it will pick the same red color we used before and save it and let's have a look at what it looks like when we send to seal ourselves already Doug Q sales receipt sample count to ten there she is you and this one here is left justified I mean right justified that's another mistake these will look good summer looks good and back to our template fix that one problem at the top here it would appear to be this one we're going to go align left now it is happy camper back to our email look at the rest of it see any other errors I would like to have a little space here on the summary to move it but shift it a little right let me show you how to do that so I'm going to go down here and I'm going to pick this table and I will say well just I just right-click on the table actually and I go insert column to the left there we have it now this is the rare case where I'm going to specify the width of this one column and I'm gonna specify the width of that column to the say 50 see that no I made a move to shift it over to the right a little David let's have a look at our email now send sample to email gives us all one count 10 there she is yup see that fix that there everything is looking good I see that little space here that added that you could move that you know left or right but that gives it a little more pizzazz okay so I mean I've basically done it now I've got my receipt but I want to go one step further I want to add the images here I want to add the pictures and I also want to make these headers bold so this one it's the bold button this one hits the bold button this one hits the bowls button go through them all now double double clicking will select the whole header or treble clicking trip double-click select the word travel click select sentence similar to word this whole thing is similar to word I'm going the we're looking at here is of course not the front that comes out on the actual receipt because that's controlled from the the merchant record which says where at which what your corporate identity pumps are and so here we have have it though we got those old bold now I want to add here I want to add the images so I'm gonna click on this column anywhere on either either one of these columns to the left right click insert column to the left they see how to open a new column I'm going to take this one to cut down on typing paste it in here change this to the thumb nail image save it now let's try and sending it to ourselves email template 10 sample to the email what should come in there she is there's a receipt nice old Madonna fonts there's our pictures we have the total here and we have the total at the bottom I think they deserve a bold I want to charge the amount to some money here this pulls from the database of the receipt amount and I'm going to fold that and then at the bottom where we have the total we'll fold that and we'll doled this good we have a receipt now there is one just one little thing to do and that is this link which I had copied when I copied it did it in fact maintain the URL and it didn't really you see it added all this other poop so I need to I can change it right here or I can click on it and go go here to the hyperlink manager and then I'm going to little little larger area to delete everything other than the actual keyword so that the word is with a curly braket transaction track link that will insert into the email one or more tracking codes that when the user clicks on it will go direct to either gso FedEx or UPS and open up the tracking records whether it be one tracking number or multiple tear course it just displays all the tracking codes if there if there are more than one is now ready to go let's do a final review of it I'm going to save it come back here do the sample and and there she is you you and looking at this I would say that that's the job done the job done everything is as we wanted like what this is my interpretation of what's pretty somebody else might have a different interpretation of that this is ready to go so we are done we have managed to make a sales receipt scratch with all these pretty attributes in them with absolute minimum knowledge of HTML all righty well that concludes that show it was a longer one than usual this will be posted with all our other tutorials and help guides so thank you for coming thank you for enduring such a long video probably going to want to try to watch this in multiple goes but it does show you how to use this HTML editor and the key is you build your layout in the simple form build a layout in with absolutely no regard to fonts or sizes or anything for paragraphs or anything you build the entire layout and then when it's completely finished then you put in all the layout and the other stylings that you want to do so thank you very much and until next time we'll see you then