How to use the Liquid Template Language to display dynamic content on your templates

Liquid is an open-source template language created by Shopify. You can use it in Betty Blocks to create dynamic templates.

Jip Volkers

Published: 24-10-2019

Last updated: 27-08-2020

With Liquid, you are able to create fewer templates for more purposes. Liquid can access all available variables and display their data. Its main purpose is to display dynamic sets of data.

Types of markup


Objects are simply meant to display variables and data and are always surrounded by double curly brackets:

{{ variable_name }}

Simply replace variable_name with the name of the variable you want to use. You can also use a lot of functions to manipulate the way the data is shown using a pipe. 

{{ output | function }}

For a list of functions, visit the Liquid Template Reference.


Tags are the programmatic logic in your template and are always surrounded by percentage symbols inside of curly brackets:

 {% programmatic_logic %}

These are useful for looping through collections (say, posts in a blog) or only showing something if a condition is met (for example, if a user has admin privileges), but can also be used for a lot of other purposes.


Let's say you run a webshop and want to create a PDF template for an invoice. You'll want to display the invoice number, but every invoice number will be different. This means you’ll need to show it dynamically, using liquid. You need to add the invoice number as a dynamic variable on your template. In your invoice model, create a new PDF File property.

Since you're creating a PDF file template as a property on a model, you've got a current object. In templates you can access the current object as record. So if you want to place the invoice number of the record on the PDF, you can use Liquid objects:
{{ record.invoice_number }}

You'll probably also want to show the order’s lines, connected to the current record, on your PDF. You can achieve this with Liquid tags:

{% for orderline in record.orderlines %}
{{ orderline }}
{% endfor %}

In the above example you are using a for loop to list all the order lines in the invoice.

And to complement the invoice, you'd want to show the total price of all order’s lines combined:

{{ record.orderlines | sum: "price" }}

The last example shows the use of a liquid function. We've got dozens upon dozens of functions at your disposal. These can be found in the Liquid Template Reference. Make sure to check these out too!

In this tutorial

Not sure where to start?

Click here to register and start learning