Shopify Cheat Sheet

Liquid

Logic

{% comment %}

Comments will be hidden

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

{% 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' %}

{% 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

{% 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

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

wiki ›

Images

sizes

16x16 pico
32x32 icon
50x50 thumb
100x100 small
160x160 compact
240x240 medium
480x480 large
600x600 grande
1024x1024 original size

wiki ›

Essentials

What is liquid and what are tags: We use liquid to generate our code. There are 2 types
Will output something {{ 'output me' }} output me Logic statement {% logic %}
What is a handle?: A handle is how we name our elements (collections, products, blogs, etc)

wiki ›

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?

wiki ›

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 text
{{ '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_vendor }} <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
plualize: Specify the pluzalization 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
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

wiki ›

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(text)

This will strip all html tags from the text passed to the block. Very useful in combination with truncate.

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 }}

newlines_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'}}

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 }}

wiki ›

Template Objects

blog.liquid

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.

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.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.

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

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.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.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.

wiki ›

Template Objects

Product.liquid

product.id: Returns the id of this product
product.title: Returns the title of this product
product.handle: Returns the handle of this product
product.type: Returns the type of this product, e.g. "snowboard", "headphones"
product.vendor: Returns the vendor of this product, e.g. "Sony", "Apple"
product.price: Returns the price for this product. By default this is the minimum price.
product.price_min: Returns the minimum price for this product.
product.compare_at_price_min: Returns a "compare at" price, e.g. recommended retail price for the least expensive variant of this product.
product.price_max: Returns the maximum price for this product.
product.compare_at_price_max: Returns a "compare at" price, e.g. recommended retail price for the most expensive variant of this product.
product.price_varies: Returns true if the product's variants have varying prices. Returns false if all variants have the same price.
product.compare_at_price_varies: Returns true if the compare_at_price_min is different from compare_at_price_max
product.url: Returns the url of this product. You need this for hyperlinking to this product's detail page from anywhere else in the store
product.featured_image: Returns the filename with a relative path of the featured image.
product.images: Returns a collection of all image filenames for this product.
product.description: Returns the description of this product.
product.content: Alias of product.description.
product.variants: Returns a collection of all of this product's variants.
product.available: Returns false if all variants' quantities are zero and their policies are set to "stop selling when sold out".
product.collections: Returns a list of collections a product is listed in.
product.tags: Returns a list of the product's tags (represented by simple strings).
product.options: Returns a list of the product's options. By default, there is always at least one option, but there can be up to three. You can do a check to see how many Options a product may have by using the size filter.

variant.id: Returns the variant’s unique id
variant.title: Returns the concatenation of all the variant's option values, joined by " / ".
variant.price: Returns the variants price
variant.compare_at_price: Returns the variant’s recommended retail price
variant.available: Returns whether the variant is available for sale or not.
variant.inventory_management: Returns the variant’s inventory tracking service
variant.inventory_quantity: Returns how many of this variants are in stock for this shop
variant.weight: Returns the weight of the variant
variant.sku: Returns the variant's SKU
variant.option1: Returns the value of option1 for given variant
variant.option2: If a product has a second option defined, then returns the value of this variant's option
variant.option3: If a product has a third option defined

Cart

cart.item_count: Returns the number of items currently in the shopping cart.
cart.items: Returns all items in the shopping cart. Each one is of the type Line_Item. You will want to iterate through the return value (see example)
cart.total_price: Returns the total of all the prices added up in your shopping cart.
cart.total_weight: Returns the total weight of all items in the cart combined. Weight is always returned as grams. Use weight or weight_with_unit from the filter library to display the actual weight in your preferred unit system.
cart.note: allows you the option of adding a note field to your checkout template. Usage of this feature is very flexible. The general idea is that you simply define an input field named “note” in the form that submits to ”/cart” in cart.liquid.
cart.attributes: The attributes property is similar to the note property above in that it is an optional field you can add to your shop’s checkout form. Simply define an input field named “attributes[]” and it will be captured automatically and displayed on the order detail page in your admin area.

Linklist

linklist.id: Returns the id of this linklist
linklist.title: Returns the title of this linklist
linklist.handle: Returns the handle of this linklist
linklist.links: Returns a collection of this linklist's links.
linklist.object: The object the link points to. If the link points to a product {{link.product.title}} will, for example, print the name of the product. This is a very powerful feature and can be used for many complex liquid tasks.

Shop

shop.name: Returns a string with the shop's name
shop.currency: Returns a string with the name of the currency (usually a 3 letter representation, e.g. USD) this shop uses.
shop.url: Returns a full url to your shop. Note: This depends on the primary address configured under preferences/DNS Administration
shop.domain: Returns the domain of your shop. Note: This depends on the primary address configured under preferences/DNS Administration
shop.products_count: Returns the number of products you have online.
shop.collections_count: Returns the number of collections you have created.

wiki ›