Liquid reference

Thanks to Shopify developers, they created Liquid a template language It's available as an open source project on GitHub, and is used by many different software projects and companies.

Yet, as Krembi, we slightly improved (influenced by twigjs for some features) so that there are some small differences. Check the Best Practices page for detailed work. This reference documents the Liquid tags, filters, functions and objects that you can use to build Krembi Pro Themes.

What is a 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

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.

Code

<title>
{{ page_title }}
</title>
{% if page_description -%}
<meta name="description" content="{{ page_description | truncate: 150 }}">
{%- endif %}

Output

<title>
  Health potion
</title>
<meta name="description" content="Are you low on health? Well we've got the potion just for you! Just need a top up? Almost dead? In between? No need to worry because we have a ...">

---

Defining logic with tags

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

Code

    {% if product.title == 'Health potion' %}
    This is a rare potion. Use it sparingly!
    {% endif %}

Data

{
    "product": {
        "title": "Health potion"
    }
}

Output

This is a rare potion. Use it sparingly!

tip

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

---

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.

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

Code

{% # product.title -> Health potion %}

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

Data

{
    "product": {
        "title": "Health potion"
    }
}

Output

POTION

tip

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