Script content with Liquid

Create targeted and relevant content for both landing pages and campaigns.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

Liquid personalisation allows you to use Liquid markup language to create targeted and relevant content both on landing pages and in campaigns. In addition to other means of personalisation, Liquid can be used to:

  • Pull Insight data into a campaign.

  • Pull Insight data into a landing page.

  • Loop through collections of data to repeat blocks of HTML to each relevant piece of content.

  • Manipulate the way text, dates, currency and numbers are displayed.

  • Show content depending on list membership.

  • Use complex logic to determine what content should be displayed to each contact.

Even if you're not going to write in Liquid markup yourself, it's useful to have an overview of what it is and what it can achieve.

What is Liquid?

Liquid is a markup language, which was developed for the ecommerce system Shopify. Liquid allows you to create content that changes, depending on the current data, and acts as an extension to the CSS and HTML that emails and landing pages are built upon.

We use Liquid because many front end developers are used to working with it, or find it easy to learn it. A fuller description of what is possible in Liquid can be found on GitHub.


Before you start

Things you need to know:

  • We support an extensive subset of the Liquid markup language. However, not all elements are supported.

  • You must have Advanced personalisation enabled for your account.

  • There are reserved variable names.
    Don't use the following variable names, as they're reserved for system-defined values:

    • account

    • contact

    • token

    • campaign


The basic elements of Liquid personalisation

  • Data
    ​
    What information you have about contacts.

  • Logic
    ​
    Why contacts should/should not see certain content and what content those contacts should/should not see, depending on their data.

  • Content
    ​
    Outputs content to those contacts, using HTML, CSS, outputs and filtered outputs.

Output data into content

You can still use the data object contact.addressbooks. This object also refers to Lists. Address books was the previous name for Lists in Dotdigital.

Outputs can be used to take data and create content.

For example:

Hello ####{{ contact.data.firstname }},

This outputs 'Hello' followed by the first name stored for a particular contact.

This is exactly equivalent to the below using contact data field personalisation:

Hello @FIRSTNAME@,

In this case we outputted a piece of contact data; we can also output account specific data. For example:

Hello ####{{ contact.data.firstname }}, the current time is ####{{ account.datetime }}.

This shows a message to the named contact containing the current date and time.

Filtered outputs

You can use filters to change the way outputs are displayed. For example:

Hello ####{{ contact.data.firstname }}, the current date is ####{{ account.datetime}}.

Might be outputted as:

Hello ben, the current date is 05/08/2015 07:30:31.

But it can be changed with filters as follows:

Hello ####{{ contact.data.firstname | capitalize }}, the current date is ####{{ account.datetime | date: "%e %B %Y" }}.

To show:

Hello Ben, the current date is 05 August 2015.

Note that the first element in the output (surrounded by ####{{}} brackets ) is always what gets outputted, and the other bits (separated by | pipes) are filters.

An output can have multiple filters.

For example:

####{{ account.datetime | date: "%e %B %Y" | upcase }}

outputs the date in the format containing the day (dd), month and year, in uppercase:

05 AUGUST 2015

Logic tags

Tags are used when building logic to tell your content what to do, for example:

{% if contact.data.firstname == 'ben' %}Hey Ben!{% else %}Hello there!{% endif %}

The above example shows different content depending on whether or not the contact's first name is Ben. This functions similarly to dynamic content.

A more interesting example is using for-loops, for example:

{% for book in contact.lists %}####{{ list.name }} <br/>{% endfor %}

returns the lists that a contact is in, and for each list shows its name followed by a line break.

Even with these basic rules, advanced personalisation allows for some truly tailored content, but the power really comes when you combine all the options available.

Liquid markup is space sensitive

You must make sure that you separate each operator with a single space. For example, the following code evaluates to true:

{% if 1 == 1 %}

Whereas, the following code evaluates to false:

{% if 1==1 %}
Did this answer your question?