Liquid building blocks help you to create a tailored experience for each viewer. This means you can create an email campaign, page, or form, and the content is unique for each individual viewer. You can make personalised content by using the Loop, Decision, and Liquid markup building blocks.
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 will 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 turned on for your account.
Liquid for SMS or MMS works slightly differently.
Learn more in Personalisation for SMS and MMS.There are reserved variable names.
You can’t use the following variable names, as they're reserved for system-defined values:accountcontacttokencampaign
Custom code
The examples provided in this article are intended to help you understand the purpose and application of the Loop, Decision and Liquid markup building blocks, however using Liquid markup for personalisation is classed as custom code. Our Support team cannot troubleshoot your Liquid markup.
Loop block
The loop block repeatedly executes a block of code using certain types of insight data within your account.
In the following example we’ll create a loop that displays a customer’s top five latest orders:
Collection
In EasyEditor, under Advanced personalisation, select and drag a Loop building block onto the canvas.
Select the block’s Configuration icon.
Expand the Select collection drop-down menu and choose an Insight data collection.
Expand the Order by drop-down menu and choose the field you want to order the collection by.
This causes another drop-down menu to appear beneath, expand this drop-down menu and choose how the collection is ordered.
Because we chose
purchase_date, a date field, we can choose to order by Latest first or Earliest first.
For Limit, increase or decrease the number of orders displayed in the loop by using the arrow buttons or entering a number.
Expand the Columns drop-down menu and choose the number of columns you want the data to display across.
Select APPLY.
This loop is now configured to show our latest orders. Next we need to set the order data we want displayed.
Order data
In EasyEditor, under Advanced personalisation, select and drag a Loop building block inside your collection loop block.
Select the block’s Configuration icon.
Expand the Select collection drop-down menu and choose products, this is the Order property.
Expand the Order by drop-down menu and choose name.
This causes another drop-down menu to appear beneath, expand this and choose how the collection is ordered.
Because we chose name, an alphabetical field, we can choose to order by A-Z or Z-A.
For Limit, increase or decrease the number of orders displayed in the loop by using the arrow buttons or entering a number.
Select APPLY.
We now have two loops blocks that check the collection (Orders) and retrieves the data and orders it by purchase_date.
The last thing we need to do is to add the action to the loops. To do this, we can add the name value for the product(s) inside the latest purchase for this collection.
Name value
In EasyEditor, under Advanced personalisation, select and drag a Liquid markup building block inside your data value loop block.
Select the block and enter the product attribute you want to display.
For this example, products is the current iteration of all the products in this Order, and name is the property, so we enter:####{{ products.name }}Select APPLY.
Decision block
The Decision block works by setting decision criteria and returns one value for a TRUE result and another value for a FALSE result - this is commonly known as an IF statement.
In the following example we’ll create a loop that displays a customer’s orders if the price is less than 30:
Decision
Create a loop block that’s configured to display Orders data.
For more information see Collection.
Under Advanced personalisation, select and drag a Decision building block inside the orders loop block.
Select New content and add your when criteria. For this example it is:
Orders.order_total < 30This shows orders where the total is less than 30.
Select APPLY.
Under Advanced personalisation, select and drag a Liquid markup building block inside decision block and enter the name value. For this example Orders is the collection name, and the name value is ID, so we enter:
####{{ Orders.ID }}.For more information see Name value.
The decision block now checks for orders where the order_total value is less than 30 and displays them if TRUE, otherwise nothing is displayed.
You can set a rule for returning data when the decision is FALSE by placing a loop inside the Otherwise part of the decision block.
For more information see Loop block.
Liquid markup block
The Liquid markup block is a blank block which you can use for any custom liquid code.
To use the Liquid markup block:
In EasyEditor, under Advanced personalisation, select and drag a Liquid markup building block onto your canvas.
Select the block’s Configuration icon.
Enter your custom liquid code.
Select APPLY.