Liquid cheat sheet
Summary
This Liquid cheat sheet covers essential syntax, filters, tags, and logic for creating dynamic templates. It is designed to help developers efficiently use Liquid in web development and e-commerce projects.
Introduction #
Liquid is a templating language created by Shopify that allows developers to dynamically generate content in web applications. It uses placeholders, logic, and loops to render HTML dynamically, making it useful for themes, emails, and e-commerce pages. Liquid operates in a sandboxed environment, ensuring security while enabling customization. It is widely used in Shopify themes and other platforms that require flexible, user-generated content.
Basics of liquid syntax #
Liquid uses a combination of objects, tags, and filters to create dynamic content. Objects are variables that contain data, tags control logic and flow, and filters modify output.
- Objects:
Variables enclosed in double curly braces, e.g.,
{{ product.title }}. - Tags
Enclosed in curly braces and percentage signs, e.g.,
{% if condition %}...{% endif %}. - Filters
Modify output and are used with a pipe (|), e.g.,
{{ product.price | money }}.
Liquid tags #
if #
Used for conditional logic.
{% if product.available %}
In stock
{% else %}
Out of stock
{% endif %}
for #
Iterates over a collection.
{% for item in collection %}
{{ item.title }}
{% endfor %}
assign #
Assigns a value to a variable.
{% assign discount = 0.1 %}
capture #
Captures content into a variable.
{% capture message %}
Welcome to our store!
{% endcapture %}
include #
Includes a template file.
{% include 'header' %}
Liquid filters #
default #
Provides a default value if the variable is empty.
{{ product.description | default: "No description available." }}
date #
Formats a date.
{{ "now" | date: "%Y-%m-%d" }}
money #
Formats a number as currency.
{{ product.price | money }}
split #
Splits a string into an array.
{% assign tags = product.tags | split: ',' %}
join #
Joins an array into a string.
{{ tags | join: ', ' }}
Advanced liquid features #
case #
Handles multiple conditions.
{% case product.type %}
{% when 'shirt' %}
This is a shirt.
{% when 'pants' %}
This is a pair of pants.
{% else %}
Product type not recognized.
{% endcase %}
cycle #
Cycles through values in a loop.
{% for item in collection %}
<div class="{% cycle 'odd', 'even' %}">{{ item.title }}</div>
{% endfor %}
raw #
Prevents Liquid code from being processed. Simply use raw and endraw, each written inside the {% %} tag markers. Everything between the tags will not be interpreted by Liquid.
Further readings #
Sources and recommended, further resources on the topic:
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
Liquid cheat sheet by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/liquid-cheat-sheet">Liquid cheat sheet</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
