Shopify Liquid is the templating language that powers every Shopify theme.
It allows us to create templates that can generate hundreds of dynamic pages, like product pages, blog article page, collection pages, with different content each time.
In this guide, you’ll learn what Shopify Liquid is, how it works behind the scenes, and how to use it by building a simple product template.
What is Shopify Liquid?
Shopify Liquid is used to build dynamic templates with placeholders and logic
For example, when you use {{ product.title }}, Liquid replaces that with the actual title of the product.
Or if you want to loop over all product variants, you’d use something like {% for variant in product.variants %} do something / list them all...
There are two main types of Liquid tags you’ll use:
{{ }} for outputting data, like this:
{{ product.title }}This will display the product’s title on the page.
{% %} for logic—like this:
{% if product.available %}
<p>In stock!</p>
{% endif %}This checks if the product is available and shows a message if it is.
Liquid is a Serverside language
When someone visits a Shopify page, Shopify takes the relevant template (like a product template), processes all Liquid code on the server, and replaces it with real store data such as product titles, prices, and images.
So Shopify first resolves the Liquid code, and then sends a finished HTML page to the browser.
In other words: the user never receives any liquid code, beause it's executed on the server side.
The browser only receives the final HTML (along with CSS and JavaScript), with all data already filled in.
{{ product.title }} -- {{ product.price | money }}Shopify fills in the data
Awesome T-Shirt -- $10.00And that’s what gets sent to the visitors' browser.
This distinction is extremely important to understand.
Because Liquid runs only on the server, you cannot use it to react to user interactions after the page has loaded.
Anything that depends on user input—clicks, swipes, forms, dynamic updates—must be handled with JavaScript.
This is a common point of confusion for beginners.
(The only way to re-run Liquid after the initial page load is via Shopify’s Section Rendering API, which is a more advanced topic and something we cover in a separate article -- Shopify Section Rendering API)
Simple examples with Shopify Liquid
Now that we’ve understood what Liquid is and how it works behind the scenes, let’s go over through simple examples.
Example 1: Displaying Product Title
As mentioned, to display data, we use "{{ }}" for data outputs:
{{ product.title }}
This will display the title of the current product on the page. There are other kinds of product data you can display on the page; the title is only one of them. You can find all other data here, along with examples on how to display them.
Example 2: Showing Product Price
To show the price, you’d also use the {{ }} tag
{{ product.price | money }}You might notice the “|” symbol followed by a keyword. A "|" followed by a keyword is a filter. Filters in Shopify Liquid transforms one data into another.
So, in this example: using {{ product.price }} will only return 1000. But if you use the filter “| money”, it then returns the price with currency: {{ product.price | money }} returns "$10.00" (or whatever the store's base currency is).
Example 3: Checking If a Product is Available
As mentioned, if we're dealing with logic, we're going to use "{% %}", Shopify's logic liquid tags. And so, to check if a product is in stock, we'll do the following:
{% if product.available %}
<p>In stock!</p>
{% else %}
<p>Out of stock</p>
{% endif %}This shows a message based on whether the product is available or not. There are many keywords you can use inside the Liquid logic tags, the {% if condition %} {% endif %} pair is one example. Another example is the {% for item in items %} {% endfor %}, which you will see in action in the next example. You can learn more about them in the Shopify Documentation.
Example 4: Looping Over Product Variants
If you want to list all the variants of a product, you can use a for loop:
{% for variant in product.variants %}
<p>{{ variant.title }} - {{ variant.price | money }}</p>
{% endfor %}This loops through each variant of a product and displays the variant title and price.
Final Thoughts
If you want to see Shopify Liquid explained visually, I’ve linked two videos below that go deeper into template structure and use animations to make everything click faster. They’re a great next step if you want to solidify the concepts.
And if your goal is to go beyond basics and actually become a paid Shopify developer, this is exactly where the Shopify Developer Bootcamp comes in. We don’t just teach Liquid in isolation—we show you how to use it in real projects, how it fits together with JavaScript, APIs, and themes, and how to turn these skills into client work.
If you’re serious about building Shopify pages professionally and getting paid for it, that’s the next step.
Liquid from a different angle: