Exploring LIQUID

shohanur rahmanshohanur rahman
5 min read

Liquid is used to dynamically output objects and their properties. You can further modify that output by creating logic with tags, or directly altering it with a filter. Objects and object properties are output using one of six basic data types.

Object Handles:

Objects that represent store resources, such as products, collections, articles, and blogs, have handles for identifying an individual resource. The handle is used to build the URL for the resource, or to return properties for the resource. Other objects like linklists, links, and settings also have handles.

All objects that have a handle have a handle property. For example, you can output a product's handle with product.handle. You can reference an object, from within its parent object, by its handle in two ways:

  1. Dot notation .: Accepts the handle directly without quote.

  2. Square bracket notation [ ]: Accepts a handle wrapped in quotes ', a Liquid variable, or an object reference.

{% unless pages.about-us == empty %} 
  <h1>{{ page.title }}</h1>
  <div>
    {{ page.content }}
  </div>
{% endunless %}
{% unless pages["about-us"] == empty %}

Handles are automatically generated from the resource title following a fixed set of rules. Handles need to be unique, so if a duplicate title is used, then the handle is auto-incremented by one. For example, if you had two products called Potion, then their handles would be potion and potion-1. After a resource has been created, changing the resource title doesn't update the handle. You can modify a resource's handle within the Shopify admin.

  • Individual links from linklists have handles based on their titles. These handles can't be modified directly.

  • Individual settings, from settings_schema.json, sections, or blocks, get their handle from their id property.

Datatypes:

Liquid output can be one of six data types.

  1. String: Any series of characters, wrapped in single or double quotes. (You can check whether a string is empty with the blank object.)

  2. Number: Numeric values, including floats and integers.

  3. Boolean: A binary value, either true or false.

  4. Array: A list of variables of any type. You can’t initialize arrays using only Liquid. You can, however, use the split filter to break a single string into an array of substrings.

  5. Empty: An empty object is returned if you try to access an object that is defined, but has no value. For example a page or product that’s been deleted, or a setting with no value.

  6. nil: An undefined value. Tags or outputs that return nil don't print anything to the page. They are also treated as false. A string with the characters “nil” is not treated the same as nil. You can compare an object with empty to check whether an object exists before you access any of its attributes.

Order of Operations:

When using more than one operator in a tag, the operators are evaluated from right to left, and you can’t change this order. Parentheses () aren’t valid characters within Liquid tags. If you try to include them to group operators, then your tag won’t be rendered.

{% unless true and false and false or true %}
  This evaluates to false, since Liquid checks tags like this:
  step 1: true and (false and (false or true))
  step 2: true and (false and true)
  step 3: true and false
  step 4: false
{% endunless %}

Truthy and Falsy:

All data types must return either true or false. Those which return true by default are called truthy. Those that return false by default are called falsy. In liquid only false and nil are falsy. Rest of them true, number, 0, string, empty string, array, empty array, object, empty object, page are all truthy. Because nil and false are the only falsy values, you need to be careful how you check values in Liquid. A value might not be in the format you expect, but still be truthy. For example, empty strings are truthy, so you need to check whether they’re empty with blank. EmptyDrop objects are also truthy, so you need to check whether the object you’re referencing is empty.

{% unless pages.recipes == empty -%}
  {{ pages.recipes.content }}
{%- else -%}
  No page with this handle exists.
{%- endunless %}

{% if settings.featured_potions_title != blank -%}
  {{ settings.featured_potions_title }}
{%- endif %}

Tags

Liquid tags are used to define logic that tells templates what to do. Tags are wrapped with curly brace percentage delimiters {% %}. The text within the delimiters doesn't produce visible output when rendered.

Filters

Liquid filters are used to modify Liquid output. To apply filters to an output, add the filter and any filter parameters within the output's curly brace delimiters {{ }}, preceded by a pipe character |.

Objects

Liquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. Objects might represent a single data point, or contain multiple properties. Some properties might represent a related object, such as a product in a collection. Liquid objects are also often referred to as Liquid variables. Objects, along with their properties, are wrapped in curly brace delimiters {{ }}.

The way that you access an object depends on the object and the context in which you want to access it. An object might be accessed in the following ways:

  • Globally: The object can be accessed directly in any Liquid theme file, excluding checkout.liquid and Liquid asset files.

  • In a template: The object can be accessed directly in specific templates, or in sections or blocks included in the template. For example, you can access the product object directly in a product template, or a section referenced in a product template.

  • Through a parent object: Many objects are returned by another object, or as a property of a parent object. For example, you can access article objects through the global articles object, or through the articles property of the blog object.

Refer to each object to learn about how it can be accessed.

This was a short overview from the Shopify doc. Dive more while developing. The doc is quiet huge. Learn while doing approach from this point.

0
Subscribe to my newsletter

Read articles from shohanur rahman directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

shohanur rahman
shohanur rahman