Software Tutorials

Cate

How to: Create an Email Template

3 CommentsThursday, 22 November 2012  | 

Skill Level: Intermediate - Advanced

An email template allows you to create a branded look to all of your emails. Adding a logo, a phone number and links through to your site and social networking profiles can give the customer extra assurance of who you are as a company.

Using the same template on all emails creates a sense of consistency with your communications. Once you start using your email template your customers will begin to recognise your emails in their inbox, even if they don’t look at who it is from first.

You can now set up your own standard email template in your Bluepark admin console using the Email Wrapper feature.

Adding the default email template

To set up your email template go to Site> Configuration> Site Options. Underneath the Email Signature field there is a new field called Email Wrapper. This field, by default, will be blank. This means your emails have no wrapper assigned to them.

Email Wrapper

Underneath the field there are two links – one for the basic HTML template and one for the advanced HTML template. It is advisable to use one of these templates as a basis to set up your own as they have been created using email HTML best practices. Only use the advanced template if you are completely confident you can edit HTML.

Click on the relevant link to view the HTML template code in a new window. Copy the HTML, paste it into the field and Save. You will now have a template for your emails which has a grey wrapper and a white area for the content.

Editing your email template

Basic

The only thing you should change on the basic template is the background colour. To do this, click on the Source button next to the Email Wrapper field. In the pop-up window find the first line of code in the Background Table section. It should look like this...

<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F0F0F0">

All you need to change is #F0F0F0 to the colour you want to appear as the background of the wrapper. You can find out the HEX value online or via a graphics software package such as PhotoShop. Make sure you don’t delete the # symbol when replacing the colour value.

Advanced

Only use the advanced template if you are completely confident you can edit HTML. Trying to edit this using the WYSIWYG will cause the template to break in some email clients.

With the advanced email wrapper you can change the background colour, add in a logo, header links, copyright and company details and footer links. Each section is clearly marked out in the HTML to make it easier to edit.

Creating your own template

You can, of course, create your own template from scratch but it is advisable to only do this if you have experience and knowledge in coding emails. It is very different to coding a website as you need to know how different email clients render certain things. Without this knowledge it is likely your email will break in at least one of the following major email clients - Hotmail, Gmail or Outlook.

Once you have created your wrapper design, add the variable %content where you want the content of the email to appear.

Where can I use the email wrapper?


Emails Now you have your email wrapper set up you will see it appear automatically on all of the triggered emails that are sent to your customers, such as Order Confirmation, Order Completed and Feedback. It won’t appear on the emails sent to you via the forms on your site, so don’t panic when you see these emails.

You can also use the wrapper template on your email newsletters. It is set by default to use the wrapper you have created within Site> Configuration> Site Options. On the Optional Code tab in the Email Editor you can override the default wrapper by adding a new one into the Wrapper field. There is also an option to enable or disable the wrapper on that particular email.

Email Editor

Within the same tab you can also override the default signature (as set in Site> Configuration> Site Options) and override the default CSS (as set in Site> Template Manager> Template> Site> Outgoing e-mail CSS). You can also toggle these to enable or disable them.

Don't forget the legal requirements

If you are a private limited company (Ltd), a public limited company (PLC) or a Limited Liability Partnership (LLP) you will need to comply with The Companies Act 1985 when sending out emails. This requires the signature of all emails to contain the following information...

  • Your company name
  • Your company registration number
  • Your place of registration (e.g. Scotland or England & Wales)
  • Your registered office address – This may be different to the office that you trade from

If you are using the basic email wrapper, you can add this information into the default signature section to make sure it is added to every email. Or if you are using the advanced email wrapper, you can add this in the the 'Copyright' section in the footer.

If you have any questions regarding setting up your email template, please leave a comment below. Also, look out for our next blog post that will feature useful tips on best practices for email newsletters.


Graham Wellock
Saturday, 24 November 2012  |  15:39

I have just completed the basic email wrapper and it looks great, makes our site look very professional now as all the emails are in keeping with our colour scheme we use on the site. Thanks for the software tutorials these really make it easy to add features to your site.


Terry Quinn
Sunday, 25 November 2012  |  17:57

Wow - that sounds fantastic - I'm just going to go have a play now and see how I do..obviously wont't be doing any of the "advanced" stuff just yet :-)
Thanks so much cate
www.tjreiki.co.uk


Thomas Murray
Friday, 1 March 2013  |  10:33

Just set-up our own advanced email wrapper, makes the emails look a lot more professional!

Thanks for the great blog post Cate.