Liquid

Logic

{% comment %}

Comments will be hidden

My name is {% comment %}Mark{% endcomment %} Dunkley My name is Dunkley

{% raw %}

No liquid will be parsed in within these tags

{% raw %} {{mustache.js}} {% endraw %}

{% if %}

"If" statements let you determine if something is true or not

if username is elvis {% if user.name == 'elvis' %}
hey Elvis
{% endif %} hey Elvis Else if example {% if user.name == 'elvis' %}
hey elvis
{% elsif user.name == 'Mark' %}
hey mark
{% else %}
hi stranger
{% endif %} hey ugly

{% unless %}

If not true, then it will do something

username is not "elvis" {% unless user.name == 'elvis' %}
hey ugly
{% endunless %} hey ugly

{% case %}

Used when you have consistent cases of something

case [handle is 'cookie'] {% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cookie/cake
{% endcase %} This is a cookie

{% cycle %}

Use when you need to alternate between something.

Basic example {% cycle 'one', 'two' %}
{% cycle 'one', 'two' %}
{% cycle 'one', 'two' %} one
two
one Group cycles {% 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 %}

Use "for loops" if you want to repeat/test something over and over

Loop options

• limit:
• offset:

For Loop [product are: hat, pez, pad] {% for product in collection.products %}
{{ product.name }},
{% endfor %} hat, pez, pad, Limit [product are: hat, pez, pad] {% for product in collection.products limit:2 %}
{{ product.name }},
{% endfor %} hat, pez,

{% tablerow %}

Generate table rows/cells

You have a few options

• cols:
• limit:

Example [products are: hat, pez, pad] <table>
{{% tablerow product in collection.products cols: 2 %}
<td>
{{ product.title }}
</td>
{% endtablerow %}
</table> <table>
<tr>
<td>hat</td>
<td>pez</td>
</tr>
<tr>
<td>pad</td>
</tr>
</table>


{% assign %}

Create variables

{% assign myvariable = false %}
{% if myvariable != true %}
The if statement is valid
{% endif %} The if statement is valid

{% increment %} New

Creates a new variable and everytime it's called the value increases by 1, with the initial value being 0

{% increment variablename %}
{% increment variablename %} 0
1

{% decrement %} New

Creates a new variable and everytime it's called the value decreases by 1, with the initial value being -1

{% decrement variablename %}
{% decrement variablename %} -1
-2

{% capture %}

Similar to {% assign %} and allows you to "capture" a variable you output

{% capture productlink %}
{% product.url %}
{% endcapture %}

{% productlink %} /products/apple

{% include %}

Insert a snippet into your layout

Within the snippet color.liquid color: '{{ color }}'
shape: '{{ shape }}'
Within the template index.liquid {% assign shape = 'circle' %}
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}
{% assign shape = 'square' %}
{% include 'color' with 'red' %} color: ''
shape: 'circle'
color: 'red'
shape: 'circle'
color: 'blue'
shape: 'circle'

color: 'red'
shape: 'square'


Operators

== !- > < >= <= or and contains

You can use operators in all the above logic statements

• == equal
• != not equal
• > bigger than
• < less than
• >= bigger or equal
• <= less or equal
• or this or that
• and must be this and that
• contains includes the substring if used on a string, or element if used on an array

• Docs ›
• 

Misc

2 types of liquid tags

We use liquid to generate our code. There are 2 types

Will output something {{ 'output me' }} output me Logic statement {% logic %}

page_description

Depending on which template Shopify is rendering it will pull a Google friendly description of the page. Use it for meta descriptions.

{{ page_description }}

page_title

Renders the template's default page title text selected by Shopify

{{ page_title }}

if variable is blank/empty/null

Instead of doing == "", or == empty you can take advantage of "nil" by simply writing {% if variableName %}. If there is nothing the variable will return false

{% if fulfillment.tracking_number %} We have a tracking number! {% endif %}

Search only products

Only returns products in the search results

<input type="hidden" name="type" value="product" />

layout

By default "layout.liquid" is applied to all themes, but you can specify a new layout by creating a new layout and use the tag {% layout "layout2" %} or if you don't want a layout use {% layout "none" %} .

{% layout "layout2" %}

current_tags

Renders a list of all the tags, only works on collection.liquid and blog.liquid.

What is a handle?

A handle is how we name our elements (collections, products, blogs, etc)

• docs ›
• 

Theme Settings

Text field

<tr>
  <th><label for="my_text">Name of this setting.</label></th>
  <td><input type="text" id="my_text" name="my_text" class="text" value=""/></td>
</tr>

Multiline text field

<tr>
  <th><label for="my_textarea">Name of this setting.</label></th>
  <td><textarea rows="4" cols="20" id="my_textarea" name="my_textarea" class="textarea" value=""/></td>
</tr>

Select menus

<tr>
  <th><label for="my_dropdown">Name of this Setting</label></th>
  <td>
    <select name="my_dropdown" id="my_dropdown">
      <option value="1" selected="selected">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </td>
</tr>

Checkboxes

<tr>
  <th><label for="my_checkbox">Name of this Setting</label></th>
  <td><input type="checkbox" id="my_checkbox" name="my_checkbox" value="1" /></td>
</tr>

File Uploads

<tr>
<th><label for="my_img">Settings Name</label></th>
<td>
  <input type="file" id="quot;my_img" name="my_img.jpg"  data-max-width="100" data-max-height="200" />
</td>
</tr>

CSS/Specialty Classes

<input class="color" name="background_color" value="#332211" />

<select class="collection" name="frontpage_collection" />
  
<select class="font" name="header_font" id="header_font">
  <option value="Georgia, Utopia, 'Times New Roman', Times, serif" selected="selected">Georgia</option>
</select>

<select class="blog" name="main_blog" />

<select class="page" name="welcome_message" />

<select class="linklist" name="sidebar_linklist" />  

<select class="snippet" name="sidebar_widget" />

Shopify credit

Necessary for any themes on the theme store

{{ powered_by_link }}

• Docs ›
• 

Loop Helpers

forloop.length

length of the entire for loop

forloop.index

index of the current iteration

forloop.index0

index of the current iteration

forloop.rindex

how many items are still left?

forloop.rindex0

how many items are still left?

forloop.first

is this the first iteration?

forloop.last

is this the last iteration?

• Docs ›
• 

Pagination

paginate.page_size

The size of each page. That's the amount of items displayed.

paginate.current_page

On which page are we right now? You can also use {{ current_page }} as well.

paginate.current_offset

How many items did we skip over so far

paginate.pages

The amount of pages there are

paginate.items

Total amount of items in this collection

paginate.previous

Exists if there is a previous page.

paginate.previous.title

Title of the link

paginate.previous.url

URL of the link

paginate.next

paginate.next.title

paginate.next.url

URL of the link

paginate.parts

Array of all the parts which make up a good navigation for this pagination. Each element will have any of these three elements: part.is_link (Is this part a link?), part.title (Link Title), part.url (Link URL)

part.is_link

• Docs ›
• 

Liquid Filters

escape(input)

Use this filter to escape a string.

{{ link.title | escape }}

append(input)

Use this filter to append characters to a string.

{{ 'sales' | append: '.jpg' }} sales.jpg

prepend(input)

Use this filter to prepend characters to a string.

size(input)

Return the size of an array or string

{{ 'this is an 30 character string' | size }} 30

join(input, segmenter = ' ')

"joins" an array with the specified character. Example:

{{ product.tags | join: ', ' }} tag1, tag2, tag3

downcase(input)

convert a input string to 'downcase'

upcase(input)

convert a input string to UPCASE

strip_html

This will strip all html tags from the text passed to the block. Useful in combination with truncate. {{ article.content | strip_html | truncate: 20 }}

strip_newlines

Removes all newlines from the input

truncate(input, characters = 100)

Truncate a string down to x characters. Take care with truncating text which has html elements in it. In these cases you probably want to run the string through the strip_html filter first (see below).

truncatewords(input, words = 15)

Truncate string down to x words

date(input, format)

Reformat a date

• %a - The abbreviated weekday name (``Sun'')
• %A - The full weekday name (``Sunday'')
• %b - The abbreviated month name (``Jan'')
• %B - The full month name (``January'')
• %c - The preferred local date and time representation
• %d - Day of the month (01..31)
• %H - Hour of the day,24-hour clock (00..23)
• %I - Hour of the day,12-hour clock (01..12)
• %j - Day of the year (001..366)
• %m - Month of the year (01..12)
• %M - Minute of the hour (00..59)
• %p - Meridian indicator (``AM'' or ``PM'')
• %S - Second of the minute (00..60)
• %U - Week number of the current year, starting with the first Sunday as the first day of the first week (00..53)
• %W - Week number of the current year, starting with the first Monday as the first day of the first week (00..53)
• %w - Day of the week (Sunday is 0,0..6)
• %x - Preferred representation for the date alone,no time
• %X - Preferred representation for the time alone,no date
• %y - Year without a century (00..99)
• %Y - Year with century
• %Z - Time zone name
• %% - Literal ``%'' character

first(array)

Get the first element of the passed in array

{{ product.images | first | to_img }}

last(array)

Get the last element of the passed in array

{{ product.images | last | to_img }}

newline_to_br

Inserts a <br /> linebreak tag in front of every \n linebreak character.

replace(input, substring, replacement)

Will replace all occurrences of a string with another.

{{ product.description | replace: 'super', 'mega' }}

replace_first(input, substring, replacement)

Will replace the first occurrence of a string with another.

{{ product.description | replace_first: 'super', 'mega' }}

remove(input, substring)

Removes all occurrences of the substring from the input.

{{ product.description | remove: 'way too expensive'}}

remove_first(input, substring)

Removes only the first occurrence of the substring from the input.

{{ product.description | remove_first: 'remove-me'}}

Split

You can divide a string into an array

{% assign somearray = "one two three" | split: ' ' %} One
Two
Three


plus(input, operand)

Gets the result of adding input to operand. When strings are passed, it parses strings as integers before adding.

Showing {{ paginate.current_offset }}-{{ paginate.current_offset | plus: paginate.page_size }} items

minus(input, operand)

Gets the result of subtracting input from operand. When strings are passed, it parses strings as integers before adding.

{{ product.price | minus: 10 | money_with_currency }}

• docs ›
• 

Filters

asset_url

Gives you the url for an asset

{{ 'shop.css' | asset_url }}

camelize

Converts the text into CamelCase

{{ 'camel case' | camelize }} CamelCase

capitalize

Capitalizes the first word

{{ 'capitalize me' | capitalize }} Capitalize me

default_pagination

used in conjunction with the {{ paginate }} liquid tag

global_asset_url

Returns the url for a global asset (global assets are faster than regular asset_url)

{{ 'image.png' | global_asset_url }}

handleize

Strips and converts special characters (%@*$...etc) out of the string, so you can use the text in a url

{{ '100% M&Ms!!!' | handleize }} 100-m-ms

img_tag

Generates an img tag

Basic usage {{ 'image-name.gif' | asset_url | img_tag }} <img src="http://static.shopify.com/s/files/1/0036/9672/assets/image-name.gif?1255697690" alt="" /> To add alt text: {{ 'image-name.gif' | asset_url | img_tag:'whatever alt text' }}

link_to

Generates a html link

Simple {{ 'Click' | link_to: 'http://markdunkley.com' }} <a href="http://markdunkley.com" >Click</a> Add a title {{ 'Click' | link_to: 'http://markdunkley.com','Title text' }} <a href="http://markdunkley.com" title="Title text">Click</a>

link_to_vendor

Generates a html link to the vendor of the product

{{ "Pepsi" | link_to_vendor }} <a title="Pepsi" href="/collections/vendors?q=Pepsi">Pepsi</a>

link_to_type

Generates a html link to the type of the product

{{ "Cola" | link_to_type }} <a title="Cola" href="/collections/vendors?q=Cola">Cola</a>

link_to_tag*

This filter creates a link to all products in a collection that have the given tag.

{% for tag in collection.tags %}
{{ tag | link_to_tag: tag }}
{% endfor %}


link_to_add_tag*

This filter creates a link to all products in a collection that have the given tag and all the previous tags that might have been added already.

{% for tag in collection.tags %}
{{ '+' | link_to_add_tag: tag }} {{ tag }}
{% endfor %}


link_to_remove_tag*

This filter creates a link to all products in a collection that have the given tag and all the previous tags that might have been added already.

{% for tag in collection.tags %}
{{ '+' | link_to_add_tag: tag }} {{ tag }}
{% endfor %}


highlight_active_tag*

This filter creates a span with the class active around the tag if it is active

{% for tag in collection.tags %}
{{ tag | highlight_active_tag | link_to_tag: tag }}
{% endfor %}

money_with_currency

Wraps with the currency symbol and abbreviation

{{ product.price | money_with_currency }} $19.00 CAD

money_without_currency

Formats the price using a decimal

{{ product.price | money_without_currency }} 19.00

money

Adds the currency symbol

{{ product.price | money }} $19.00

pluralize

Specify the pluralized version of the word you need and if the number is greater than 1 it will pluralize it.

{{ 1 | pluralize: 'item', 'items' }} items {{ 4 | pluralize: 'item', 'items' }} item {{ cart.item_count | pluralize: 'item', 'items' }} Will output "item" if the number items in the customers cart is 1, if greater/less than 1 it will output "items"

product_img_url

Generates the product img url

{{ product.featured_image | product_img_url}} http://static.shopify.com/files/shopify_shirt_small.png?1255 Specify the img size {{ product.featured_image | product_img_url: 'thumb' }} http://static.shopify.com/files/shopify_shirt_thumb.png?1255

sort_by

To be used in conjunction with {{ collection.url }} to sort a collection by best-selling, price-ascending, price-descending, title-ascending, title-descending, created-ascending, created-descending. Check out this liquid snippet.

{{ collection.url | sort_by: 'price-ascending' }} /collections/frontpage?sort_by=price-ascending

script tag

Generates a script tag

{{ 'shop.js' | asset_url | script_tag }} <script src="http://static.shopify.com/files/assets/shop.js" type="text/javascript"></script>

stylesheet_tag

Generates a stylesheet tag

{{ 'shop.css' | asset_url | stylesheet_tag }} <link href="http://static.shopify.com/files/assets/shop.css" rel="stylesheet" type="text/css" media="all" />

url_for_type

This filter creates an url for a type name by transforming it to a handle and adding the appropriate directory in front of it to make the url work.

{{ "Used car" | url_for_type }}/collections/types?q=Used+car

url_for_vendor

This filter creates a url for a vendor name by transforming it to a handle and adding the appropriate directory in front of it to make the url work.

{{ "Armani" | url_for_vendor }} /collections/vendor?q=Armani

weight_with_unit

Formats the product variant's weight

{{ product.variants.first.weight | weight_with_unit }} 44.0 kg

within

Used to indicate that the filtered url of a passed in object

{{product.url | within: collection }}

• docs ›
• 

Template variables

blog.liquid

blogs['the-handle'].variable

Access any blog globally in your store {{ blogs['the-handle'].title }}

blog.id

Returns the id of this blog.

blog.handle

This is the accessor for this blog. It is usually the blog's title in underscore with every blank space replaced by a hyphen.

blog.title

Returns the title of this blog (set in Shopify)

blog.articles

Returns all of the blog's articles.

blog.articles_count

Returns the count of all of the blog's articles.

blog.url

Returns the relative URL of the blog.

blog.comments_enabled?

Returns true if comments are enabled for this blog, false otherwise.

blog.moderated?

Returns true if this blog is moderated, false otherwise.

blog.next_article

URL of the next (older) post. It returns false if there is no next article.

{% if blog.next_article %}
{{ 'next post >>' | link_to: blog.next_article }}
{% endif %}

blog.previous_article

URL of the previous (newer) post. It returns false if there is no next article.

{% if blog.previous_article %}
{{ '<< previous post' | link_to: blog.previous_article }}<br/> {% endif %}


blog.all_tags

Returns all the tags of the blog

<ul>
{% for tag in blog.all_tags %}
{% if current_tags contains tag %}
<li class="{{ tag | handleize }} current">{{ tag | link_to_tag: tag }} - current tag</li>
{% else %}
<li class="{{ tag | handleize }}">{{ tag | link_to_tag: tag }}</li>
{% endif %}
{% endfor %}
</ul>

The snippet below works for both article.liquid and blog.liquid

{% if blog.all_tags != blank %}
<h2>Categories</h2>
<ul>
{% for tag in blog.all_tags %}
<li>
<a href="{{ shop.url}}/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
{% endif %}


blog.tags

Returns all tags of all blogs on in this particular collection which match the current view.
This means that if the current view is filtered to only articles with a certain tags this variable will hold all the tags these remaining articles actually have.

article.liquid

article.id

Returns the id of this article.

article.title

Returns the title of this article.

article.author

Returns the name of the author of this article.

article.content

Returns this article's content (the actual article).

article.created_at

Returns the date/time of when this article was created.

article.published_at

Returns the date/time of when this article was last published. Different from article.created_at if you import blog posts or hide/show a blog post.

article.url

Relative url where the blog can be found. Will append #article-id as anchor so that the page should automatically scroll to the corresponding article.

article.comments

Returns all published comments for this article if comments are enabled for the blog that this article belongs to. Otherwise, returns an empty array.

article.comments_count

Returns the number of published comments for this article.

article.comment_post_url

Relative url where comments are listed for this article.

article.comments_enabled?

Returns true if comments are enabled for the blog that this article belongs to, otherwise returns false.

article.moderated?

Returns true if the blog that this article belongs to is moderated, otherwise returns false.

article.excerpt

Renders the article's excerpt {% for article in blog.articles %}
{% if article.excerpt == blank %}
The article has no excerpt so let's truncate the text instead:
{{ article.content | strip_html | truncate: 30 }}
{% else %}
Here is the article excerpt
{{ article.excerpt }}
{% endif %}
{% endfor %}


article.tags

Returns all the tags for an article

comment.id

Returns the id of this comment.

comment.author

Returns the author of this comment.

comment.email

Returns the e-mail address of the author.

comment.content

Returns the body of the comment (in html).

comment.status

Returns the status of the comment. Will be one of 'unapproved', 'published', 'removed', or 'spam'.

comment.url

Relative url where the article can be found. Will append the comment's id as anchor so that the page should automatically scroll to the corresponding comment.

collection.liquid

collections['the-handle'].variable

Access any collection globally in your store {{ collections['the-handle'].url }}

collection.id

Returns the id of this collection

collection.title

Returns the title of this collection

collection.handle

Returns this collection's handle, which is by default its title in lowercase. Whitespaces in the original title are replaced by dashes in the handle. The handle of a collection with the title "Winter Sale" would be "winter-sale".

collection.description

Returns the description of this collection

collection.all_types

Returns a list of all unique product types in the collection <ul>
{% for product_type in collection.all_types %}
<li class="{{ product_type | handleize }}">
{{ product_type | link_to_type }}
</li>
{% endfor %}
</ul>

collection.all_vendors

Returns a list of all unique vendors in the collection Shop by vendors:
<ul>
{% for product_vendor in collection.all_vendors %}
<li class="{{ product_vendor | handleize }}">
{{ product_vendor | link_to_vendor }}
</li>
{% endfor %}
</ul>

collection.products

Returns a collection of all products that are associated with this collection which match the current view. This takes into account things like paginate and selected tags.

collection.products_count

Returns a count of all of the products in this collection which match the current view. This takes into account things like paginate and selected tags.

collection.all_products

Returns all products that are associated with this collection. Default limit is 50, use pagination for more products

collection.all_products_count

Returns a count of all of the products in this collection.

collection.tags

Returns all tags of all products on in this particular collection which match the current view. This means that if the current view is filtered to only products with a certain tags this variable will hold all the tags these remaining products actually have.

collection.all_tags

This shows all tags associated with the collection.

collection.next_product

These methods are available if you scope your product pages to a certain collection.

collection.previous_product

These methods are available if you scope your product pages to a certain collection.

collection.url

Returns the url for the specific collection.

pages.liquid

page['the-handle'].variable

Access any page globally in your store {{ page['the-handle'].variable }}

page.id

Returns the id of this page.

page.handle

This is the accessor for this page. It is usually the page's title in underscore with every blank space replaced by a dash.

page.title

Returns the title of this page

page.content

Returns the content of this page.

page.url

Relative url where the page can be found.

page.author

Returns the author of this page.

Images

image.id

The image unique ID.

image.product_id

The id of the product the image belongs to. Returns the same value as product.id

image.position

The position of the image among other images of the product. The first image (featured) returns the value "1"

image.src

The relative path to the product image. It must be used in conjunction with the product_img_url filter. Returns the same value as {{ image }} {{ image.src | product_img_url: 'original' }}

image.alt

The description of the image. If image.alt is blank it will render product.title

---

Customers

customer.accepts_marketing

Returns true or false if customers accepts marketing

customer.addresses

Use in a loop statement in conjunction with "address.[variable]"

{% for address in customer.addresses %}
{{ customer_address.first_name }}
or {{ customer_address.phone }}
{% endfor %}

customer.addresses_count

Total number of addresses for this customer

customer.default_address

Use in a loop statement in conjunction with "address.[variable]"

{% for address in customer.default_address %}
{{ customer_address.first_name }}
or {{ customer_address.phone }}
{% endfor %}

customer.email

Returns customer email

customer.first_name

Returns the first name of the customer

customer.has_account

Returns true or false if the customer has an account

customer.id

Returns the customer id

customer.last_name

Returns the last name of the customer

• Docs ›
•