Email Template Language

Syntax for the Clerk.js 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, '...' }}