How Do I Create Custom HTML Notification Emails?

In this article, we'll look at how you can spruce up the email notifications your customers receive from Instantcart by setting up a custom HTML email.

Instantcart features the ability to create custom email notifications for things like order status updates and order acknowledgement emails.  Our templates use the same templating engine (Twig) as your shop templates.  You can use Twig logic to pull in dynamic information, such as order details and customer information.

We'll be updating this article with full references to all the dynamic paramters you can use in a customised email, however in the mean time, you can see the variables we have used in our downloadable examples.

You can download our Order Acknowledgement & Order Status email templates at the bottom of this article.

1) Login to your store administration panel

2) Navigate to Content > Email Templates

You will see that you have no email templates, so we need to create one.  Click on the Grey "Add a New Template" tab, the following screen will load:-

3) Copy and paste the following code into the HTML view of the Email Editor

<table border="0" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8; border-collapse: collapse; height: 100%; margin: 0px; padding: 0px; width: 100%;">
<tbody>
<tr>
<td align="center" id="content-cell" style="height: 100% !important; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 50px; padding-left: 0; width: 100% !important;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tbody><!--Start Brand-->
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8; width: 100%;">
<tbody>
<tr>
<td align="center" style="padding: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 640px;">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 640px;">
<tbody>
<tr>
<td style="text-align: center; padding-top: 50px; padding-bottom: 20px;"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 25px;"><img alt="{{ store.name }}" title="WaterCooling UK" src="{{ store_url }}/pics/logo.jpg" height="94" width="549" /><!-- {{ store.name }} --></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Brand--> <!--Start Content Container-->
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8; width: 100%;">
<tbody>
<tr>
<td align="center" style="padding: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border: 1px solid #e5e5e5; border-collapse: separate; border-radius: 4px; width: 640px;">
<tbody>
<tr>
<td colspan="3" style="background-color: #005581;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 640px;">
<tbody>
<tr>
<td style="height: 25px;"></td>
</tr>
<tr>
<td style="color: #555555; font-family: arial, Helvetica, sans-serif; font-size: 12px; text-align: center;">
<h1 style="font-weight: 300; font-size: 22px; color: #ffffff;">Your Order Progress Update</h1>
</td>
</tr>
<tr>
<td style="height: 15px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--Start Responsive Templates-->
<tr>
<td width="15"></td>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 610px;">
<tbody>
<tr>
<td colspan="3" height="5">&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="100" style="color: #acacac; font-family: Helvetica, Arial, sans-serif; font-size: 12px; text-align: center;"><br /><a href="{{ store.url }}" style="font-weight: 300; font-size: 17px; color: #5f7f95; text-decoration: none;">The status of your order #{{ order.id }} </a><br /><a href="{{ store.url }}" style="font-weight: 300; font-size: 17px; color: #5f7f95; text-decoration: none;">has been updated to the following:-</a><span style="font-weight: 300;"><span style="font-weight: 300;"><br /><br /><br /><span style="color: #444; font-weight: bold; font-size: 14px;">{{ order.status.name }}</span> <br /><br /> <span style="color: #444; font-weight: bold;">{{ order.status.info }}<br /></span></span></span></td>
</tr>
<tr>
<td colspan="3" height="1">&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="40">&nbsp;</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;"><span style="font-family: Helvetica,Arial,sans-serif; font-weight: 300; font-size: 12px; color: #acacac;"> We will send you further emails to keep you upto date with the progress of your order.<br /></span></td>
</tr>
<tr>
<td colspan="3" height="40">&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="20px" style="text-align: center;" valign="top"><a href="{{ store.url }}" title="Visit {{ store.name }}" style="font-family: Arial, Helvetica, sans-serif; border: 2px solid #5F7F95; color: #5f7f95; text-decoration: none; border-radius: 3px; padding: 10px 15px;"><span style="color: #5f7f95;">Visit {{ store.name }}</span></a></td>
</tr>
<tr>
<td colspan="3" height="70">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
<td width="15"></td>
</tr>
<!--End Responsive Templates--> <!--Start Social Media Links-->
<tr>
<td colspan="3" style="background-color: #005581;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 300px;">
<tbody>
<tr>
<td style="color: #333; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 125%; text-align: right; padding-top: 8px; padding-bottom: 3px;"></td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 300px;">
<tbody>
<tr>
<td style="color: #acacac; font-size: 12px; line-height: 125%; text-align: left; padding-top: 8px; padding-bottom: 3px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Start Social Media Links--></tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Content Container-->
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #f8f8f8; width: 100%;">
<tbody>
<tr>
<td align="center" style="padding: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 640px;">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 640px;">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; text-align: center; padding-bottom: 20px;">
<p style="color: #acacac; font-size: 12px; line-height: 125%; text-align: center; padding-top: 8px; padding-bottom: 3px;"><a href="{{ store_url }}" style="color: #acacac; text-decoration: none;">Home</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a style="color: #acacac; text-decoration: none;" href="{{ store_url }}/contact-us">Contact</a><a style="color: #acacac; text-decoration: none;" href="{{ store_url}}/contact-us"><span style="color: #acacac; text-decoration: none;"></span></a></p>
<p style="color: #acacac; font-size: 12px; line-height: 125%; text-align: center; padding-top: 8px; padding-bottom: 3px;"><strong>Why did I get this?</strong> This email has been sent to keep you upto date with your recent order.<br /><br /> {{ store.address }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

4) Save your changes, and you should see something similar to below. 

You'll need to specify your own images & logos where required.

5) Activate your email by checking "New Orders" and define a subject, such as "My Store | Thank You For Your Order"

Save your changes, and your new HTML emails should trigger the next time you get an order, or update an orders status.  You can make multiple email tests while developing your custom email template.