Liquid
Learn Shopify Liquid, the template language used in themes.
Liquid is Shopify's template language. It is one of the most important technologies every Shopify developer should learn. While HTML creates the structure of a webpage and CSS controls its appearance, Liquid makes the page dynamic by displaying real data from your Shopify store.
For example, instead of manually writing the name and price for every product page, Liquid automatically displays the correct information based on the product a customer is viewing.
In this lesson, you'll learn what Liquid is, how it works, its main building blocks, and why it is essential for Shopify development.
What is Liquid?
Liquid is a template language created by Shopify that allows developers to display dynamic content inside a theme.
Instead of writing fixed content like:
<h1>Running Shoes</h1>
<p>₹2,499</p>you can write:
<h1>{{ product.title }}</h1>
<p>{{ product.price | money }}</p>When the page loads, Shopify automatically replaces the Liquid code with the actual product title and price.
For example:
<h1>Running Shoes</h1>
<p>₹2,499</p>This makes one template work for hundreds or even thousands of products.
Why Use Liquid?
Imagine an online store with 5,000 products.
Without Liquid, you would need to create 5,000 separate HTML pages.
With Liquid, you create one product template, and Shopify automatically fills it with the correct product information.
This saves time, reduces errors, and makes the store easier to maintain.
How Liquid Works
Liquid acts as a bridge between Shopify's database and your theme.
The workflow looks like this:
Shopify Store Data
|
v
Liquid Template
|
v
Generated HTML
|
v
Customer's BrowserCustomers never see Liquid code. They only see the final HTML generated by Shopify.
The Three Main Parts of Liquid
Liquid has three main building blocks:
1. Objects
Objects display information stored in Shopify.
{{ product.title }}This displays the product title.
Other common objects include:
{{ shop.name }}
{{ customer.first_name }}
{{ collection.title }}Objects provide access to store data.
2. Tags
Tags control the logic of a page.
They allow you to:
- Create loops
- Add conditions
- Assign variables
- Include other files
{% if product.available %}
<p>In Stock</p>
{% else %}
<p>Out of Stock</p>
{% endif %}Here, Liquid checks whether the product is available before displaying a message.
3. Filters
Filters modify the output of objects.
{{ product.price | money }}The money filter formats the product price as currency.
Another example:
{{ product.title | upcase }}If the title is:
Running ShoesThe output becomes:
RUNNING SHOESFilters help format data without changing the original value.
Looping Through Products
Liquid can display multiple products using loops.
{% for product in collection.products %}
<h3>{{ product.title }}</h3>
{% endfor %}This loop displays every product in a collection.
Instead of writing product information repeatedly, Liquid automatically generates the list.
Variables in Liquid
You can also create your own variables.
{% assign greeting = "Welcome to our store!" %}
<p>{{ greeting }}</p>Output:
Welcome to our store!Variables make templates easier to organize and reuse.
Comments in Liquid
Comments allow developers to leave notes inside their code.
{% comment %}
This section displays featured products.
{% endcomment %}Comments are ignored when the page is generated and are never visible to customers.
Real-World Example
Imagine you own an online clothing store with 1,000 products.
Instead of creating 1,000 product pages, you create one product template using Liquid.
Whenever a customer opens a product page, Shopify automatically displays:
- Product title
- Images
- Price
- Description
- Variants
- Availability
Each page looks unique, even though the same Liquid template is being used.
This is one of the biggest advantages of Shopify.
Where is Liquid Used?
Liquid is used throughout Shopify themes.
Common places include:
- Homepage
- Product pages
- Collection pages
- Cart page
- Header
- Footer
- Navigation menus
- Search results
- Blog pages
- Customer account pages
Almost every page in a Shopify store uses Liquid in some way.
Best Practices for Writing Liquid
When working with Liquid:
- Keep your templates clean and organized.
- Use meaningful variable names.
- Avoid repeating the same code.
- Use snippets for reusable components.
- Add comments for complex logic.
- Test templates with different products and collections.
- Keep business logic simple inside templates.
These practices make themes easier to maintain and update.
Why Liquid Matters in Shopify Development
Liquid is the foundation of Shopify theme development. Every professional Shopify developer works with Liquid every day.
Whether you're displaying products, building collection pages, customizing the shopping cart, or creating reusable sections, Liquid is the technology that connects your theme with Shopify's store data.
Once you understand Liquid, you'll be able to create dynamic, flexible, and professional Shopify stores that automatically update as products, customers, and store content change.
Key Takeaways
- Liquid is Shopify's template language used to display dynamic store data.
- It connects Shopify's database with your theme and generates HTML for customers.
- The three main parts of Liquid are Objects, Tags, and Filters.
- Liquid allows developers to display products, collections, customer information, and other store data without creating separate pages.
- Loops, conditions, variables, and filters make themes flexible and reusable.
- Learning Liquid is one of the most important steps toward becoming a professional Shopify developer because it powers nearly every page of a Shopify store.