How to setup HTML emails

Make the emails that we send to your customers spark with HTML

Jeroen Roosenboom avatar
Written by Jeroen Roosenboom
Updated over a week ago

An important part of your online offering to customer, is your online branding. The styling of the emails we send on your behalf is a big part of that.

From confirmation emails to return labels, we can send a lot of different type of emails. Additional related articles:

To create emails that have a bit more styling than just text, we have a list of common used HTML tags to improve the layout.

HTML Basics 

HTML tags are surrounded with brackets and have an open < ... > and close </...> portion.
It is good practice to group a paragraph of text within a <p> ...</p> block.

Example order confirmation

<p>Hi {{subscription.full_name}},</p>

<p>Thank you for confirming your order we will be shipping your order soon with the following products:</p>

<p>
  {% for product in order.products %}
    {{ product.title }}<br>
  {% endfor %}
</p>

<p>
  Kind regards, <br>
  {{project.company_name}}
</p>

The {{ }} are tags to display dynamic content, see this article on how to use dynamic template tags.

Styling

Styling - Bold

Text portions can be styled as:

<b>Bold text</b>

Comes out as: Bold text

Styling - Italic

<i>Italic text</i>

Comes out as: Italic text

It's also possible to combine:

<b>This is bold <i>and italic</i> text</b>

Comes out as: This is bold and italic text

Styling - Heading

Headings are available in different sizes, from large(h1) to small(h6):

<h1> </h1>
<h2> </h2>
...
<h6></h6>

If you want a sentence to split on a new line, add <br /> at the end of an line, where you want to split it.

this might be a longer sentence <br/> that i like to split up

Output will be displayed as:

this might be a longer sentence
that i like to split up

Lists

If the data to present is more clear in a list, use the following examples.
To show an unordered list (ul):

<ul>
  <li>the first list item</li>
  <li>and the second list item</li>
</ul>

this will give as output

  • the first list item

  • and the second list item

To show an ordered list (ol):

<ol>
  <li>the first list item</li>
  <li>and the second list item</li>
</ol>

this will give as output

  1. the first list item

  2. and the second list item

More Advanced?

It's plain HTML, so if you have the skills or inspiration, go for it and style those emails! Don't go TOO far and fancy, otherwise you might trigger spam filters.

More tutorials are available all over the web, some helpful html guides are:

Use your own template

You can also overwrite the default email template and take full control over it.

Did this answer your question?