Common requests and code snippets for order confirmation HTML templates

Customizing the Order Confirmation template can look and sound complicated if you have no prior experience with HTML. With this guide we hope to show you a few examples of common modification requests and provide you the code snippets so you can make the changes as you see fit. The various templates you can modify can be found here but keep in mind this article is exclusively referring to the Order Confirmation.

Adding GST
Adding the 'Long Description' Field
Modifying the size of your Logo

Adding GST (and other forms of Tax)

The code snippet that makes this possible:

<br/>

<table width='680' frame='border' rules='none' cellpadding='3' cellspacing='0'>

<tr>

<td colspan="{% if hasImages %}5{% else %}4{% /if %}"><strong>Grand Total</strong></td>

<td align="right"><strong>{{ order.formattedTotal }}</strong></td>

</tr>

<tr>

<td colspan="{% if hasImages %}5{% else %}4{% /if %}"><strong>GST (10%):</strong></td>

<td align="right"><strong>{% multiply totals.amount 0.1 asCurrency %}</strong></td>

</tr>

<tr>

<td colspan="{% if hasImages %}5{% else %}4{% /if %}"><strong>Total (incl. GST):</strong></td>

<td align="right"><strong>{% multiply totals.amount 1.1 asCurrency %}</strong></td>

</tr>

</table>

PLEASE NOTE:

For the text in Red, this is editable text that has no bearing on math calculation. If you are using a tax different from GST, for example US sales tax at 8.5%, in place of 'GST (10%)' you could type 'Sales Tax (8.5)'. Where it says 'Total (incl. GST)' you could instead type 'Total (incl. sales tax)'.

For the text in Blue, these numbers directly effect the calculation of tax relative to the grand total, and the new grand total including the tax, giving you the correct calculation where it says 'Total (incl. GST)'. Sticking with the example of US sales tax at 8.5%, in place of the 0.1 you would put .085 and in place of the 1.1 you would put 1.085.

Where In the template code should I paste this?

Adding In the Long Description Field

Many of our customers utilize a given products 'long description' field in various ways; product notes, details like size or weight, suggested retail pricing, etc. If you want this column and corresponding data on your order confirmation like the example image above...

Where In the template should I modify the code?

For your convenience, here is the code for the Table Header <th>Long Description</th> and the code that pulls the data from the Long Description field, including the proper table data tags <td>{{ line.item.longDesc }}</td>
   

Modifying the size of your Logo

Many of our customers have logos that appear on their order confirmations, but they don't display at the size or proportions they'd prefer. Take a look at these examples:

Where In the template should I modify the code?