What Is Liquid? Shopify's Templating Language Explained

Liquid is an open-source templating language created by Shopify and used to render storefront HTML on the server before it reaches the browser. When a customer requests a product page, Shopify loads the matching template, injects Liquid objects like product, collection, and shop, executes tags for logic and loops, and applies filters to transform output. The result is static HTML with embedded JSON for dynamic sections, not a client-side React app.

Understanding where Liquid runs matters for performance and architecture. Theme Liquid executes on Shopify's servers during the HTTP request cycle. You cannot call arbitrary external APIs from Liquid, mutate server state, or run JavaScript inside Liquid tags. Data comes from Shopify's object model and from metafields you expose through the Admin API or theme app extensions. Developers who treat Liquid like PHP or Node.js hit walls quickly; developers who work within its declarative model build fast, cache-friendly themes.

Liquid has three delimiter pairs. Output tags {{ }} print evaluated expressions to the page. Logic tags {% %} execute control flow without printing: if, unless, case, for, assign, capture, and render. Comment tags {% comment %} ... {% endcomment %} strip content from rendered output. Variables use snake_case by convention: {{ product.title }}, {{ cart.item_count }}. Dot notation accesses object properties; bracket notation works for dynamic keys.

Whitespace control modifiers (-) trim newlines around tags, which is essential for clean HTML and avoiding extra gaps in inline layouts. For example, {%- if product.available -%} removes surrounding whitespace. The assign tag creates variables in the current scope: {% assign variant = product.selected_or_first_available_variant %}. The capture tag collects rendered output into a string variable for reuse. These primitives compose every theme pattern from variant pickers to cart line items.

Objects are read-only data structures Shopify injects into templates. Global objects include shop, cart, customer, and request. Context objects depend on the template: product on product.json, collection on collection.json, article on article.json. Each object has documented properties and nested objects. For example, product.variants is an array of variant objects with id, title, price, and available fields. You traverse them with for loops and conditionals, never by mutating them.

Tags control structure and side effects allowed in themes: {% section 'header' %} renders a section file, {% render 'icon-cart' %} includes a snippet with an isolated scope, {% form 'product', product %} wraps add-to-cart markup. Filters pipe values through transformations: {{ product.price | money }}, {{ 'now' | date: '%B %d, %Y' }}, {{ collection.products | where: 'available' }}. Filter chains read left to right. Shopify adds hundreds of theme-specific filters for money formatting, image URLs, color manipulation, and metafield rendering. Mastering the object reference, tag list, and filter catalog is the baseline skill for any Shopify theme developer.

Every Liquid template render is a server-side HTML generation step. Shopify applies full-page caching at the edge for anonymous visitors on many routes, but cart-aware and customer-aware pages often bypass or vary cache. Sections rendered via the Section Rendering API can be fetched as HTML fragments with POST requests, enabling AJAX cart updates and dynamic shelf refreshes without reloading the entire page.

Because Liquid runs once per request (or per section render), heavy loops over large collections inside templates hurt Time to First Byte. Best practice is to paginate collection.products, limit for loops with limit: and offset:, and push expensive aggregations to Shopify Functions, metaobjects, or app proxies. Theme Check and Lighthouse will flag unbounded loops and deprecated tags. Liquid's server-side nature is a feature for SEO and accessibility when used correctly: meaningful HTML arrives in the first response, not after a JavaScript bundle hydrates.

Liquid is intentionally constrained. There is no database access, no file I/O, no HTTP client, and no custom function definitions. You cannot import npm packages into Liquid. Complex business logic belongs in Shopify apps (App Bridge, theme app extensions), Shopify Functions, or storefront APIs consumed by Hydrogen or custom frontends. Inside themes, you work with what Shopify exposes: standard objects, metafields, metaobjects, and app blocks.

Other common pitfalls include relying on undefined object availability (customer is nil for guests), assuming cart persists identically across sessions, and using deprecated include instead of render. The render tag creates an isolated scope and accepts parameters: {% render 'price', price: variant.price %}. Global assigns do not leak into snippets, which prevents accidental coupling but requires explicit parameter passing. Teams that internalize these boundaries ship maintainable themes; teams that fight them accumulate fragile workarounds and slow pages.