Mephisto

Note: This area was yanked from the Shopify Liquid Quick Reference.

There are two types of markup in liquid: Output and Tag.

• Output is surrounded by {{ two curly brackets }} * Tags are surrounded by {% a curly bracket and a percent %}

Output

Here is a simple example of Output:

Hello {{name}}          
Hello {{user.name}}
Hello {{ 'tobi' }}

Advanced output: Filters

Output markup takes filters. Filters are simple methods. The first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters the template will receive the resulting string.

Hello {{ 'tobi' | upcase }}
Hello tobi has {{ 'tobi' | length }} letters!
Hello {{ '*tobi*' | textilize | upcase }}
Hello {{ now | date: "%Y %h" }}

Tags

Tags are for the logic in your template. New tags are very easy to code and I hope to get many contributions to the standard tag library after releasing this code.

Here is a list of basic Liquid supported tags:

Comments

Comment is the simplest tag. It just swallows content.

Hi tobi {% comment %} you stink {% endcomment %}

If / Else

If else should be well known from any language imaginable. Liquid allows you to write simple expressions in the if.

{% if user %}
  Hi {{ user.name }}
{% endif %}

{% if user.name == 'tobi' %}
  hi tobi
{% endif %}

{% if user.name != 'tobi' %} 
  hi non-tobi
{% endif %}

{% if user.creditcard  null %}
   poor sob
{% endif %}

{% if user.payments  empty %}
   you never payed ! 
{ endif }

{ if user.age > 18 } Login here
{ else } Sorry, you are too young
{ endif }

Case Statement

If you need more than one condition you can use the Case Statement

{% case condition %} 
{% when 1 %} 
hit 1 
{% when 2 %} 

hit 2 
{% else %} 
elseblock 
{% endcase %} 

Example:

{% case template %}

{% when 'label' %}
     // {{ label.title }}
{% when 'product' %}
     // {{ product.vendor | link_to_vendor }} / {{ product.title }}
{% else %}
     // {{page_title}
{% endcase %}

Cycle

Often you have to alternate between different colors or similar tasks. Liquid has build in support for such operations using the cycle tag.

{% cycle 'one', 'two', 'three' %} 
{% cycle 'one', 'two', 'three' %} 
{% cycle 'one', 'two', 'three' %} 
{% cycle 'one', 'two', 'three' %} 

will result in

one
two
three
one

If no name is supplied for the cycle group then its assumed that multiple calls with the same parameters are one group.

If you want to have total control over cycle groups you can optionally specify the name of the group. This can even be a variable.

{% cycle 'group 1': 'one', 'two', 'three' %} 
{% cycle 'group 1': 'one', 'two', 'three' %} 
{% cycle 'group 2': 'one', 'two', 'three' %} 
{% cycle 'group 2': 'one', 'two', 'three' %} 

will result in

one
two 
one
two

For loops

Liquid allows for loops over collections:

  {% for item in array %} 
    {{ item }}
  {% endfor %} 

During every for loop there are following helper variables available for extra styling needs:

 forloop.length      # => length of the entire for loop
 forloop.index       # => index of the current iteration 
 forloop.index0        # => index of the current iteration (zero based) 
 forloop.rindex     # => how many items are still left?
 forloop.rindex0   # => how many items are still left? (zero based)
 forloop.first        # => is this the first iteration?
 forloop.last         # => is this the last iternation? 

There are several attributes you can use to influence which items you receive in your loop

limit lets you restrict how many items you get offset lets you start the collection with the nth item.

  # array = [1,2,3,4,5,6]
  {% for item in array limit:2 offset:2 %} 
    {{ item }}
  {% endfor %} 
  # results in 3,4