If you have ever opened a Shopify theme file and seen code that looks like HTML but with strange {{ }} and {% %} symbols scattered throughout — that is Shopify Liquid. It is the templating language that powers every single Shopify store in the world, and understanding it is the single most important skill you can develop as a Shopify developer or store owner who wants real control over their theme.

The good news: Liquid is deliberately beginner friendly. Unlike full programming languages, it was designed to be learned quickly, used safely, and read easily — even by people who are not professional developers. You do not need a computer science degree to start customising Shopify themes with Liquid. You just need a clear guide, real code examples, and some practice.

This is that guide. By the end, you will understand exactly what Liquid is, how its three core building blocks work, how the Shopify theme file structure fits together, and how to write your first real Liquid customisations — ready to use on a live Shopify store.

What Is Shopify Liquid?

Liquid is an open-source template language created by Shopify in 2006 and written in Ruby. It is the bridge between your Shopify store’s raw backend data — products, collections, customers, cart contents, orders — and the HTML that shoppers actually see on screen when they visit your store.

Think of it this way. A plain HTML file is static — it shows the same content to every visitor every time. Liquid makes your theme dynamic. It tells your theme: “go fetch this product’s title from the database and put it here,” or “if this product is out of stock, show a sold-out badge instead of an Add to Cart button.”

Without Liquid, a Shopify theme is just an empty shell. With Liquid, it becomes a fully data-driven storefront that responds to your store’s content in real time. Every product page, collection page, cart, checkout, and blog post in Shopify is rendered using Liquid.

One important characteristic that makes Liquid unique is that it is deliberately limited. It cannot make external API calls, access your file system, or run arbitrary code. This is a feature, not a bug — it is what makes Shopify themes fast, secure, and safe for merchants to edit without breaking anything critical.

The Three Core Building Blocks of Liquid

Everything in Shopify Liquid comes down to three building blocks: Objects, Tags, and Filters. Master these three concepts and you can read, understand, and write the vast majority of Liquid code you will ever encounter.

1. Objects — Displaying Dynamic Data

Objects output dynamic content from your store. They are always wrapped in double curly braces: {{ }}. When Liquid processes an object, it replaces it with the actual data from your store.

Here are the most common objects you will use every day in Shopify development:

{{ product.price | money }}
<!-- Outputs: "$29.99" -->

{{ product.inventory_quantity }}
<!-- Outputs: "14" -->

{{ collection.title }}
<!-- Outputs: "Summer Collection" -->

{{ customer.first_name }}
<!-- Outputs: "Arshad" -->

{{ shop.name }}
<!-- Outputs: "My Shopify Store" -->

{{ cart.item_count }}
<!-- Outputs: "3" -->

The part before the dot (like product or collection) is the Liquid object. The part after the dot (like title or price) is the property of that object you want to display. Shopify has dozens of built-in objects including product, collection, cart, customer, shop, article, page, and settings.

2. Tags — Controlling Logic and Flow

Tags are the logic layer of Liquid. They control what gets displayed, when, and how many times. Tags use curly braces with percentage signs: {% %}. They never output content directly — they tell the template what to do.

The most important tags for beginners are if/else (conditional logic) and for (loops).

If/Else — Conditional Display:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <p>Sorry, this product is sold out.</p>
{% endif %}

For Loop — Displaying Lists:

{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

Combining If and For — Real World Example:

{% for variant in product.variants %}
  {% if variant.available %}
    <option value="{{ variant.id }}">
      {{ variant.title }} — {{ variant.price | money }}
    </option>
  {% endif %}
{% endfor %}

This snippet loops through all variants of a product and only shows the ones that are currently in stock — a pattern you will use constantly in real Shopify development.

Other commonly used tags include assign (create a variable), capture (store a string), unless (the opposite of if), case/when (a switch statement), and paginate (for splitting long product lists across multiple pages).

3. Filters — Formatting Output

Filters transform or format the output of objects. They always come after a pipe character | and can be chained together to apply multiple transformations in sequence.

{{ product.title | upcase }}
<!-- Outputs: "CLASSIC WHITE T-SHIRT" -->

{{ product.price | money }}
<!-- Outputs: "$29.99" -->

{{ product.description | strip_html | truncatewords: 30 }}
<!-- Strips HTML tags, then shows first 30 words only -->

{{ product.featured_image | image_url: width: 600 }}
<!-- Generates an optimised image URL at 600px wide -->

{{ article.published_at | date: '%B %d, %Y' }}
<!-- Outputs: "April 06, 2026" -->

{{ collection.title | handleize }}
<!-- Outputs: "summer-collection" (URL-safe format) -->

The most useful filters to learn first are money (formats prices with currency symbol), image_url (generates optimised image URLs), strip_html (removes HTML tags from text), truncatewords (limits text length), date (formats dates), and upcase / downcase (changes text case).

Understanding the Shopify Theme File Structure

To work confidently with Liquid, you need to understand where files live inside a Shopify theme. Every Shopify theme follows the same folder structure. Here is what each folder contains and why it matters:

• layout/ — Contains theme.liquid, the master wrapper file that wraps every page on your store. The <head>, global navigation, and footer typically live here. This file renders on every single page.
• templates/ — Contains page-type files like product.json, collection.json, index.json, and cart.json. In Online Store 2.0 themes, these are JSON files that define which sections appear on each page type.
• sections/ — The most important folder for theme customisation. Contains reusable, merchant-editable components like hero banners, product grids, testimonials, and announcement bars. Each section has its own Liquid code and a {% schema %} block that powers the theme editor settings.
• snippets/ — Small, reusable code fragments included in sections and templates using {% render 'snippet-name' %}. Examples: a product card, a price display, a star rating component.
• assets/ — CSS, JavaScript, images, and fonts. Referenced in Liquid using the | asset_url filter.
• config/ — Contains settings_schema.json which defines the global theme settings accessible under {{ settings.variable_name }}.
• locales/ — Translation strings for multilingual themes.

Online Store 2.0: Sections, Blocks, and JSON Templates

In 2026, all modern Shopify themes use the Online Store 2.0 architecture. Understanding this is essential for any Shopify developer. The biggest change from older themes is the shift from .liquid template files to .json template files — and it fundamentally changes how themes are built and maintained.

JSON templates define the structure of each page type as a list of sections. Merchants can add, remove, and reorder these sections directly in the Shopify theme editor without touching any code. A JSON template can render up to 25 sections, and each section can contain up to 50 blocks.

Sections are the top-level building blocks of a modern Shopify theme. Each section is a .liquid file in the sections/ folder. It contains Liquid markup for displaying content and a {% schema %} block at the bottom that defines the settings merchants can configure in the theme editor.

Here is a simple section example with a schema:

<div class="hero-banner">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.subtext }}</p>
  <a href="{{ section.settings.button_url }}">{{ section.settings.button_label }}</a>
</div>

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    },
    {
      "type": "text",
      "id": "subtext",
      "label": "Subheading",
      "default": "Shop the latest collection"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button Link"
    }
  ],
  "presets": [
    {
      "name": "Hero Banner"
    }
  ]
}
{% endschema %}

The {% schema %} block is what makes this section editable in the Shopify theme editor. The merchant sees a “Heading” text field, a “Subheading” field, and a button configurator — all without touching code. This is the core power of Online Store 2.0 Liquid development.

Blocks are repeatable content units inside a section — think individual slides in a slideshow, feature items in a grid, or tabs in a product description. They are defined inside the section schema and let merchants add or remove content units dynamically.

5 Practical Liquid Code Examples for Beginners

The best way to learn Liquid is to see it in real, practical use cases. Here are five common customisations you can implement today on any Shopify store.

Show a Sale Badge on Discounted Products

{% if product.compare_at_price_max > product.price_max %}
  <span class="badge badge--sale">Sale</span>
{% endif %}

Display Stock Urgency Message

{% if product.inventory_quantity > 0 and product.inventory_quantity <= 5 %}
  <p class="urgency">Hurry! Only {{ product.inventory_quantity }} left in stock.</p>
{% endif %}

Personalise Greeting for Logged-In Customers

{% if customer %}
  <p>Welcome back, {{ customer.first_name }}! 
    <a href="/account">View your orders</a>
  </p>
{% else %}
  <p>
    <a href="/account/login">Log in</a> for exclusive offers.
  </p>
{% endif %}

Display a Related Products Section

{% assign related = collections[product.collections.first.handle].products | slice: 0, 4 %}

{% for related_product in related %}
  {% unless related_product.id == product.id %}
    <div class="related-product">
      <a href="{{ related_product.url }}">
        <img src="{{ related_product.featured_image | image_url: width: 300 }}"
             alt="{{ related_product.title }}">
        <h3>{{ related_product.title }}</h3>
        <p>{{ related_product.price | money }}</p>
      </a>
    </div>
  {% endunless %}
{% endfor %}

Show a Free Shipping Progress Bar

{% assign threshold = 5000 %}
{% assign remaining = threshold | minus: cart.total_price %}

{% if cart.total_price >= threshold %}
  <p>🎉 You qualify for free shipping!</p>
{% else %}
  <p>Add {{ remaining | money }} more for free shipping.</p>
{% endif %}

Liquid Best Practices in 2026

As you start writing more Liquid, keep these best practices in mind — they are the difference between clean, maintainable theme code and a tangled mess that is painful to update later.

• Use {% render %} instead of {% include %}: The render tag creates an isolated scope for snippets, preventing variable conflicts and improving performance. The older include tag is deprecated in modern Shopify themes.
• Always limit your loops: When looping through collection products add the limit: parameter (e.g., limit: 8) to avoid fetching and rendering hundreds of products unnecessarily, which slows page load time.
• Build with sections and schemas: Every reusable component should be a section with a full {% schema %} block. This gives merchants control without requiring developer changes for every content update.
• Test on a duplicate theme: Never edit your live theme directly. Duplicate it first, make your Liquid changes on the copy, preview thoroughly, then publish. One syntax error in Liquid can break an entire page.
• Use Theme Check: Shopify’s Theme Check tool (built into Shopify CLI in 2026) lints your Liquid code and catches performance issues, deprecated patterns, and accessibility problems before you deploy.
• Debug with the JSON filter: When you need to see what data is available in an object, output it as JSON using {{ product | json }} — this reveals every property available on that object.

Tools Every Shopify Liquid Developer Needs in 2026

• Shopify CLI: The official command-line tool for Shopify theme development. Enables local development with hot reloading so you can see changes instantly without manually uploading files.
• VS Code + Shopify Liquid Extension: Gives you syntax highlighting, autocomplete, and error detection for Liquid code directly inside your editor.
• Dawn Theme (GitHub): Shopify’s official open-source reference theme built on OS 2.0 architecture. The best starting point for learning how professional Liquid themes are structured — and a 20–30 hour time saver on every custom project.
• Shopify Liquid Documentation: The official reference at shopify.dev/docs/api/liquid is comprehensive and regularly updated. Bookmark it — you will use it constantly.

Conclusion: Liquid Is the Gateway to Shopify Mastery

Shopify Liquid is not complicated — it is methodical. Once you understand that objects output data, tags control logic, and filters format output, you can read and write virtually any Liquid code in any Shopify theme. The Online Store 2.0 architecture of sections, blocks, and JSON templates has made Liquid-based development more powerful and more merchant-friendly than ever before in 2026.

Whether you are a store owner who wants to make customisations without paying a developer for every change, or a developer building custom Shopify themes from scratch, Liquid is the skill that unlocks the full potential of the Shopify platform.

At ArshadWebStudio, Shopify Liquid development is at the core of every custom theme and store we build. If you need a fully custom Shopify theme, bespoke Liquid customisations on your existing store, or help migrating from a legacy theme to Online Store 2.0 architecture, get in touch today.

About the Author

Arshad Shah is a freelance WordPress and Shopify developer at arshadwebstudio.com, specialising in custom Shopify theme development, Liquid customisation, and Online Store 2.0 migrations. He has helped dozens of businesses build faster, more flexible, and more profitable Shopify stores.