Edit this page

Logic

What are Logic Statements

Logic are conditional Liquid statements

Lets say we are working on product.liquid template and want to display the message "Free shipping", but only on products whose price is greater than $100. Since the product will either have a price greater than $100 or less than $100, the if logic statement is the most appropriate statement to use...

{% if product.price > 100 %}
  Free Shipping
{% else %}
  No free shipping
{% end if %}

Notice how we use the {% %} logic tags and not the {{ }} output tags

Operators

If/Else

You can use use 3 statements inside of your if statement: {% if %}, {% elsif %} or {% else %}. Let's go through some exampples:

Simple if statement

{% if product.price > 50 %}
  Free shipping
{% endif %}

if/else statement

{% if product.available %}
  This product is available
{% else %}  
  Sorry, this product is not available
{% endif %}

if/elseif/else statement

{% if product.price > 50 %}
  Free shipping
{% elsif == 50 %}
  half price shipping
{% else %}  
  Shipping is $20
{% endif %}

Case Statements

If you need to test more than one condition. Here is the liquid syntax:

{% case condition %} 
  {% when 1 %} 
    red
  {% when 2 %} 
    blue
  {% else %} 
    green
{% endcase %}

Example case statement...

{% case template %}
  {% when 'index' %}
     Welcome
  {% when 'product' %}
     {{ product.vendor | link_to_vendor }} / {{ product.title }}
  {% else %}
     {{ page_title }}
{% endcase %}

Cycle

If you need to alternate between things. Example of a cycle statement....

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

one
two
three
one

You can give a cycle a group name. This is useful if you use multiple cycles in your template...

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

one
two 
one
two

For Loop

A loop is used when you need to repeat something multiple times. Here is an example of the liquid syntax

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

There is also some loop objects you can use to help style your layout

forloop.length
length of the entire for loop
forloop.index
index of the current iteration
orloop.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 iteration?

You can use 2 attributes to change how your loop works:

Lets say we are viewing a collection with a total of 5 products (a,b,c,d,e). Using the example below

{% for product in collections.frontpage.products limit:2 offset:2 %}
  Product Name: {{ product.name }}
{% endfor %}

Product Name: c
Product Name: d

We can also define a range of numbers to loop through. The range can be define literally or variable numbers. Here is an example if item.quantity is 4...

{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}

1, 2, 3, 4

Tables

Liquid can automatically generate table row and cells. Use this syntax:

{% tablerow product in collection.frontpage cols: 3 limit: 12 %}
  {{ product.name }}
{% endtablerow %}

You can use the limit attribute to restrict the number of times the tablerow cycles.

You can also use a series of tablerowloop objects to help style your design.

tablerowloop.length
length of the entire for loop
tablerowloop.index
index of the current iteration
tablerowloop.index0
index of the current iteration (zero based)
tablerowloop.rindex
how many items are still left?
tablerowloop.rindex0
how many items are still left? (zero based)
tablerowloop.first
is this the first iteration?
tablerowloop.last
is this the last iteration?
tablerowloop.col
index of column in the current row
tablerowloop.col0
index of column in the current row (zero based)
tablerowloop.col_first
is this the first column in the row?
tablerowloop.col_last
is this the last column in the row?

Here is an example on how to use tablerowloop.col_first:

{% tablerow product in collections.frontpage.products cols: 3 %}
  {% if col_first %}
    This is the first column
  {% else %}
    This is not the first column
  {% endif %}
{% endtablerow %}

Variable Assignment

You can store data in your own variables to be used in output or other tags. The easiest way to create a variable is the assign tag which looks like this...

{% assign name = 'bananas' %}
{% for product in collections.frontpage.products %}
  {% if product.title == name %}
    
The product name matches my variable!
  {% endif %}
{% endfor %}

You can also store a true or false value in your variable

  {% assign bananas = false %}
  {% for product in collections.frontpage.products %}
    {% if product.name == 'bananas' %}
      {% assign freestyle = true %}
    {% endif %}
  % endfor %}
  
  {% if bananas %}
    
Yes we have a banana!
  {% endif %}

If you want to combine a number of strings into a single string and save it to a variable, you can do that with the capture tag. This tag is a block which "captures" whatever is rendered inside it and assigns it to the given variable instead of rendering it to the screen. Here's how it works:

If you want to combine multiple strings into a single string you can do that with the capture tag. The {% capture %} tag captures whatever is rendered inside it and assigns it a variable.

  {% capture attribute_name %}{{ product.title | handleize }}-{{ i }}-color{% endcapture %}
  <label for="{{ attribute_name }}">Color:</label>
  <select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>