Using Twig
Twig overview
Twig syntax provides a simple, powerful way to
include dynamic content, directly within email templates. Twig syntax allows all of
this dynamic templating to occur outside of code, meaning changes are done quickly in the
template, with no update to a code base required.
Personalizing email with Twig
We support the use of Twig in our emails. This page will describe how to use the following
helpers:
This page has use cases with examples that include the described helpers.
Use cases
Here are example use cases listed with the Twig helpers used to build the example templates.
Receipts
This is an example
receipt template.
This receipt template is using these helpers:
Multiple languages
This is an example
template that lets you have content in multiple languages.
This template is using this helper:
- Conditional statements –
if/else
Newsletter
This is an example
newsletter template.
This template is using these helpers:
Advertisement
This is an example
template that is advertising items on sale.
This template is using these helpers:
- Substitution
- Conditional statements –
if/else
- Iterations
Twig reference
This reference goes through examples of each helper – including HTML email snippets, and JSON
test
data.
Substitution
There are four main types of substitutions:
Basic replacement
HTML should contain:
<p>Hello @{{firstName}}</p>
Test Data should contain:
{"firstName":"Ben"}
Resulting replacement:
<p>Hello Ben</p>
Deep object replacement
HTML should contain:
<p>Shipping to @{{shippingAddress.country}}</p>
Test Data should contain:
{
"shippingAddress":{
"country":"US"
}
}
Resulting replacement:
<p>Shipping to US</p>
Object failure
HTML should contain:
<p>Hello @{{user.email}}</p>
Test Data should contain:
{
"user":{
"email":"[email protected]"
}
}
Resulting replacement:
<p>Hello</p>
Conditional statements
Here are three types of conditonal statements:
Basic If, Else, Else If
HTML should contain:
{%if customer.male %}
<p>Dear Sir</p>
{% elseif customer.female %}
<p>Dear Madame</p>
{% else %}
<p>Dear Customer</p>
{% endif %}
Test Data should contain: 1
{
"customer": {
"male":true
}
}
2
{
"customer": {
"female":true
}
}
3
{
"customer": {
}
}
Resulting replacement: 1
<p>Dear Sir</p>
2
<p>Dear Madame</p>
3
<p>Dear Customer</p>
Iterations
Basic Iterator
HTML should contain:
<ol>
{% for product in products %}
<li>You ordered: @{{product.sku}} for: @{{product.price}}</li>
{% endfor %}
</ol>
Test Data should contain:
{
"products":[
{
"sku":"10001",
"item":"200"
},
{
"sku":"10002",
"item":"300"
}
]
}
Resulting replacement:
<ol>
<li>You ordered: 10001 for: 200</li>
<li>You ordered: 10002 for: 300</li>
</ol>
Combined examples
Here are two combined examples:
Dynamic content creation
HTML should contain:
{% for product in products %}
{% if product.sku == "10001" %}
<p>The shoe costs @{{product.price}}</p>
{% elseif product.sku == "10002" %}
<p>The hat costs @{{product.price}}</p>
{% endif %}
{% endfor %}
Test Data should contain:
{
"products":[
{
"sku":"10001",
"price":"200"
},
{
"sku":"10001",
"price":"200"
},
{
"sku":"10002",
"price":"400"
}
]
}
Resulting replacement:
<p>The shoe costs 200</p>
<p>The shoe costs 200</p>
<p>The hat costs 400</p>
Share Your Feedback
Let us know how we’re doing! Please rate this page:
If you have a question that needs an answer, please
contact support.
Thanks for helping us improve our docs!