A Guide to using DotLiquid in content

Liquid is a template language created by Shopify. It allows you to insert variables into text dynamically.

At Symend, we use the DotLiquid implementation to personalize emails, text messages, and landing pages. If you’re familiar with Liquid, there are some differences you should familiarize yourself with.

Basic Usage

Double curly braces {{ }} denote placeholders for variables and expressions used in personalization.

Variables are enclosed within {{ }} and represent dynamic values that will be replaced during rendering.

• Variables in email and text message content are rendered at send time.

• Variables in landing page content are rendered each time the page is loaded.

Example:

For a customer named “Jane,” this text template Hello {{Customer.FirstName}} will use the information know about the customer to render the output as: Hello Jane.

Common Filters

Liquid filters allow you to modify the output of variables in templates. Filters are applied using the pipe (|) character and are highly customizable. Below is a guide to some commonly used filters.

Capitalize

Capitalize the first letter of the string.

Example:

{{ "hello world" | capitalize }}

hello world becomes Hello world

Tips

• Combine capitalize with other filters like downcase to ensure uniform formatting before capitalizing the first letter.

Downcase

Convert all characters to lowercase.

Example:

{{ "Hello World" | downcase }}

➡️ Hello World becomes hello world

Tips

• Use downcase to standardize text before comparisons or searches.

Upcase

Converts all characters to uppercase.

Example:

{{ "Hello World" | upcase }}

➡️ Hello World becomes HELLO WORLD

Tips

• Useful for emphasizing text in headings or labels.

Currency

Formats monetary values based on locale settings.

Example:

{{ account.TotalBalance | currency: 'en-ca' }}

➡️ 1000 becomes $1,000.00

Tips

• Use locale codes (en-ca, fr-FR, etc.) to match audience preferences.

• Ensure the variable holds numeric data to avoid errors.

CustomDate

Formats dates using a specified format and optional locale.

Example (Canada English):

{{ keyDate.ProjectedMilestone | customDate: 'MMMM dd, yyyy' }}

➡️ 2024-03-29 becomes March 29, 2024

Example (Canada French):

{{ keyDate.ProjectedMilestone | customDate: 'dd MMMM yyyy', 'fr-CA' }}

➡️ 2024-03-29 becomes 29 mars 2024

Tips

For ordinal day formatting (e.g., "29th"), you may need custom logic as shown in the UK example:

{% assign day = keyDate.ProjectedMilestone | customDate: 'dd', 'en-CA' %}
{% assign last_digit = day | slice: -1 %}
{% assign last_two_digits = day | slice: -2, 2 %}
{% if last_two_digits != "11" and last_two_digits != "12" and last_two_digits != "13" %}
  {% if last_digit == "1" %}{{ day }}st{% elsif last_digit == "2" %}{{ day }}nd{% elsif last_digit == "3" %}{{ day }}rd{% else %}{{ day }}th{% endif %}
{% else %}
  {{ day }}th
{% endif %} {{ keyDate.ProjectedMilestone | customDate: 'MMMM, yyyy' }}

➡️ 2024-03-29 becomes 29th March, 2024

Tips for Using Filters

Chaining

Combine multiple filters for complex transformations:

{{ "HELLO WORLD" | downcase | capitalize }}

Input: HELLO WORLD
Output: Hello world

Locale-Specific Adjustments

Match locale codes to your audience's preferences for currency, dates, or language.

By adhering to these rules and examples, you can effectively use Liquid filters in DotLiquid to build clean, localized, and dynamic templates.