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

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

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 ›
• 

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><input type="textarea" rows="4" cols="20" id="my_textarea" name="my_textarea" class="textarea" value=""/></td>
</tr>
                                    

Drop-down menus

<tr>
  <td><label for="my_dropdown">Name of this Setting</label></td>
  <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>
  <td><label for="my_checkbox">Name of this Setting</label></td>
  <td><input type="checkbox" id="my_checkbox" name="my_checkbox" value="1" /></td>
</tr>
                                    

File Uploads

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

CSS/Specialty Classes

<input name="text_color" class="color" type="text" 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" />

                                    

onigi credit

Necessary for any themes on the theme store

{{ powered_by_link }}
                                    

• 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://onigi.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://onigi.com' }} <a href="http://onigi.com" >Click</a> Add a title {{ 'Click' | link_to: 'http://onigi.com','Title text' }} <a href="http://onigi.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="/website/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="/website/vendors?q=Cola">Cola</a>

link_to_tag*

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

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


link_to_add_tag*

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

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


link_to_remove_tag*

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

{% for tag in products.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 products.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.onigi.com/files/onigi_shirt_small.png?1255 Specify the img size {{ product.featured_image | product_img_url: 'thumb' }} http://static.onigi.com/files/onigi_shirt_thumb.png?1255

script tag

Generates a script tag

{{ 'shop.js' | asset_url | script_tag }} <script src="http://static.onigi.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.onigi.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 }}

• 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

split(input, segmenter = ' ') new

"split" a string with the specified character. Example:

{{ 'amy, julia, cassandra' | split: ', ' | last }} cassandra

index(array, index) new

Get array item from index. Example:

{{ 'amy, julia, cassandra' | split: ', ' | index:1 }} julia

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. {{ page.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'}}

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 ›
• 

Global variables

---

Index

is_facebook

Returns boolean.

NO_PRODUCT

Returns boolean. If products empty is TRUE.

template

Returns a string of template.

content_for_layout

Renders the current template.

current_url

Returns a current url.

settings

Returns settings of the theme.

IS_LOGIN

Returns boolean.

page_title

Returns the title of this cart (set in Cart)

template

Returns the title of this cart (set in checkout cart)

categories

Returns all categories of this shop.

breadcrumb_name

Returns category name of this shop.

breadcrumb_link

Returns the url of this category.

brands

Returns all brands of this shop.

List Brands
[Available properties : id, name] <ul>
{% for brand in brands %}
<li>
    <a href="{{brand.id}}">{{brand.name}}</a>
</li>
{% endfor %}
</ul>

---

Pages

pages

Returns a collection of pages.

Create Page Links
[Available properties : id, title, url, content, category_id] <ul>
{% for page in pages %}
<li>
    <a href="{{page.url}}">{{page.title}}</a>
</li>
{% endfor %}
</ul>

List Specific Category of Pages <ul>
{% for page in pages %}
{% if page.category_id == 50 %}
  <li>
      <a href="{{page.url}}">{{page.title}}</a>
  </li>
{% endif %}
{% endfor %}
</ul>

page_categories

Returns a collection of page categories.

List Page Categories [product are: news, others]
[Available properties : id, name, description, parent_id] {% for page_category in page_categories %}
{{page_category.name}},
{% endfor %} news, others

---

Products

products.items

Returns all items of products.

List Products [Default Category:All, per_page: 9 page:1] <ul>
{% for product in products.items %}
<a href="{{product.url}}">
   <img src="{{product.picture}}"/><br/>
   <strong>{{product.name}}</strong><br/>
   {{product.price | money}}
</a>
{% endfor %}
</ul>

List Specific Category of Products [Category:4213, per_page: 12 page:1] <ul>
{% for product in products.items category:4213 per_page:12 page:1 %}
<a href="{{product.url}}">
   <img src="{{product.picture}}"/><br/>
   <strong>{{product.name}}</strong><br/>
   {{product.price | money}}
</a>
{% endfor %}
</ul>

products.pagination

Returns a pagination of products.

products.paginations

Returns all paginations of products.

products.per_page

Returns a page of products.

products.total

Returns a total of products.

---

Shop

shop.name

Returns a string with the shop's name

shop.package

Returns a package of this shop.

shop.url

Returns a full url to your shop. Note: This depends on the primary address configured under preferences/DNS Administration

shop.current_url

Returns a current url to your shop.

shop.is_facebook

Returns value "is facebook" of this shop.

---

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_items

Returns the total of all the items added up in your shopping cart.

cart.price

Returns the prices in the shopping cart.

cart.url

Returns the url of this cart. You need this for hyperlinking to this product's detail page from anywhere else in the store

---

---

Dailydeal

dailydeal.product_id

Returns the id product of this dailydeal

dailydeal.product_name

Returns the name product of this dailydeal

dailydeal.product_description

Returns the descriptio product of this dailydeal

dailydeal.product_price

Returns the price product of this dailydeal

dailydeal.product_discount_price

Returns the discount price product of this dailydeal

dailydeal.product_link

Returns the product link of this dailydeal

dailydeal.product_available

Returns the product available of this dailydeal

dailydeal.picture

Returns a collection of image size 160x160 of this dailydeal.

dailydeal.picture_large

Returns a collection of image size 500x500 of this dailydeal

dailydeal.picture_small

Returns a collection of image size 60x60 of this dailydeal

dailydeal.day_left

Returns the day left of this dailydeal

dailydeal.hour_left

Returns the hour left of this dailydeal

dailydeal.minute_left

Returns the minute left of this dailydeal

dailydeal.second_left

Returns the second left of this dailydeal

dailydeal.end

Returns the end of this dailydeal

dailydeal.servertime

Returns the server time

dailydeal.add_to_cart_link

Returns the link add to cart of this dailydeal

dailydeal.time_left

Returns the time left of this dailydeal

---

Testimonial

testimonials.total

Returns the total row of testimonials

testimonials.pagination

Returns array pagination of testimonials

testimonials.items

Returns array of testimonials

testimonial.id

Returns the id of testimonial

testimonial.store_id

Returns the id of your store.

testimonial.name

Returns a string with the testimonial's name

testimonial.email

Returns testimonial's email

testimonial.website

Returns testimonial's website

testimonial.message

Returns testimonial's publish

testimonial.created_date

Returns testimonial's created date

---

Menus

menus

Returns list of menu List all menu example <ul>
{% for menu in menus %}
   <li>{{menu.id}} - {{menu.title}}</li>
{% endfor %}
</ul> List specific menu id with items example <ul class="nav">
   {% for menu in menus.main_menu.items %}
   {% if menu.has_child %}
   <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown">{{menu.title}} <b class="caret"></b></a>
      <ul class="dropdown-menu">
         {% for submenu in menu.childs %}
         <li><a href="{{submenu.url}}">{{submenu.title}}</a></li>
         {% endfor %}
      </ul>
   {% else %}
   <li>
      <a href="{{menu.url}}">{{menu.title}}</a>
   {% endif %}
   </li>
   {% endfor %}
</ul>
List specific menu id with items example 2 <ul class="nav">
   {% assign main_menu = menus | index: 'main_menu' %}
   {% for menu in main_menu.items %}
   {% if menu.has_child %}
   <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown">{{menu.title}} <b class="caret"></b></a>
      <ul class="dropdown-menu">
         {% for submenu in menu.childs %}
         <li><a href="{{submenu.url}}">{{submenu.title}}</a></li>
         {% endfor %}
      </ul>
   {% else %}
   <li>
      <a href="{{menu.url}}">{{menu.title}}</a>
   {% endif %}
   </li>
   {% endfor %}
</ul>


• wiki ›
•