Help

Frequently asked questions and other useful tidbits.

Basics

Updated on September 24th, 2009

Output

To output a value to your HTML, you surround a variable with two curly brackets.

My store is called {{ store.name }}
 
This image is {{ image.width }} pixels wide
 
<a href="{{ page.url }}">My Page</a>

Filters

Filters are simple methods to format or manipulate output. The first parameter is your starting value, and it runs from left to right through one or more filters separated by bars.

{{ product.price | money_with_sign }}
 
{{ page.name | capitalize | truncate }}
 
{{ cart.item_count | pluralize: 'item', 'items' }}

Tags

Tags are the logic in your HTML. You surround a tag with a curly bracket and a percent.

{% if product.on_sale %}
 
{% for item in cart.items %}
 
{% cycle 'odd', 'even' %}

If / Else

These tags let you show different output for different conditions. The opposite of if is unless. You can use and and or to combine conditions.

{% if store.website != blank %}
  <a href="{{ store.website }}">Back to Site</a>
{% endif %}
 
{% if product.on_sale %}
  On Sale!
{% else %}
  Regular price
{% endif %}
 
{% if product.images == empty %}
  Just use your imagination
{% endif %}
 
{% if product.price > 100 %}
  This is pretty expensive
{% endif %}
 
{% if theme.show_shipping_and_tax and cart.tax.enabled %}
  Tax: {{ cart.tax.amount | money_with_sign }}
{% endif %}
 
{% unless cart.item_count == 0 }
  Start shopping!
{% endunless %}
 
# colors = ['red','blue','green']
{% if colors contains 'blue' %} 
   It's blue!
{% endif %}
 
{% if page.full_url contains '/category/mens' %} 
   Men's wear!
{% endif %}

Case Statement

These tags let handle multiple conditions.

{% case product.status %}
 
{% when 'active' %}
 
  Buy me!
 
{% when 'coming-soon' %}
 
  Buy me soon!
 
{% when 'sold-out' %}
 
  You already bought me!
 
{% endcase %}

For Loops

These tags allow you to loop over collections.

{% for product in products.featured %}
  Product: {{ product.name }}
{% endfor %}
 
{% for item in cart.items %}
  Item: {{ item.name }}
{% endfor %}

During every for loop there are a few helper variables available.

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 iteration?

Refine which items are in your loop by using limit and offest.

{% for image in product.images limit:2 %}
  Show two images: {{ image.url }}
{% endfor %}
 
{% for product in products offset:1 %}
  Skip first product: {{ product.name }}
{% endfor %}

Loop over a range of both literal or variable numbers.

{% for i in (1..cart.item_count) %}
  Item number {{ i }}
{% endfor %}

Cycle

These tags let alternate between a set of values. Commonly used to alternate between colors to zebra stripe rows.

{% cycle 'one', 'two', 'three' %}	
 
{% for item in cart.items %}
  <li class="{% cycle 'odd', 'even' %}">
{% endfor %}

Variable Assignment

These tags let you store data in your own variables to be used in output or other tags. The easiest way is with the assign tag.

{% assign looking_for = 'Tees' %}	
 
{% for category in categories %}
  {% if category.name == looking_for %}
    TEEEEEEEES!!!!
  {% endif %}
{% endfor %}

Combine a number of strings into one variable by using the capture tag. These are blocks that “capture” whatever is rendered inside and assign it to the given variable.

{% for category in categories %}
  {% capture css_id %}category_{{ category.permalink }}_{{ forloop.index }}{% endcapture %}
  <li id="{{ css_id }}" class="{{ css_id }}">{{ category.name }}</li>
{% endfor %}

Contact

Can’t find an answer to your question? No worries, we’re here to help.