{% comment %}
Comments will be hidden

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

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

{% if user.name == 'elvis' %}
hey elvis
{% elsif user.name == 'Mark' %}
hey mark
{% else %}
hi stranger
{% endif %}

{% unless %}
If not true, then it will do something
username is not "elvis"

{% unless user.name == 'elvis' %}
hey ugly
{% endunless %} 

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

{% cycle %}
Use when you need to alternate between something.
Basic example

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

{% 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
For Loop [product are: hat, pez, pad]

{% for product in collection.products %}
{{ product.name }},
{% endfor %} 

{% for product in collection.products limit:2 %}
{{ product.name }},
{% endfor %} 

{% tablerow %}
Generate table rows/cells
You have a few options
cols:
limit:
Example [products are: hat, pez, pad]

{{% tablerow product in collection.products cols: 2 %}

{% endtablerow %}

{{ product.title }}

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

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

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

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

{% decrement variablename %}
{% decrement variablename %}

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

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

{% productlink %} 

{% include %}
Insert a snippet into your layout
Within the snippet color.liquid

color: '{{ color }}'
shape: '{{ shape }}'

{% assign shape = 'circle' %}
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}
{% assign shape = 'square' %}
{% include 'color' with 'red' %}

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

You can use operators in all the above logic statements

2 types of liquid tags
We use liquid to generate our code. There are 2 types
Will output something

{{ 'output me' }}

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

What is a handle?

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

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

prepend(input)

size(input)
Return the size of an array or string

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

join(input, segmenter = ' ')
"joins" an array with the specified character. Example:

{{ product.tags | join: ', ' }}

downcase(input)

upcase(input)

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

truncate(input, characters = 100)

truncatewords(input, words = 15)

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

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

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

asset_url
Gives you the url for an asset

{{ 'shop.css' | asset_url }}

camelize
Converts the text into CamelCase

{{ 'camel case' | camelize }}

capitalize
Capitalizes the first word

{{ 'capitalize me' | capitalize }}

default_pagination

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

img_tag
Generates an img tag
Basic usage

{{ 'image-name.gif' | asset_url | img_tag }}

{{ 'image-name.gif' | asset_url | img_tag:'whatever alt text' }}

link_to
Generates a html link
Simple

{{ 'Click' | link_to: 'http://markdunkley.com' }}

{{ 'Click' | link_to: 'http://markdunkley.com','Title text' }}

link_to_vendor
Generates a html link to the vendor of the product

{{ "Pepsi" | link_to_vendor }}

link_to_type
Generates a html link to the type of the product

{{ "Cola" | link_to_type }}

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

money_without_currency
Formats the price using a decimal

{{ product.price | money_without_currency }}

money
Adds the currency symbol

{{ product.price | money }}

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

{{ 4 | pluralize: 'item', 'items' }}

{{ cart.item_count | pluralize: 'item', 'items' }}

product_img_url
Generates the product img url

{{ product.featured_image | product_img_url}}

{{ product.featured_image | product_img_url: 'thumb' }}

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.

{{ collection.url | sort_by: 'price-ascending' }}

script tag
Generates a script tag

{{ 'shop.js' | asset_url | script_tag }} 

stylesheet_tag
Generates a stylesheet tag

{{ 'shop.css' | asset_url | stylesheet_tag }}

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

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

weight_with_unit
Formats the product variant's weight

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

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

{{product.url | within: collection }}

blogs['the-handle'].variable
Access any blog globally in your store

{{ blogs['the-handle'].title }}

blog.id

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

blog.articles

Returns all of the blog's articles. 

blog.articles_count

blog.url

blog.comments_enabled?

blog.moderated?

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

article.id

article.title

article.author

article.content

article.created_at

article.published_at

article.url

article.comments

article.comments_count

article.comment_post_url

article.comments_enabled?

article.moderated?

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

comment.id

comment.author

comment.email

comment.content

comment.status

comment.url

collections['the-handle'].variable
Access any collection globally in your store

{{ collections['the-handle'].url }}

collection.id

collection.title

collection.handle

collection.description

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

collection.products_count

collection.all_products

collection.all_products_count

collection.tags

collection.all_tags

collection.next_product

collection.previous_product

collection.url

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

{{ page['the-handle'].variable }}

page.id

page.handle

page.title

page.content

page.url

page.author

image.id

image.product_id

image.position

image.src

image.alt

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

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

customer.first_name

customer.has_account

customer.id

customer.last_name

all_products['the-handle'].variable
Access any product globally in your store. You can do this with most other objects like blogs and collections.

{{ all_products['the-handle'].title }}

product.id

product.title

product.handle

product.type

product.vendor

product.price

product.price_min

product.compare_at_price_min

product.price_max

product.compare_at_price_max

product.price_varies

product.compare_at_price_varies

product.url

product.featured_image

product.images
Returns a collection of all image filenames for this product.

{% for image in product.images %} {{ image.src | product_img_url: 'grande' }} {% endfor %}

product.description

product.content

product.variants

product.available

product.template_suffix

product.selected_variant

product.selected_or_first_ available_variant

product.collections

product.tags

product.options

variant.id

variant.title

variant.price

variant.image

variant.compare_at_price

variant.available

variant.inventory_management

variant.inventory_quantity

variant.weight

variant.sku

variant.option1

variant.option2

variant.option3

cart.item_count

cart.items

cart.total_price

cart.total_weight

cart.note

cart.attributes

linklists['the-handle'].variable
Access any blog globally in your store

{{ linklists['footer'].handle }}

linklist.title

linklist.handle
Returns the handle of this linklist

{{ linklists.footer.handle }}

linklist.links

linklist.object

link.title

link.active
Returns true or false if the link is active

{% for link in linklists.main-menu.links %}
<li>
<a {% if link.active %}class="active"{% endif %}>
{{ link.title }}
</a>
</li>
{% endfor %}

link.url

Returns the url of this link 

link.type
Returns the type of the object in link.object, you can usecollection_link, http_link, product_link, relative_link, page_link, blog_link

{% if link.type == 'collection_link' %} {% endif %} 

link.object
If you're pointing to a collection, then link.object is a collection object. If you're pointing to a product page, then link.object is a product object.

{% if link.type == 'collection_link' %}
{% if link.object.all_tags.size > 0 %} 

shop.address.summary

shop.address.street

shop.address.city

shop.address.province

shop.address.country

shop.address.zip

shop.currency

shop.collections_count

shop.description
Returns a description of the site

{% if shop.description != blank and template == "index" %} <meta name="description" content="{{ shop.description }}"> {% endif %}

shop.domain

shop.email

shop.name

shop.enabled_payment_types
Returns an array of accepted payment methods for the shop. You can also get SVG icons by passing the "payment_type_img_url".

{% for type in shop.enabled_payment_types %} <img src="{{ type | payment_type_img_url }}" /> {% endfor %} 

shop.metafields

shop.money_format

shop.money_with_currecny_format

shop.locale

shop.password_message

shop.permanent_domain

shop.url

shop.products_count

shop.vendors
Returns a list of unique product vendors

<ul>
{% for product_vendor in shop.vendors %}
<li class="{{ product_vendor }}">{{ product_vendor | link_to_vendor }}</li>
{% endfor %}
</ul>

shop.types
Returns a list of all unique product types in the shop

<ul>
{% for product_type in shop.types %}
<li>
{{ product_type | link_to_type }}
</li>
{% endfor %}
</ul>