Email Template Language

Clerk.io uses Jinja as its email template engine.

Here is a simple example of a template:

<a href="{{ url }}">
  <h2>{{ name }}</h2>
  <img src="{{ image }}" alt="{{ name }}" />
  <div class="price">{{ price | money }}</div>
  <button>Buy Now</button>
</a>

Everything within {{ and }} is processed by the template engine, everything else is used as a raw text template.

A variable is printed by using its name, like so {{ variable_name }}.

If/Else Statements

The Clerk.js email template language supports the use of If/Else statements, to only show specific content based on comparisons for the available product attributes.

The syntax is:
{% if variable_name %}
Do something
{% else %}
Do something else
{% endif %}

An example:

<a href="{{ url }}">
  <h2>{{ name }}</h2>
  <img src="{{ image }}" alt="{{ name }}" />
  
  {% if is_on_sale %}
  <div class="old-price"><s>{{ list_price | money }}</s></div>
  <div class="special-price">{{ price | money }}</div>
  {% else %}
  <div class="price">{{ money price }}</div> 
  {% endif %}
  
    <button>Buy Now</button>
</a>

Its also possible to make use of Logical Operators, to use a more advanced logic.

An example:

<a href="{{ url }}">
  <h2>{{ name }}</h2>
  
  {% if type == "Shirt" %}
  <div class="description">This is one of our awesome shirts</div>
  {% endif %}
 
  <img src="{{ image }}" alt="{{ name }}" />
  
  {% if list_price > price %}
  <div class="old-price"><s>{{ list_price | money }}<s></div>
  <div class="special-price">{{ price | money }}</div>
  {% else %}
  <div class="price">{{ money price }}</div> 
  {% endif %}
  
    <button>Buy Now</button>
</a>

Calculations

Liquid supports basic mathematical calculations on number-based attributes.

This can be used for adding, subtracting, multiplying and dividing a number.
The syntax is this: {{ (variable operator number) }}.

You can even make calculations based on two different attributes and combine them with formatters:

<a href="{{ url }}">
  <h2>{{ name }}</h2>
  <img src="{{ image }}" alt="{{ name }}" />
  
  <div class="price">{{ (price*1.25) | money }}</div>
  <div class="save">Save: {{ ((list_price/price)*100) | round }}%</div>
  
  <button>Buy Now</button>
</a>

Formatters

A formatter is a function that formats a variable before it is printed.

If you have a formatter format and a variable variable then the formatter is applied to the variable like so {{ variable | format }}.

Clerk.js comes with these built-in formatters:

Formatter	Function
`round`	Rounds to the nearest integer. Syntax: `{{ x \| round }}`.
`money`	Formats a decimal number as currency using the US formatting rules. Optional: The amount of decimals to be displayed can be altered by adding a number to the function. Usage: `{{ price \| money 2 }}` Can also be configured for custom price-formatting with this syntax: `{{price \| money 2, "," , "."}}`
`money_eu`	Formats a decimal number as currency using the EU formatting rules.
`replace`	Replaces all occurrences of a substring, with another. Syntax: {{ name \| replace "Expensive","Cheap"}}
`remove`	Removes all occurrences of a substring. Syntax: {{ name \| remove "John"}}
`upper`	Converts all characters in a string to uppercase.
`lower`	Converts all characters of a string to lowercase.
`title`	Uppercases the first letter of every word in a string.
`nth`	Prints the nth element of a list. Syntax: {{ price_list \| nth 2 }}
`slice`	Prints the slice between two indexes in a list. Syntax: {{ price_list \| slice 2, 5 }}
`truncatewords`	Prints a set amount of words from a string, with an optional ellipsis if the string is shortened. Syntax: {{ text_string \| truncatewords 7, '...' }}