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:

Newsletter

This is an example newsletter template.

This template is using these helpers:

This is an example template that is advertising items on sale.

This template is using these helpers:

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!

Want to talk?

Contact us on the contact form for general, billing, or sales questions

No credit card required

Get started today

Start growing your business with effortless automation.

Try it free