Overview

Liquid reference

Liquid is a template language. This reference documents the Liquid tags, filters, and objects that you can use to build Shoplazza Themes.

What is template language?

A template language allows you to create a single template to host static content, and dynamically insert information depending on where the template is rendered. For example, you can create a product template that hosts all of your standard product attributes, such as the product image, title, and price. That template can then dynamically render those attributes with the appropriate content, depending on the current product being viewed.

Liquid basics

The 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. Liquid also includes basic logical and comparison operators for use with tags. Navigate to Liquid Basic.

<title>{{ page_title}}</title>
<meta name="description" content="{{ page_description | truncatebytes: 320, '' }}">

<title>Geek</title>
<meta name="description" content="Full of story sense, suitable for building brand websites, designed for DTC type merchants theme.">

Defining logic with tags

Liquid tags are used to define the logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered. Navigate to Tags.

📘

Deep Dive

{% %} Curly brace percentage delimiters denote logic and control flow.

{% if product.title == 'Tulip Dangles' %}
  It has an iconic silhouette.
{% endif %}

{
  "product": {
    "title": "Tulip Dangles"
  }
}

It has an iconic silhouette.

Modifying output with filters

Liquid filters are used to modify the output of variables and objects. 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. Navigate to Filters.

Multiple filters can be used on one output. They’re parsed from left to right.

📘

Deep Dive

{{ | }} Filters are placed within an output tag and denoted by a pipe character.

{{ product.title | upcase | remove: 'TULIP' }}

{
  "product": {
    "title": "Tulip Dangles"
  }
}

DANGLES

Referencing objects

Liquid objects represent variables that you can use to build your theme. Object types include, but aren't limited to:

• Store resources, such as a collection or product and its properties
• Standard content that is used to power Shoplazza themes, such as content_for_header
• Functional elements that can be used to build interactivity, such as paginate and search

Objects might represent a single data point or contain multiple properties. Some products might represent a related object, such as a product in a collection. Navigate to Objects.

Scope

Some objects can be accessed globally, and some are available only in certain contexts. Refer to the specific object reference to find its access scope.

Creating variables

You can also create your own variables using variable tags. Variables are treated like objects syntactically.

📘

Deep Dive

{{ }} Double curly brace delimiters denote an output.

<div class="product-detail">
  <div class="product-title">
    {{ product.title }}
  </div>
  <div class="product-price">
    {{ product.price | money }}
  </div>
</div>

{
  "product": {
    "title": "Tulip Dangles",
    "price": "12.88"
  }
}

<div class="product-detail">
  <div class="product-title">
    Tulip Dangles
  </div>
  <div class="product-price">
    $12.88
  </div>
</div>