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:
Check the list of all types of email that we send to your customers
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
the first list item
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.
