What is Shopify Liquid? A Beginner’s Guide to Objects & Tags

Liquid is the backbone of Shopify theme development. It is a flexible templating language designed to help you build dynamic e-commerce websites. When coupled with HTML, CSS, and JavaScript, Liquid brings life to your storefront by rendering your store's unique data whenever a user loads a page.

Instead of coding individual HTML pages for every URL on your Shopify store, Liquid allows you to create templates that host static content. Liquid then dynamically inserts information depending on variables such as the template context or the logged-in user.

Here is a breakdown of how Liquid works and how to use it to build a product display.

The Core Structure of Liquid

Liquid primarily consists of three main components: Objects, Tags, and Filters.

1. Liquid Objects

Objects represent variables that you use to build your site's theme. These can include store resources, standard Shopify content, and functional elements that add interactivity.

• Syntax: Encapsulated by double curly braces {{ }}.
• Usage: They denote pieces of store data to be outputted, like products, orders, or customer details.

Objects often have properties associated with them. For example, to render the name of a product, you would use:

{{ product.title }}

2. Liquid Tags

While objects output data, Tags control the logic of your template. They do not output text but rather determine how the template behaves.

• Syntax: Wrapped in curly brackets with percent signs {% %}.
• Usage: Used for loops (iterating through product variants) or logic statements (checking conditions).

For example, to check if a product is available for purchase:

{% if product.available %}
  <!-- Render 'Add to Cart' button -->
{% endif %}

3. Liquid Filters

Filters are used to modify the output of a Liquid object. They are placed within an object's output tag and are separated by a pipe character |.

• Syntax: {{ object | filter }}
• Usage: Formatting strings, manipulating numbers, or changing URL structures.

For instance, to convert a product title to uppercase, you would use:

{{ product.title | upcase }}

You can also chain filters together by adding additional filters to the end of the statement:

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

---

Practical Example: Building a Product Form

Let's put these concepts together to create a simple product display page with an "Add to Cart" form.

Step 1: Display Product Info

First, we use the Product Object to render the basic details:

<h1>{{ product.title }}</h1>
<h2>{{ product.vendor }}</h2>

Step 2: Initialize the Form

Next, we use Liquid's built-in form tag. This generates a new HTML form with all the necessary boilerplate code required by Shopify to add a specific product to the cart. We define the product variable inside the tag:

{% form 'product', product %}
  <!-- Form content goes here -->
{% endform %}

Step 3: Loop Through Variants

Inside the HTML of the form tag, we need to allow the user to select a specific variant (e.g., Size or Color). We achieve this by using a for loop tag to iterate over the product variants:

<select name="id">
  {% for variant in product.variants %}
    <option value="{{ variant.id }}">
      {{ variant.title }}
    </option>
  {% endfor %}
</select>

Add a quantity selector, and you now have a functional dynamic product template.

Summary

Understanding Liquid is essential for any Shopify developer. By mastering the relationship between Objects (data), Tags (logic), and Filters (modification), you can build highly customized and dynamic storefronts efficiently.