Plain-English Guide to Shopify Liquid

Liquid is Shopify’s template engine that brings backend store data to the public-facing front-end. Merchants who understand Liquid can unlock new store customizations without needing a developer.

In this article, I will explain the basics.

Liquid is a bridge between a store’s content and how it’s displayed. The template resides in a file with the .liquid suffix for every page or section. Hence main-product.liquid contains the product template.

Shopify organizes files based on what they do. For example, the “sections” folder contains files defining entire parts of a site, such as headers or a product gallery. The “snippets” folder applies to smaller components, such as buttons or a specific design element.

Snippets can reside in section folders. A merchant could create a custom button in a snippet file and include it in the section folder, for example. To place “snippet_name.liquid” inside “main-product.liquid,” I would position my cursor at the right point in the product file and add {% render ‘snippet_name’ %}.

Syntax

Liquid functions with defined terms and phrases — a syntax.

Variables

Variables are the representation of dynamic information. For example, {{ product.title }} dynamically displays the title of the product. Note how Liquid uses double curly braces ( {{ }} ) to pull the variable information.

Objects

Objects are collections of data. Examples include product, collection, and customer.

• product holds all the information about a specific product, such as title, ID, description, and price. To display a product’s price, create a variable {{ product.price }} where product is the object and price is the property. Shopify publishes a list of all product object properties.

• collection represents a group of products, such as a category. Pull information from the collection object for every product assigned to it or for assigned information such as title, description, and product count. Here’s Shopify’s list of collection properties.

• customer contains info about the logged-in user, such as name, email address, physical address, marketing consent, and order preferences. Here are all customer properties.

Tags

Tags add logic to Liquid code via two main types, “control flow” and “iteration.”

Control-flow tags drive logic, such as if/else statements.

{% if product.available %}
This product is in stock!
{% else %}
Sorry, this product is out of stock.
{% endif %}

Iteration tags repeat actions, such as looping through products in a collection.

{% for product in collection.products %}
{{ product.title }}
{% endfor %}

Filters

Filters transform the data Liquid retrieves. For example:

• {{ product.title | upcase }} displays the product title in uppercase letters.
• {{ product.price | times: 1.2 }} increases the price by 20%.

Custom Message Example

Here’s a real-life example. Imagine you want to display a custom message on your product pages under the title when an item is in stock or out of stock.

Here’s how to do it.

1. In the Shopify admin, navigate to Online Store > Themes > Actions (left button with dots …) > Edit Code.
2. Find and open the main-product.liquid file from the sections folder.
3. Search {%- when ‘title’ -%} using (Ctrl + F) to locate the title.

Position the cursor under the closing /div and add:

{% if product.available %}
This product is available! Get it while stocks last!
{% else %}
Sorry, this product is currently out of stock.
{% endif %}

Add a custom message when an item is in stock or out of stock. Click image to enlarge.

Save and preview. Save your changes and preview the store. In this example, shoppers will see a green message when an item is in stock and a red message when out of stock.

The message “Sorry, the product is currently out of stock” appears in red. Click image to enlarge.

Getting Started

Experimenting and testing is the best way to learn.

• Back up your theme. Always duplicate your theme before changing it. Click Actions > Duplicate in the Themes section of the admin.
• Use Preview mode. Shopify allows previews of changes before taking them live.
• Start small. Begin with minor changes.

For more on Liquid, see: