Basic concepts of Liquid, the templating language that powers Live Editor layouts and content templates.
Liquid looks similar to many common web scripting languages. Generally speaking, it is mixed in with regular HTML documents to add logic and to output data.
There are 2 main types of Liquid markup that you’ll be working with: output and tags.
Double curly braces surround any logic or values that you would like to output onto the page:
Tag markup does not output anything but allows you to code logic into your templates (e.g.,
else blocks, loops, variable assignment, etc.). Tags are surrounded by
matched pairs of curly brackets and percent signs:
This is a complete list of tags available within Live Editor Liquid templates in the Liquid Tag Reference.
assign tag is your standard
one-line assignment statement:
capture tag allows
you to capture a value from multiple lines.
Liquid in Live Editor provides you with all of the operators that you would expect from a scripting language.
||Greater than or equal to|
||Less than or equal to|
||Chain conditions together and evaluate if any are true|
||Chain conditions together and evaluate if all are true|
||Check for the presence of a substring inside of a string or a string in an array of strings.|
Test that 2 values are equal:
Chain multiple expressions together:
Check for the presence of a substring inside of a string:
Liquid objects and variables will return 1 of 5 types:
A string is a sequence of characters. Strings are declared by wrapping the variable’s value in single or double quotes.
Numbers include floats/decimals and integers.
Booleans are either
false. No quotations are necessary when
declaring a boolean.
nil is an empty value. If a variable or object’s attribute holds nothing or is
not present, Liquid will return
When within an output,
nil will not display anything on the screen.
also evaluates to
An array is a collection of values of any type.
You often will access the items in an array by looping through it with a
for loop tag.
One common array that you’ll work with is the
navigation.links array within
a navigation template. Pretend that this example contains 4
links to “Home,”
“Products,” “About Us,” and “Contact Us”:
You can access an individual item in the array using square bracket notation and the item’s
index. (The first item in the list has an index of
Here is the same example from above using indexes to access the
All values in Liquid evaluate to
true, except for
This means that all values would pass the test in an
if statement unless their
Notes about zeroes and empty strings
In Liquid, a zero-value evaluates as
true, which may be a little different than you
may be used to in other programming languages. You must use a comparison operator to evaluate a
With strings, you must use the
size attribute if you want to check that it has
content before continuing.
Lastly, if an object doesn’t exist, it will return
nil, which will evaluate
false. The same goes if an object’s attribute has an empty value.
Cutting straight to the chase, here are how different kinds of values evaluate in Liquid:
Dive deeper into Liquid by learning about using tags for logic and control flow in the Tags Reference.