Liquid Tutorial

Liquid Introduction

Source: Shopify AI + Dev

What is Liquid?

Liquid is an open-source templating language created by Shopify in 2006. Unlike PHP or Ruby, Liquid does not execute arbitrary code on the server. Instead, it provides a strict, sandboxed vocabulary of tags, objects, and filters that transform templates into HTML before the response is sent to the browser.

When a customer visits your Shopify store, Shopify's servers read your theme files (.liquid, .json), merge them with live store data (products, prices, cart contents, customer session), and output plain HTML. The customer never sees Liquid syntax — only the rendered result.

Why Shopify Uses Liquid

Shopify hosts thousands of merchants on shared infrastructure. Liquid's sandbox prevents theme developers from opening files, running shell commands, or accessing other stores' data. This security model is why every Shopify theme — from free themes to enterprise custom builds — is built with Liquid at its core.

  • Safe by design — merchants cannot break server security with theme code
  • Separates presentation (HTML/CSS) from store data (products, orders)
  • Readable by non-developers — merchants can edit text in the theme editor
  • Extensible — Shopify adds objects like product, cart, and routes for commerce

Liquid in the Theme Rendering Pipeline

  1. Shopify receives an HTTP request (e.g. GET /products/web-development-course)
  2. The router selects a template (templates/product.json) and loads its sections
  3. Each section file (.liquid) is processed: tags run logic, {{ }} outputs values
  4. The layout (layout/theme.liquid) wraps the page with header, footer, and assets
  5. Final HTML is sent to the browser; JavaScript may enhance the page client-side

Your First Liquid Output

Store branding with the global shop object
{% comment %}
  Comments are stripped before render.
  Use them to document complex logic for other developers.
{% endcomment %}

<h1>Welcome to {{ shop.name }}</h1>
<p>{{ shop.description }}</p>
<p>Currency: {{ shop.currency }} · Domain: {{ shop.domain }}</p>

The shop object is available on every page of your theme. shop.name returns the store title from Shopify Admin → Settings → Store details. shop.currency returns the ISO currency code (e.g. USD, EUR) used for money filters.

Try it Yourself
Tip: Bookmark the official Shopify Liquid reference at shopify.dev/docs/api/liquid — it lists every object, tag, and filter with up-to-date definitions.