Change Log

  • 09-Jul-2025 | v7.3.5 | Removed references to Shopify's Liquid and documentation and adjusted examples in line with WebinOne's implementation.
  • Liquid filters moved to their own articles (see related article links)

Contributors:

Adam Wilson - Logo Pogo

Working with Liquid

WebinOne has implemented the Liquid templating language to allow easy and powerful control of layout components mixed with server-side logic for your site data and content.

Liquid uses a combination of objects, tags, and filters inside template files to display dynamic content.

For a deeper dive into Liquid, or if you are new to Liquid, see our free online course to get you up to speed: Learning Liquid for WebinOne.

Liquid Syntax

Objects and Variables

Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.

The default syntax used throughout the system when inserting liquid property tags will use square brackets, single quotes and 'capital camel case' for the property name. See the following example:

{{this['PropertyName']}}

Although, keep in mind that all property names, including custom properties added in Custom Modules, are aliased to a single word all in lowercase (flat case) for the purpose of referencing that data via Liquid.

The 'capital camel case' used above is for readability only as liquid property tags are not case sensitive.

You can choose to use an upper or lowercase syntax here.

Furthermore, as all property names are aliased to a single 'flat case' word, you can optionally use a shorthand method for referencing your property names. Such as the example following:

{{this.PropertyName}} OR {{this.propertyname}}

Notice the removal of the square brackets and single quotes and the addition of the dot (.) separator. The dot separator is required wherever the square bracket syntax is NOT used.

The square brackets and single quote syntax is part of the liquid syntax for scenarios where property names have spaces included. This is not required in WebinOne.

Tags

Tags create the logic and control flow for your layouts. The curly brace percentage delimiters ({% ... %}) and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

{% assign name = "Alex" %}

{% if name %}
    My name is {{ name }}.
{% endif %}

My name is Alex.

Tags can be categorized into various types.

You can read more about each type of tag in the following documentation articles:

Liquid Filters

Filters manipulate the output of a Liquid object or variable.

They can be used when rendering object data and variables via double curly braces {{ ... }}.

{% assign name = "Alex" %}

My name is {{ name | upcase }}.

My name is ALEX.

They can also be used when assigning variables.

{% assign name = "Alex" | upcase %}

My name is {{ name }}.

My name is ALEX.

Liquid Data Types

Data being accessed by Liquid can be in various formats, which can be interpreted and handled in different ways.

These data types are as follows:

Type
Description
string
Strings are simply a line of characters that form the value of the property. They are defined by being wrapped in quotation marks and generally are handled as plain text.
number
Numbers are numerical values (either whole numbers or decimals) only and cannot contain alphabetical characters. True numbers are defined without quotation marks and are handled as numerical values capable of math calculations being applied to them (if numbers are wrapped in quotation marks they may be handled as strings only).
boolean
Booleans are true or false declarations. They are defined withour quotation marks, however, if quotation marks are used Liquid will generally interpret the value as a true or false boolean. Other data types can also resolve to true or false values, which is described in more detail here.
array
An arrays is a group of items, or sets of items (consisting of any data type) and can be iterated over.
null
Null is a special empty keyword (used without quotation marks) that is returned when Liquid properties either do not exist or have empty values.

For more detailed explaination and usage of these data types in Liquid, see the Liquid Learning guide here.

null and Empty Properties

Often scenarios arise where properties will have no value (empty), or are not present in the Liquid output and you may want to check for this condition in your Liquid code.

In WebinOne's .NET implementation of Liquid, null is used as a special value when a value is empty or a property is not present - both conditions will resolve to a null result.

Therefore, a reliable way to check for all empty or not present conditions can be achieved as per the following example, where we are rendering something if the property is == (equal to) null:

{% if name == null %}	
    There is no name present (as the `name` variable is not defined yet).
{% endif %}

{% assign name = "" %}

{% if name == null %}	
    There is no name present (the `name` variable is now defined but has an empty value).
{% endif %}

However, using null in our condition we cannot know specifically if the property is just empty or actually does not exist. For this, we can specifically check if just the property exists:

{% unless name %}	
    There is no name property defined.
{% endunless %}

{% assign name = "" %}

{% if name %}	
    Now there is a name property (it may be empty or have a value).
{% endif %}

Learning Liquid - Free Online Course

For a deeper dive into Liquid, or if you are new to Liquid, see our free online course to get you up to speed: Learning Liquid for WebinOne.