What is Shopify Liquid? (A guide for beginners)

If you’ve ever taken a closer look into your Shopify theme files and found .liquid files, you might have thought, “Wait… what even is this?”. Well, today is your lucky day because we'll be going over Shopify's Templating Language -- "Liquid".

Shopify Liquid is the coding language for building out pages in your Shopify store. It enables Shopify stores to create hundreds of pages from a single template file. It's the reason why you can create product pages with different content each time. And the best part? You don’t need to have a coding background to start using it.

In this post, I’ll walk you through what Shopify Liquid is and how it works behind the scenes. Then, we'll cover the basics and work on an example product template. I'll also share with you a cheatsheet for using Liquid 🤫

Ready to dive in? Let’s go! 🔥

‍

What is Shopify Liquid?

Alright, so what exactly is Shopify Liquid?

In simple terms, Liquid is the templating language that powers every Shopify theme. It’s what makes your online store dynamic. Instead of adding product data into your product page's code, Liquid will do the work for you. It will pull data from your Shopify store then add it to your page's code.

For example, when you use {{ product.title }}, Liquid replaces that with the actual title of the product. Want to loop through product variants? You’d use something like {% for variant in product.variants %} to list them all. Pretty neat, right?

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.

At the end of the day, Liquid is the tool if you'd like to create smarter pages, adjusting to whatever need you might have. Once you get the hang of it, it’s a total game-changer for theme customization.

‍

How does Liquid Work behind the scenes?

Alright, so now that we know what Liquid is, let’s talk about how it actually works behind the scenes.

When someone visits your Shopify store—let’s say a product page—Shopify doesn't really know what to hand out to you. It only knows that inside your Theme, there is a template file named product.liquid or product.json.

However, Shopify knows that this template file is used to create the product page. And so, Shopify will read the template file that contains Liquid or sections.

It reads all the Liquid code in the template/section file and fill it with real data. That includes things like the product title, price, images, or whatever else you’ve set up using Liquid tags.

Once your template no longer contains liquid code, the page is now built and ready to send back to the visitor. Shopify then sends this completed page to the customer's browser.

You can also think of Liquid like a middle layer between your theme and Shopify’s data. It reads your template, pulls in the right info (like product or customer data), builds the final page based on that, and then show that to the browser.

So, if you have something like:

{{ product.title }} -- {{ product.price | money }}

Shopify will replace that with something like:

Awesome T-Shirt -- $10.00

And that’s what gets sent to the browser.

Because of this setup, Liquid simplifies the page-creation. Eliminating the need to create every single page and use only one template for many pages. How cool is that? 🔥

‍

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 "{{ }}". And so, to show the title of a product, we'll be using:

{{ 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".

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 Through 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.

‍

Creating a simple Product Page using Liquid

Now that we’ve gone through some simple examples, let’s try to create a very simple product template.

⚠️ Before making any changes to your store, make sure to create a backup. We can easily do this by duplicating our theme. That way, you’ll have a safety net and can switch back if anything doesn’t go as planned.

To create a duplicate, head over to Online Store > Themes > Theme of Choice > … > “Duplicate”

Nice! Now that we’ve created a backup of our theme, we’re now ready to create our new product template.

Step 1: Open the Theme Code

On your current theme, click the three dots, then choose Edit code. This opens up the theme editor where all your theme’s files live.

Step 2: Add a New Product Template

Now, we’re going to create a brand-new product template.

In the left sidebar, find the Templates folder.
Click Add a new template.
Choose “product” from the dropdown.
Set the type to Liquid.
Give it a name like "learn-liquid".
Hit Done.

Awesome—we now have our starting point! This is all coming together!

Step 3: Add the Liquid Code

Once the new file is created, copy this code below

{% if product.available %}
  <h1>{{ product.title }}</h1>
  <ul>    
    {% for variant in product.variants %}      
      <li>{{ variant.title }} - {{ variant.price | money }}</li>
    {% endfor %}
  </ul>
{% else %}
  <p>This product is currently unavailable.</p>
{% endif %}

Here’s what this code does:

It checks if the product is available.
If yes, it displays the product title and lists each variant with its price.
If not, it shows a message saying the product is unavailable.

Step 4: Apply the Template to a Product

Now we need to use this template for one of your actual products.

Go back to your Shopify admin, and head to Products.
Click on any product you want to test this with.
On the right side (or near the bottom), look for Theme template.
Select "learn-liquid" from the dropdown.
Click Save.

Step 5: See It Live 🎉

Open up that product in your store. You should now see the changes we've made. If the product is available, we'll see the product title and all its variants with their prices. But if the product is unavailable, we'll see the unavailability message.

And that’s it! You’ve now created a super simple, custom product page using Shopify Liquid.

‍

Bonus Content: Shopify Liquid Cheat sheet

There are way more things you can do with Shopify Liquid. The custom product page is only one example. With Shopify Liquid—and a bit of help from HTML, CSS, and JavaScript—you can build just about anything you can imagine. Want to hide product prices if the visitor isn't logged in? Possible! How about only showing the buy button to B2B customers? Also, possible!

It's really endless and the store data that you can access from Liquid is also vast. Thankfully, Shopify provides us with a cheat sheet for Liquid. In this cheat sheet, you'll find everything we've just covered. The basics, the tags, the filters, and the data (or also called objects). Pair that with Shopify's Documentation for Liquid, you'll be leveraging the power of Liquid like a pro!

‍

Final Thoughts

And that’s a wrap on your crash course into Shopify Liquid! 🎉

By now, you’ve got a solid understanding of what Liquid is, how it works behind the scenes, and how to use it to build dynamic, data-driven templates in your Shopify store. Whether you’re outputting a product title, looping through variants, or conditionally showing content—Liquid gives you the tools to make your store way smarter and more flexible.

If this is your first time touching Liquid, don’t worry—it might feel like a lot at first, but the more you play around with it, the more it clicks. Start simple, try things out, break stuff (in a theme duplicate, of course!), and you’ll learn super-fast. If you'd like to practice further on Liquid, Shopify's repository for Liquid examples is a great place to start.

Thanks for hanging out with me! If you found this helpful and want to dig even deeper into Shopify development, be sure to check out the rest of the blog for more dev tips, tricks, and tutorials.

Until next time—happy coding! 💻⚡️

‍