Shopify Liquid is the template language that builds every page in your store. Understanding it tells you two things: what’s possible with customization, and when you need to bring in a developer versus when you can make changes yourself.
It’s not a programming language you need to master. It’s a framework you need to understand enough to make informed decisions about your store’s development.
Key Takeaways
- Shopify Liquid is server-side — it processes on Shopify’s servers before HTML is sent to browsers, adding zero client-side JavaScript load
- Three building blocks: objects (display data), tags (logic), and filters (format output)
- Small text changes and metafield outputs are safe for non-developers; structural changes and new sections require a Shopify developer
- Shopify’s Online Store 2.0 framework (launched 2021) changed how sections and blocks work — understanding this matters for modern Shopify Liquid theme customization
What Shopify Liquid Is and Why Shopify Uses It
Liquid was created by Shopify’s founder Tobias Lütke in 2006, built on Ruby, and has been open-sourced since. It powers Shopify themes across all 4.8+ million Shopify stores worldwide.
Created by Shopify, Written in Ruby, Now Open-Source
The open-source status means Shopify Liquid is well-documented, actively maintained, and has a large developer community. Shopify’s own developer documentation (shopify.dev) is extensive and current. If a developer is working on your store and needs to look something up, the resources exist.
Beyond Shopify, Liquid is used by other platforms including GitHub Pages and Jekyll. The language has stability and longevity — learning it is not learning a dead technology.
Server-Side Processing: Shopify Resolves Liquid Before Sending HTML to the Browser
When a customer visits your product page, Shopify’s servers process the Liquid template — replacing all {{ product.title }} references with your actual product title, running logic in {% if %} tags, applying filters — and send the resulting HTML to the browser. The browser never sees Liquid syntax. It receives clean HTML.
The performance implication: Shopify Liquid adds zero client-side JavaScript load. Unlike React or heavy JavaScript frameworks that push rendering work to the browser, Liquid processing happens server-side. A Liquid-rendered page loads as static HTML from the browser’s perspective.
This is one of the reasons well-configured Liquid stores can achieve PageSpeed scores of 90+ — the page structure is determined server-side, not constructed in the browser via JavaScript.
Where Liquid Files Live: /templates, /sections, /snippets, /layout
A Shopify theme’s file structure:
- /layout: 1–2 files defining the wrapper that appears on every page (header, footer, scripts).
theme.liquidis the master layout. - /templates: 10–15 files defining page types (
product.liquid,collection.liquid,cart.liquid,index.liquid). Each template renders the main content area for its page type. - /sections: 20–50+ files for individual page sections (hero banners, product grids, featured collections). These are the reusable building blocks that appear in the theme editor.
- /snippets: 20–100+ files for reusable code components included in other files (a product card snippet included in multiple collection templates, for example).
Understanding this structure tells you where to look when a developer says “I updated the product section” or “the issue is in the cart template.”
The Three Building Blocks of Shopify Liquid
Every Liquid template uses three types of syntax.
Objects: Displaying Dynamic Data
Objects output variable data from Shopify’s backend into your page HTML. They use double curly braces: {{ }}.
Common examples:
{{ product.title }}— outputs your product’s name{{ product.price | money }}— outputs the price formatted as currency{{ customer.email }}— outputs the logged-in customer’s email address{{ shop.name }}— outputs your store’s name
Objects access Shopify’s data model — products, collections, customers, cart, shop settings — and make that data available in your theme templates. The complete list of accessible objects is documented in Shopify’s developer reference.
Tags: Logic and Control Flow
Tags handle logic, loops, and structure. They use curly brace percent syntax: {% %}.
Conditionals: show content based on conditions
{% if product.available %}
Add to cart
{% else %}
Sold out
{% endif %}Loops: iterate over collections of items
{% for product in collection.products %}
{{ product.title }}
{% endfor %}Variable assignment: store values for reuse
{% assign discount_price = product.price | times: 0.9 %}
{{ discount_price | money }}Tags are where most of the logic in a Shopify theme lives: conditional display of elements, looping through product variants, managing cart states.
Filters: Modifying Output Format
Filters transform the output of objects and variables. They follow a pipe symbol | after the object.
Common filters:
| money— formats a number as currency with your store’s settings| upcase— converts text to uppercase| date: '%B %d, %Y'— formats a date (“June 12, 2026”)| truncate: 100— cuts text at 100 characters| img_url: '400x400'— generates an image URL at a specific size
Filters are the reason Shopify prices display correctly in your store’s currency format, why dates appear in readable formats, and why image sizes are controlled.
Common Shopify Liquid Use Cases
Understanding the building blocks in context.
Conditional Display: Show a Banner Only If a Product Is on Sale
{% if product.compare_at_price > product.price %}
<div class="sale-badge">Sale</div>
{% endif %}This checks if a product has a compare-at price higher than its current price (Shopify’s definition of “on sale”) and displays a sale badge only when true. This type of conditional is in almost every Shopify theme’s product card.
Looping Through Products in a Collection
{% for product in collection.products limit:4 %}
<div class="product-card">
<img src="{{ product.featured_image | img_url: '400x400' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}This renders a product grid — 4 products from a collection, with image, title, and price. Most collection page templates are built on this pattern.
Accessing Customer Data for Personalization
{% if customer %}
Welcome back, {{ customer.first_name }}.
{% else %}
<a href="/account/login">Log in</a>
{% endif %}This shows a personalized greeting for logged-in customers. Used in headers, account pages, and personalized promotional banners.
Rendering Metafields for Custom Product Data
Marcus needed to display fabric composition on his apparel product pages — data that didn’t fit into Shopify’s standard product fields. He added a product metafield (“fabric_composition”) and displayed it via Shopify Liquid:
{% if product.metafields.custom.fabric_composition %}
<p>Composition: {{ product.metafields.custom.fabric_composition }}</p>
{% endif %}Metafields extend Shopify’s data model beyond the standard product fields. Shopify Liquid makes them displayable on any page. This is one of the most common developer customizations — and one of the safer ones for a technically curious store owner to attempt.
Liquid and the Modern Shopify Theme Structure
The 2021 Online Store 2.0 update changed how Shopify Liquid sections work significantly.
How Online Store 2.0 Sections and Blocks Use Liquid
Before Online Store 2.0, sections could only be added to the homepage. Every other page was a single-template file with limited editor flexibility.
Online Store 2.0 introduced “Section Everywhere” — sections and blocks can now be added to any page type through the theme editor. Product pages, collection pages, landing pages — all editable through the visual editor, not just the homepage.
The technical change: templates are now JSON files (product.json, collection.json) that define which sections appear on that page type, rather than Liquid files that hardcode the layout.
Schema JSON in Section Files: The Bridge Between Editor and Liquid
Each section file contains a {% schema %} block — JSON that defines what settings appear in the theme editor for that section. A hero banner section’s schema might define: a text setting for the headline, a color picker for the background, an image picker for the background image.
When you change a setting in the theme editor, Shopify updates the JSON template file. When Liquid renders the section, it reads those settings and outputs the content you configured.
This schema system is what makes the theme editor work. Understanding it explains why some settings appear in the editor and others require code changes.
Snippets: Reusable Liquid Components
A snippet is a Liquid file in /snippets that can be included in multiple templates or sections:
{% render 'product-card', product: product %}This renders the product-card.liquid snippet, passing the current product’s data to it. The same snippet renders consistently across collection pages, search results, and featured product sections — which is why updating a product card design in one place updates it everywhere.
What You Can and Can’t Do Without a Developer
This is the practical question for most store owners when working with Shopify Liquid.
Safe to Do Yourself: Small Text Changes and Metafield Outputs
Changing text in a Liquid file: finding {{ 'Add to cart' }} and changing it to {{ 'Buy now' }} is safe. If you break something, Shopify’s theme editor shows an error and lets you revert.
Adding metafield display: adding {{ product.metafields.custom.field_name }} to an existing section is low-risk. If the metafield doesn’t exist, Liquid outputs nothing — no visible error.
Editing section settings: adjusting schema defaults (default text, colors) is safe. The visual editor shows you changes in real time.
Before touching any Liquid file: duplicate your theme first (Online Store → Themes → Actions → Duplicate). All changes happen on the copy. Your live theme is untouched.
Call a Developer For: Structural Changes, New Sections, Complex Logic
Adding a new section type — a custom product recommendation block, a configurator, a multi-step form — requires building both the Shopify Liquid template and the schema JSON from scratch. This is developer work.
Structural layout changes (moving the product images from the left side to a sticky sidebar) require modifying the template file structure and CSS together. Non-developers consistently break mobile responsiveness making these changes.
Complex conditionals involving cart data, customer segments, or inventory states are error-prone without Liquid experience. US-based Shopify developers charge $75–$150/hour for Liquid customization work. Most specific customizations take 1–4 hours.
Need a specific Liquid customization done correctly without risking your live store? Our Shopify development services handle theme modifications with before/after testing on a duplicate theme before any live changes. Or explore our fixed-price Shopify customization packages.
Conclusion
Shopify Liquid is the layer between Shopify’s data and your store’s pages. It’s not something you need to master as a store owner — but understanding its three building blocks (objects, tags, filters) and how sections work makes you a more informed client when working with developers, and lets you make small safe changes yourself without needing to call for help.
The dividing line between self-service and developer-required: text changes and metafield additions are safe territory. Structural layout changes, new section types, and complex logic are developer territory.
For stores on Online Store 2.0 themes (Dawn and newer), the JSON template architecture means more of your store is configurable through the visual editor — reducing the scenarios where Shopify Liquid code knowledge is necessary. The remaining customization scenarios that require code are well-defined and scoped.
For custom section development, theme modifications, or Shopify Liquid customizations that need to be done correctly the first time, our Shopify Solutions packages deliver the work with tested implementation on a duplicate theme.
Frequently Asked Questions
Is Shopify Liquid hard to learn?
For store owners: understanding what Liquid does and making small text changes is accessible with a few hours of reading. The official Shopify documentation at shopify.dev/docs/api/liquid is comprehensive and well-organized. For actual development — building sections, creating complex conditionals, writing schema JSON — Shopify Liquid has a learning curve that typically takes 20–40 hours of dedicated practice before competent independent development is possible.
Can I use Liquid to show different content to different customers?
Yes. Liquid’s conditional tags and customer objects allow you to display different content based on customer state (logged in vs. guest), customer tags (e.g., wholesale, VIP), and customer location. Example: showing wholesale pricing to tagged wholesale customers, or showing a loyalty points balance to logged-in members. These personalization patterns require developer implementation but are well within Shopify Liquid’s capability.
What is the difference between Liquid objects and Liquid tags?
Objects output data: {{ product.title }} renders the product name in the HTML. Tags control logic and flow: {% if %}, {% for %}, {% assign %} — they don’t output content directly but control what gets output. Tags are delimited by {% %}, objects by {{ }}. Filters (using |) modify how objects are formatted. The three work together: {{ product.price | money }} is an object (product.price) modified by a filter (money).
Does Liquid affect my Shopify page speed?
Shopify Liquid processing happens server-side — it doesn’t load JavaScript in the browser. A well-written Liquid template contributes to fast page loads because the HTML sent to the browser is pre-rendered and clean. Poorly written Liquid (inefficient loops over large datasets, redundant API calls) can increase server-side rendering time, but this is rarely the primary cause of slow Shopify stores. App-loaded JavaScript is far more commonly the culprit.
Can I use Liquid outside of Shopify themes?
Yes. Liquid is open-source and has implementations in multiple languages beyond Shopify’s Ruby-based original. GitHub Pages uses Liquid through Jekyll. Other platforms have adopted it. Within Shopify specifically, Liquid is used in: theme files (the primary context), email notification templates, and Shopify Scripts (though Scripts use Ruby). Outside of Shopify, the language is usable wherever a Liquid parser is implemented.