Tags
LiquidJS implements business-logic independent tags that are typically implemented in shopify/liquid. This section contains the specification and demos for all the tags implemented by LiquidJS.
# (inline comment)
Add comments to a Liquid template using an inline tag. Text enclosed in an inline comment tag will not be printed.
Anything inside an inline comment tag will not be printed.
{% # this is an inline comment %}
But every line must start with a '#'.
{%
# this is a comment
# that spans multiple lines
%}
Anything inside an inline comment tag will not be printed.
But every line must start with a '#'.
assign
Creates a new variable.
{% assign my_variable = false %}
{% if my_variable != true %}
This statement is valid.
{% endif %}
{% assign foo = "bar" %}
{{ foo }}
This statement is valid.
bar
apply
Applies all filters within the apply tags.
{% apply upper %}
{{ "This statement is valid"}}
{% endapply %}
THIS STATEMENT IS VALID
capture
Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through capture are strings.
{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}
{% assign favorite_food = "pizza" %}
{% assign age = 35 %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}
{{ about_me }}
I am being captured.
I am 35 and my favourite food is pizza.
case
Creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.
{% assign handle = "cake" %}
{% case handle %}
{% when "cake" %}
This is a cake
{% when "cookie", "biscuit" %}
This is a cookie
{% else %}
This is neither a cake nor a cookie
{% endcase %}
This is a cake
comment
Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing comment blocks will not be printed, and any Liquid code within will not be executed.
Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.
Anything you put between tags is turned into a comment.
cycle
Loops through a group of strings and prints them in the order that they were passed as arguments. Each time cycle is called, the next string argument is printed.
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
one two three one
echo
Outputs an expression in the rendered HTML. This is identical to wrapping an expression in and, but works inside liquid tags and supports filters.
{% assign username = 'Bob' %}
{% echo username | append: ", welcome to LiquidJS!" | capitalize %}
Bob, welcome to LiquidJS!
if
Executes a block of code only if a certain condition is true.
{% if product.title == "Awesome Shoes" %}
These shoes are awesome!
{% endif %}
These shoes are awesome!
elseif / else
<!-- If customer.name = "anonymous" -->
{% if customer.name == "kevin" %}
Hey Kevin!
{% elsif customer.name == "anonymous" %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}
Hey Anonymous!
increment
Creates a new number variable, and increases its value by one every time it is called. The first value is 0.
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
0 1 2
Variables created through the increment tag are independent from variables created through assign or capture.
In the example below, a variable named “var” is created through assign. The increment tag is then used several times on a variable with the same name. Note that the increment tag does not affect the value of “var” that was created through assign.
{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}
0 1 2 10
layout
Creates a new number variable, and increases its value by one every time it is called. The first value is 0.
Header
{% block %}{% endblock %}
Footer
// page.liquid
{% layout "default-layout.liquid" %}
{% block %}My page content{% endblock %}
Header
My page content
Footer
parent blocks
It's possible to render the contents of the parent block by using the parent function. This gives back the results of the parent block:
{% block sidebar %}
<h3>Table Of Contents</h3>
...
{{ parent() }}
{% endblock %}
for
Iteration tags run blocks of code repeatedly.
for ... in
Repeatedly executes a block of code. For a full list of attributes available within a for loop,
{% for product in products %}
-{{ product.title }}
{% endfor %}
-hat -shirt -pants
else
Specifies a fallback case for a for loop which will run if the loop has zero length.
{% for product in products %}
{{ product.title }}
{% else %}
The collection is empty.
{% endfor %}
break
Specifies a fallback case for a for loop which will run if the loop has zero length.
{% for i in (1..5) %}
{%- if i == 4 -%}
{% break %}
{%- else -%}
{{ i }}
{%- endif -%}
{% endfor %}
123
continue
Causes the loop to skip the current iteration when it encounters the continue tag.
{% for i in (1..5) %}
{%- if i == 4 -%}
{%- continue -%}
{%- else -%}
{{ i }}
{%- endif -%}
{% endfor %}
1235
render
Render a partial template from partials directory specified by partials or root.
Contents
{% render 'footer.liquid' %}
Footer
Contents
Footer
table row
Generates an HTML table. Must be wrapped in opening <table> and closing </table> HTML tags.
<table>
{% tablerow product in products %}
{{ product.title }}
{% endtablerow %}
</table>
| Cool Shirt | Alien Poster | Batman Poster | Bullseye Shirt |
unless
The opposite of if – executes a block of code only if a certain condition is not met.
{% unless product.title == "Awesome Shoes" %}
These shoes are not awesome.
{% endunless %}
These shoes are not awesome.