Control
IF
The IF statement is used to execute a block of code only if a certain condition is true using the == operator.
HTML code
{% assign color = "red" -%}
{% if color == "red" -%}
<p>Red is the color.</p>
{% endif -%}
Output
<p>Red is the color.</p>
The IF statement can be used to check for a false value with the != operator.
HTML code
{% assign color = "blue" -%}
{% if color != "red" -%}
<p>Blue is the color.</p>
{% endif -%}
Output
<p>Blue is the color.</p>
IF ELSE
The IF ELSE statement is similar to IF, only this statement gives you another possible choice.
You can also use the IF ELSE statement to check if a variable is blank or has no value. And to display specific content based on the value. For example:
HTML code
{% assign color = "blue" -%}
{% if color == "blue" -%}
<p>Color has a value, and it's {{color}}.</p>
{% else -%}
<p>Color has no value.</p>
{% endif -%}
Output
Color has a value, and it's blue.
UNLESS
The UNLESS statement is used to execute a block of code only if a certain condition is NOT true.
{% assign color = "blue" -%}
{% unless color == "red" -%}
<p>Red is not the color.</p>
{% endunless -%}
Output
<p>Red is not the color.</p>
CASE
The CASE statement is used for having a decision based on the value of the variable. If none of the "known" values are encountered the last "else" branch will be executed.
Input
{% assign color = "blue" -%}
{% case color -%}
when "red"
<p>Red is the color.</p>
when "blue"
<p>Blue is the color.</p>
when "green"
<p>Green is the color.</p>
{% endcase -%}
Output
<p>Blue is the color.</p>
Iteration
FOR
The FOR statement is used to loop through a collection of items to display.
HTML Code
{% for item in collection.items -%}
<p>Item Name: {{name}}</p>
{% endfor -%}
Output
<p>Item Name: Mark</p>
Include
INCLUDE
The INCLUDE statement is used to include an external HTML document onto a Web Page.
For example to include a file named "to-be-included.htm", start by creating a file with the code you want insert into another Web Page.
Included File - "to-be-included.htm"
<html>
<head><head>
<body>
<h2>Include File</h2>
<p>This content in included into a Web page using Liquid Include.</p>
</body>
</html>HTML code
{% include "/path-to-file/to-be-included.htm" -%}
Variable
ASSIGN
The ASSIGN statement is used to assign (or update) a value to a variable. After which the data value in the assigned variable will be available to use.
HTML code
{% assign my-color = "purple" -%}
{{my-color}}
Output
purple
CAPTURE
The CAPTURE statement allows you to assign a block of text or HTML code to a variable.
HTML code
{% assign myName = "Mark" -%}
{% capture myName -%}
<span style="color:blue"><p>{{myName}}>/p></span>
{% endcapture -%}
After which the variable {{myName}} will be available to render the text or HMTL on a Web Page. The HTML code or text between the CAPTURE tags does not render on the page.
Output
Mark
Comment
COMMENT
The COMMENT statement is used to comment out block of code or text. Commented code/text will not even appear in the Web Page's HTML. So the Liquid Comment is more powerful than the normal HTML comment <!-- content -->.
{% comment -%}
<p> This block of code will not display.</p>
{% endcomment -%}
Raw
RAW
The RAW tags disables tag processing for content with the tag.
{% raw -%}
In Handlebars, {{this}} will be HTML-escaped and will render the text on the page.
{% endraw -%}
