Introduction to Liquid

Updated on 20-October-2016 at 10:16 AM

What is Liquid?

If you aren't familiar with the concept of a template language, it's sometimes described as a bridge between the data in your site and the HTML templates sent to the browser. Liquid allows the site developer to access information in BCs' database more granulary.

By using some simple to read and easy to remember constructs we are able to access data from our site (e.g. a product title, a collection description, a set of product images or a blog post) and output that data directly into our pages. One of the main benefits is that we don't need to have any knowledge of what that data is - rather we just need to know which variables we have access to in each template.

The Liquid engine knows how to interpret the legacy BC tags and modules, this means you can use Liquid logic side by side with the legacy tags and modules.

In simple terms using Liquid you can display information stored in BusinessCatalyst in very specific ways (filter something, show if a criteria is met and so on). Liquid is not for "writing" information, meaning one cannot edit a customer's name using Liquid or edit a product's price.

Why use Liquid?

Here are a few reasons why you might consider using Liquid code on your sites.

Custom logic

This was not possible before implementing Liquid and one had to resort to time consuming Javascript implementations to do custom rendering, basically dump a large amount of data and sort or filter it with jQuery was usually the only way.

The ability to run Liquid logic on the server is the closest thing to server side programming we have implemented on BC. The code runs on the server before the rendering engine processes the data and displays it on the front-end of the site.

Note: See the logic tags article for a list of supported tags you can apply with Liquid.

Better control

Liquid output tags enable you more granular access to site parameters like the site domain's culture and other layout and site related parameters.

If you are moving from another system to BC, you don't need to change all your styles to be in line with what the tags are rendering, you can now control what data you output to what HTML tag and in what way.

You can control how the tags are used and rendered - the traditional BC tag functionality is replaced by Liquid tags, for example on the Product Small layout the {tag_name} becomes {{name}}.

Note: Check out Liquid globals article for a list of objects available on every page by default.

Tag manipulation

You can manipulate the Liquid tags using filters. For example the product's name outputted by {{name}} can be outputted directly to uppercase using the Liquid filter "upcase" like so: {{name | upcase}}.

Note: See the filters article for a list of filters you can apply to Liquid tags.

Downsides

The InContext Editor will not work on pages with Liquid tags.

At the moment Liquid or module_data do not work in email campaigns, take a look at the BC.Next and email campaigns technote for more details.

Using Liquid with other templating engines that use double curly braces can result in conflicts. You would need to make sure you escape the markup with the raw Liquid tag.

There are still some areas where you need to emulate some items with a little extra custom work. Nevertheless, manually rebuilding them involves just replicating their structure as you see it exposed by the legacy tag in the front-end.

How to enable Liquid?

To enable the new rendering engine on your site go to the Site settings > Beta features section:

Confirm Liquid engine is enabled

To confirm a particular site is being rendered using the new Liquid engine you can perform this quick test:

  • Create a new blank page
  • Insert this piece of code {{ this | json }}, it will list all the Liquid tags you can use in a JSON format

  • If Liquid is running, the tag will be interpreted and you will get the code below:

Getting started

Let's take a closer look at the basics of Liquid and how to get started with using it in your projects.