Working with Liquid

Learning Liquid - Free Online Course

If you are new to Liquid, see our free online course to get up to speed: Learning Liquid for WebinOne.

Syntax Variations

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.

Empty Values (null and nil)

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. As opposed to the Shopify's Ruby implementation using nil.

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 NOT equal to (!=) null (or an empty value):

{% if this['PropertyName'] != null %}	
    // Render something here
{% endif %}

For more info on null/nil and empty values, see the External Resources below for relevant links.