Liquid markup is a templating language used to create dynamic content.

Originally created by Shopify, Liquid is an open-source project used by many world-class web applications, including Slate.

It can be used anywhere in Slate that you can use merge fields: in decision letters, Deliver mailings, dashboards, portals, and more.

Basic components

There are three basic Liquid components:

• Objects, which contain content to be displayed on a page using {{ double curly braces }}

• Tags, which create logic and loops using {% curly percentage delimiters %}

• Filters, which change the output of Liquid objects using {{ double curly braces and | a pipe delimiter }}

You’ll get a deeper understanding of each of these components as you explore this section. Let’s look at an example.

Example: Different messages for different majors

Here’s an example of some code that uses tags to tailor a message to the recipient’s choice of major:

{% if {{major}} == 'Philosophy' %}
    Trying to grasp Zeno's paradox? You'll get there. Or you might not.
{% elsif {{major}} == 'Math' %}
    You picked a prime opportunity to study math!
{% else %}
    Haven't decided on a major yet? We've got you covered!
{% endif %}

There are four tags in use in this conditional statement:

The if tag begins the conditional statement. If the recipient’s major is Philosophy, the following message appears:

Trying to grasp Zeno's paradox? You'll get there. Or you might not.

The elsif tag gives the code block another option: if the recipient’s major is not Philosophy, but is Math, they’ll see:

You picked a prime opportunity to study math!

If the readers’ major is not Philosophy and is also not Math, Liquid executes the else statement, and the recipient sees:

Haven't decided on a major yet? We've got you covered!

The conditional block is terminated by the endif tag.

The tags, enclosed in curly braces and percent signs {% %}, are distinguishable from our email body content, which aren’t enclosed in a tag.

Objects and comparisons

The most basic expression of Liquid markup is making content appear with the curly brace delimiters {{ }}.

In conjunction with tags, you can compare values with comparison operators.

📖 Objects and comparisons

Tags

Tags let you define logic.

Conditional

Conditional tags let you define the conditions under which content should appear.

if and elsif

Determines if one value is equal to another value.

{% if {{major}} == 'Philosophy' %}
    Existentialism? Don't get us started!
{% elsif {{major}} == 'Biology' %}
    It's in our genetics to drift toward academic excellence!
{% endif %}

else

A catchall ending statement that executes if none of the conditional statements above evaluate to be true:

{% if {{app_program}} == 'Art' %}
    Welcome to Slate University's Fine Arts Program!
{% elsif {{app_program}} == 'Medicine' %}
    Welcome to Slate University's School of Medicine!
{% else %} 
    Welcome to Slate University!
{% endif %}

📖 The If, Elsif, and Else Tags

unless

Reverse of an if statement.

{% unless {{major}} != 'Quantum Physics' %}
    Achieving an A is probable.
{% endunless %}

📖 The Unless Tag

case

An efficient method of comparing a variable against multiple conditions.

{% case {{major}} %}
    {% when 'Philosophy' %}
        Existentialism? Don't get us started!
    {% when 'Biology' %}
        It's in our genetics to drift toward academic excellence!
    {% else %}
        We support you in your academic pursuits!
{% endcase %}

📖 The Case Tag

Iteration tags

for

Loops through a range, which can be an array.

{% for interest in academic_interest %}
    {{interest}}
{% endfor %}

📖 The For Tag and Liquid Markup Looping

Variable

assign

Assigns a value to a variable.

{% assign missing_items = {{Missing-Checklist-Items}} | split: "|" %}

📖 The Assign Tag

capture

Captures and assigns a value to a variable.

{% capture team %}
    {{sex}}'s {{sport}} 
{% endcapture %}

📖 The Capture Tag

Filters

Filters let you modify output.

{{"Hello world!" | upcase}}

📖 Liquid Markup Filters

Using Liquid markup in Slate

Like content blocks and snippets in Slate, Liquid markup can be used to create content that’s relevant to the user in portals, Deliver mailings, and more.

Some other examples include:

• Letter templates: MergePublic queries can access exports of custom fields not available by default in letter templates.

• Dashboards: Access to exports are created directly in the query tool of Dashboards

• Portals (Reader, Status, Event): Queries for accessing exports are directly created and accessed within the portal and connected by the method. Using Liquid Markup in Portals

• Forms: Exports are created directly in the Merge Fields section in the Edit Properties menu

• Mailings: Liquid markup can be accessed by using recipient list queries and the WYSIWYG editor

• Content Blocks and Snippets: Dynamic Content Blocks

Additional resources

Check out our Joy of Liquid Markup webinar for an audiovisual crash course in using Liquid markup in Slate: