Clerk.io Developer Documentation

Welcome to the Clerk.io Developer Documentation.

Here you find our developer documentation for our API and all our SKDs.

Get Started    

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:

FormatterFunction
roundRounds to the nearest integer.
Syntax: {{ x | round }}.
moneyFormats 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_euFormats a decimal number as currency using the EU formatting rules.
replaceReplaces all occurrences of a substring, with another.
Syntax: {{ name | replace "Expensive","Cheap"}}
removeRemoves all occurrences of a substring.
Syntax: {{ name | remove "John"}}
upperConverts all characters in a string to uppercase.
lowerConverts all characters of a string to lowercase.
titleUppercases the first letter of every word in a string.
nthPrints the nth element of a list.
Syntax: {{ price_list | nth 2 }}
slicePrints the slice between two indexes in a list.
Syntax: {{ price_list | slice 2, 5 }}

Updated 2 months ago

Email Template Language


Syntax for the Clerk.js template language.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.