What Is Shopify Liquid? Syntax, Use Cases & Limitations

What Is Shopify Liquid?

Liquid is Shopify's template language — a set of simple code instructions that tell Shopify how to display your store's data (products, prices, collections, customer info) inside HTML pages. When a customer visits your store, Shopify processes the Liquid code in your theme files, replaces it with real data, and sends the final HTML to the browser.

Created by Shopify co-founder and CEO Tobias Lütke in 2006, Liquid was designed to be safe and easy to read. It's an open-source template language written in Ruby with over 11,800 stars on GitHubVerified SourceShopify/liquid GitHub RepositoryGitHubView source . Unlike general-purpose programming languages, Liquid runs in a sandbox — it can't access the server's file system, make network requests, or execute arbitrary code. This makes it safe for theme developers to write code that runs on Shopify's infrastructure.

Source: Shopify/liquid on GitHub

Here's the key distinction for business owners: Liquid is the code behind your theme, not something you interact with directly. When you use the theme editor to change colors or rearrange sections, you're adjusting settings that Liquid code reads and applies. Liquid is the engine; the theme editor is the steering wheel.

Quick Decision: Do You Need Liquid?

Before reading the technical sections below, determine whether Liquid is relevant to your situation. Most store owners never need it.

How Liquid Works: Objects, Tags & Filters

Every Liquid file in a Shopify theme is a mix of HTML and Liquid code. Shopify processes the Liquid parts on its servers, replaces them with real data, and sends pure HTML to the customer's browser. The customer never sees Liquid code — only the final rendered page.

Here's a practical example that ties all three together. This Liquid code displays a product's title and formatted price, but only if the product is available for purchase:

{% if product.available %}
  <h1>{{ product.title }}</h1>
  <p class="price">{{ product.price | money }}</p>
  <button>Add to Cart</button>
{% else %}
  <p>This product is currently sold out.</p>
{% endif %}

In this example: {{ product.title }} is an object that outputs the product name. {% if product.available %} is a tag that checks availability. | money is a filter that formats the raw price integer into a currency string like "$29.99". For the full list of available objects, tags, and filters, see the Liquid documentation.

Where Liquid Lives: Theme File Structure

Liquid code is organized into specific directories within a Shopify theme. Understanding this structure helps you know where to look (or where to tell a developer to look) when you need changes:

Source: Shopify Theme Architecture

Liquid vs No-Code: When You Need Each

Before hiring a developer or learning Liquid yourself, understand what the theme editor (no-code) can already do versus what requires Liquid:

What You Can Do with Liquid

Here are the most common real-world use cases where store owners need Liquid customizations — ordered by frequency:

Each of these use cases can be implemented by a developer in 2–8 hours depending on complexity. For a cost breakdown by task type, see the Hiring a Liquid Developer section below.

Real Liquid Code Examples

You don't need to understand every line — the purpose of these examples is to show you what's possible and help you communicate requirements to a developer. All examples follow Shopify's theme development documentation.

1. Low Stock Badge

Shows a "Low Stock" badge when inventory drops below a threshold. Uses Liquid objects to access inventory data:

{% if product.selected_or_first_available_variant.inventory_quantity <= 5
    and product.selected_or_first_available_variant.inventory_quantity > 0 %}
  <span class="badge badge--low-stock">
    Only {{ product.selected_or_first_available_variant.inventory_quantity }} left
  </span>
{% endif %}

2. Metafield Content on Product Page

Pulls custom data (like care instructions) from a product metafield:

{% assign care = product.metafields.custom.care_instructions %}
{% if care != blank %}
  <div class="care-instructions">
    <h3>Care Instructions</h3>
    <p>{{ care.value }}</p>
  </div>
{% endif %}

3. Free Shipping Progress Bar

Displays a progress bar showing how much more the customer needs to spend for free shipping. Uses Liquid filters for math and currency formatting:

{% assign threshold = 7500 %}  {%- comment -%} $75.00 in cents {%- endcomment -%}
{% assign remaining = threshold | minus: cart.total_price %}

{% if remaining > 0 %}
  <p>Add {{ remaining | money }} more for free shipping!</p>
  {% assign progress = cart.total_price | times: 100 | divided_by: threshold %}
  <div class="progress-bar">
    <div class="progress-bar__fill" style="width: {{ progress }}%"></div>
  </div>
{% else %}
  <p>You qualify for free shipping!</p>
{% endif %}

4. Custom Section with Schema Settings

A reusable section where merchants configure content through the theme editor using schema settings:

<section class="announcement-bar" style="background: {{ section.settings.bg_color }}">
  <p>{{ section.settings.text }}</p>
</section>

{% schema %}
{
  "name": "Announcement Bar",
  "settings": [
    { "type": "text", "id": "text", "label": "Message", "default": "Free shipping on orders over $75" },
    { "type": "color", "id": "bg_color", "label": "Background Color", "default": "#000000" }
  ]
}
{% endschema %}

5. Collection-Based Product Tabs

Dynamically generates product tabs based on a collection handle using Liquid tags for looping:

{% for collection in section.settings.collections %}
  <div class="tab-content" data-tab="{{ collection.handle }}">
    {% for product in collection.products limit: 8 %}
      <a href="{{ product.url }}">
        <img src="{{ product.featured_image | image_url: width: 400 }}"
             alt="{{ product.title }}" loading="lazy" />
        <h4>{{ product.title }}</h4>
        <p>{{ product.price | money }}</p>
      </a>
    {% endfor %}
  </div>
{% endfor %}

Hiring a Liquid Developer: Costs & What to Expect

If you decide Liquid work is best left to a professional, here's what the market looks like in 2026:

Where to find Liquid developers: the Shopify Partner Directory lists vetted agencies and freelancers. For our recommended developers, see Ecom-Store.Pro. For a deeper breakdown of pricing, contracts, and red flags, read our guide to hiring a Shopify developer.

Common Liquid Mistakes to Avoid

Whether you're writing Liquid yourself or managing a developer, these are the five mistakes that cause the most damage — and they're all preventable:

The Bottom Line

Liquid is the invisible engine behind every Shopify storefront. It's been in production since 2006, it's open-source, and it's not being replaced anytime soon. For business owners, the practical question isn't "should I learn Liquid?" — it's "do I need Liquid-level customizations, and if so, should I hire a developer or learn the basics myself?" If you're still picking a starting theme, our guide to Shopify themes covers what's editable without code, and our custom design playbook walks through when Liquid work is genuinely needed.

Whether you're customizing the Horizon theme or building from scratch, Liquid gives Shopify the flexibility to match any brand's vision — without sacrificing the platform's security and reliability.

Frequently Asked Questions