What is Liquid? The Complete Beginner's Introduction

If you’re starting your journey into Shopify theme development, you’ll quickly encounter Liquid, the templating language that powers every Shopify store. In this guide, we’ll explore what Liquid is, why it exists, and how it fits into the Shopify ecosystem.

What is a Templating Language?

Before we dive into Liquid specifically, let’s understand what a templating language does.

A templating language is a way to create dynamic content by mixing static text (like HTML) with dynamic data. Instead of writing separate HTML pages for every product in a store, you write a single template that automatically fills in the product details.

Think of it like Mad Libs. You have a story with blanks: “The [adjective] [animal] jumped over the [noun].” The template stays the same, but the blanks get filled in with different words each time.

Enter Liquid

Liquid was created by Shopify in 2006 and has since been open-sourced. It’s used not only in Shopify but also in other platforms like Jekyll (a popular static site generator).

Here’s your first taste of Liquid:

<h1>Welcome to {{ shop.name }}</h1>
<p>We have {{ collections.all.products.size }} products available.</p>

When this code runs on a Shopify store called “Awesome Store” with 150 products, it outputs:

<h1>Welcome to Awesome Store</h1>
<p>We have 150 products available.</p>

The {{ }} syntax tells Liquid to output the value of whatever is inside. In this case, shop.name is an object that contains the store’s name.

Why Did Shopify Create Liquid?

Shopify could have used existing templating languages like PHP or ERB, but they created Liquid for several important reasons:

1. Security (Sandboxing)

Liquid runs in a sandboxed environment, meaning theme developers can’t execute arbitrary code that could harm the store or access sensitive data. This is crucial because Shopify hosts millions of stores, and they can’t risk malicious code.

{%- comment -%}
  This would be dangerous in PHP:
  <?php system('rm -rf /'); ?>

  But Liquid simply doesn't allow such operations.
  You can only work with the data Shopify explicitly provides.
{%- endcomment -%}

2. Simplicity

Liquid is intentionally simple. It has a small set of features that are easy to learn, making it accessible to designers and developers who may not have extensive programming experience.

3. Performance

Because Liquid is limited in what it can do, Shopify can optimize its execution. Templates render quickly, which is essential for e-commerce where page speed directly impacts sales.

Liquid Syntax Basics

Liquid has three main types of tags:

1. Output Tags {{ }}

Output tags display content on the page:

{{ product.title }}
{{ product.price | money }}
{{ "Hello World" }}

2. Logic Tags {% %}

Logic tags control the flow of your template without outputting anything directly:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

3. Comments {% comment %}

Comments are ignored by the Liquid engine:

{% comment %}
  This won't appear in the HTML output.
  Great for leaving notes for other developers.
{% endcomment %}

Where Liquid Fits in Shopify

When a customer visits a Shopify store, here’s what happens:

1. Request: The browser requests a page (e.g., /products/cool-shirt)
2. Routing: Shopify determines which template to use (product.liquid or product.json)
3. Data Loading: Shopify gathers all the relevant data (product info, shop settings, customer data)
4. Rendering: The Liquid template is processed, replacing tags with actual data
5. Response: The final HTML is sent to the browser

Browser Request → Shopify Server → Liquid Template + Data → HTML Response

This all happens on Shopify’s servers. By the time the HTML reaches the browser, there’s no trace of Liquid code, just clean HTML.

Liquid vs. Other Templating Languages

How does Liquid compare to other popular options?

Liquid’s sandboxing makes it perfect for platforms like Shopify where untrusted code runs on shared infrastructure.

Your First Liquid Template

Let’s create a simple product display:

<div class="product">
  <img src="{{ product.featured_image | image_url: width: 400 }}"
       alt="{{ product.featured_image.alt | escape }}">

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

  <p class="price">
    {% if product.compare_at_price > product.price %}
      <span class="sale-price">{{ product.price | money }}</span>
      <span class="original-price">{{ product.compare_at_price | money }}</span>
    {% else %}
      {{ product.price | money }}
    {% endif %}
  </p>

  <div class="description">
    {{ product.description }}
  </div>
</div>

This template:

• Displays the product image with a specific width
• Shows the product title
• Handles sale pricing with conditional logic
• Outputs the product description

What’s Next?

Now that you understand what Liquid is and why it exists, you’re ready to dive deeper. In the upcoming lessons, we’ll cover:

• Objects: The data structures that hold your store’s information
• Filters: Transform and format your output
• Tags: Control flow, loops, and more
• Theme Architecture: How templates, sections, and snippets work together

Key Takeaways

1. Liquid is a templating language that combines HTML with dynamic data
2. It’s sandboxed for security: you can’t execute arbitrary code
3. It’s intentionally simple: easy to learn, hard to break things
4. Three tag types: Output {{ }}, Logic {% %}, and Comments
5. Server-side rendering: Liquid runs on Shopify’s servers, not in the browser

Ready to continue? Head to the next lesson to learn about the data you can access in your templates.