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.
On this page:
Table of Contents | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Advanced:
Child pages (Children Display) | ||
---|---|---|
|
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:
Code
Code Block |
---|
{{ "hello world" | capitalize }} |
Output
hello world
becomes Hello world
Tips
Combine
capitalize
with other filters likedowncase
to ensure uniform formatting before capitalizing the first letter.
downcase
Convert all characters to lowercase.Example:
Code
Code Block |
---|
{{ "Hello World" | downcase }} |
Output
Hello World
becomes hello world
Tips
Use
downcase
to standardize text before comparisons or searches.
upcase
Converts all characters to uppercase.Example:
Code
Code Block |
---|
{{ "Hello World" | upcase }} |
Output
Hello World
becomes HELLO WORLD
Tips
Useful for emphasizing text in headings or labels.
Custom Filters
Tip |
---|
These filters are custom to Symend and allow greater flexibility for presenting currency and dates/times in localized formats. |
currency
Status | ||||
---|---|---|---|---|
|
Formats monetary values based on locale settings.Example:
Code
Code Block |
---|
{{ account.TotalBalance | currency: 'en- |
CA' }} |
Output
1000
➡️
1000
becomes $1,000.00
Tips
Use locale codes (
en-caCA
,fr-FR
, etc.) to match audience preferences.Ensure the variable holds numeric data to avoid errors.
customDate
Status | ||||
---|---|---|---|---|
|
Formats dates using a specified format and optional locale.
Example (Canada English):
Code
Code Block |
---|
{{ keyDate.ProjectedMilestone | customDate: 'MMMM dd, yyyy' }} |
Output
2024-03-29
➡️ March 29, 2024
Example (Canada French):
Code
Code Block |
---|
{{ keyDate.ProjectedMilestone | customDate: 'dd MMMM yyyy', 'fr-CA' }} |
Output
2024-03-29
➡️ 29 mars 2024
Tips
For ordinal day formatting (e.g., "29th"), you may need custom logic as shown in the UK example:
Code
Code Block |
---|
{% 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' }} |
Output
2024-03-29
becomes ➡️ 29th March, 2024
Tips for
Usingusing Filters
Chaining
Combine multiple filters for complex transformations:
Code
Code Block |
---|
{{ "HELLO WORLD" | downcase | capitalize }} |
Output
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. ➡️ Hello world