Liquid is Shopify‘s template language that connects your store’s backend data to the visible storefront, allowing you to create dynamic, personalized experiences. Here’s what you’ll learn in this guide:
- What is Liquid? A mix of HTML and special tags/filters to display dynamic data like product prices, customer info, and inventory.
- Why learn Liquid? Customize your store, add dynamic features (e.g., personalized recommendations), and improve functionality.
- Key Components:
- Objects: Pull data like
{{ product.title }}for product names. - Tags: Control logic, e.g.,
{% if product.available %}for conditional content. - Filters: Format data, e.g.,
{{ product.price | money_with_currency }}for currency display.
- Objects: Pull data like
- Examples: Display SKUs, create product cards, and use loops for collections.
Liquid helps you build a dynamic, user-friendly Shopify store. Dive in to learn how to showcase your store’s data effectively and automate updates.
Basics of Liquid Syntax
Objects: Using Shopify Data
In Liquid, objects represent data from your Shopify store, such as products, customers, and collections. Think of them as placeholders that automatically pull and display information like product names, prices, or customer details [4].
To display this dynamic content, wrap the object in double curly brackets {{ }}. For example:
{{ product.title }} // Displays the product name
{{ product.price }} // Shows the product price
{{ customer.name }} // Reveals the customer's name
Tags: Controlling Logic and Flow
Tags manage the logic and flow of your templates. They’re enclosed in curly brackets with percentage signs {% %} and allow you to control what content appears based on specific conditions [4][1].
For example, you can use conditional tags to show different content depending on product availability:
{% if product.available %}
<button>Add to Cart</button>
{% else %}
<p>Out of Stock</p>
{% endif %}
You can also use the for tag to loop through collections or lists – great for displaying products in a collection or on the homepage:
{% for product in collection.products %}
<h2>{{ product.title }}</h2>
<p>{{ product.price }}</p>
{% endfor %}
Filters: Modifying Output
Filters let you format or transform data before it’s displayed. They’re applied to objects or strings using the pipe character | [4][3]. Here are some common examples:
| Filter | Example |
|---|---|
| capitalize | `{{ product.title |
| upcase | `{{ product.vendor |
| strip_html | `{{ product.description |
You can even chain multiple filters for more advanced formatting:
{{ product.title | upcase | strip_html }}
This example converts the product title to uppercase and removes any HTML tags [3].
Filters can also handle dates and numbers:
{{ product.published_at | date: "%B %d, %Y" }}
{{ product.price | money_with_currency }}
How to Use Liquid in Shopify
Showing Dynamic Store Data
To include dynamic content in your Shopify store, you can use Liquid to reference store data. Here’s an example:
<div class="product-card">
{{ product.featured_image | img_url: 'medium' | img_tag }}
<h2>{{ product.title }}</h2>
<p class="price">{{ product.price | money_with_currency }}</p>
<p class="description">{{ product.description | strip_html | truncatewords: 30 }}</p>
</div>
This snippet generates a product card that updates automatically. Filters like strip_html clean up the description, while truncatewords limits the text to a manageable length. This keeps your store looking polished without needing constant updates [1].
Adding Conditional Logic
Conditional statements let you customize content based on customer activity or store conditions. For example, you can greet returning customers or encourage new visitors to explore:
{% if customer %}
{% if customer.orders_count > 0 %}
<p>Welcome back! You've made {{ customer.orders_count }} orders.</p>
{% else %}
<p>Welcome! Explore our latest collection.</p>
{% endif %}
{% else %}
<p>Sign up for exclusive offers!</p>
{% endif %}
Conditional logic is also helpful for managing inventory. Here’s how you can display options for products with multiple variants:
{% if product.variants.size > 1 %}
<select name="variant_id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
{% endif %}
This ensures your store adapts dynamically to customer needs and product availability.
Looping Through Data
Loops are a powerful way to display collections of items efficiently. For instance, you can showcase a selection of featured products:
{% for product in collections.featured.products limit: 4 %}
<div class="product-tile">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
{% if product.available %}
<span class="status in-stock">In stock</span>
{% else %}
<span class="status sold-out">Sold out</span>
{% endif %}
</div>
{% endfor %}
This loop pulls up to four products from your featured collection, displaying their images, titles, and availability. It’s a simple way to keep your store fresh and engaging [1][2].
Advanced Liquid Features
Using JSON Schemas in Themes
JSON schemas let you define customizable theme settings, such as colors or fonts, directly within Shopify’s admin. By tapping into the settings object in Liquid, you can dynamically apply these settings to your theme:
<div style="color: {{ settings.primary_color }}">
{{ product.title }}
</div>
Once your customizations are set, keeping your code clean and efficient becomes a top priority.
Managing Whitespace in Liquid
Controlling whitespace in your Liquid code helps maintain cleaner and more readable HTML output. To remove unnecessary spaces around Liquid tags, use {%- and -%}:
{%- if product.available -%} In Stock {%- endif -%}
While this improves code readability, developers still need to work within Liquid’s inherent constraints.
Working Around Liquid’s Limits
Liquid has its boundaries when it comes to handling complex tasks like advanced calculations or logic. Here are some practical ways to address these challenges:
| Challenge | Solution |
|---|---|
| Complex Calculations | Leverage Shopify’s API endpoints |
| Advanced Logic | Combine multiple Liquid filters |
| Data Manipulation | Utilize theme settings and metafields |
For more sophisticated needs, Shopify’s API or metafields can handle data processing on the server side. If you’re looking for tailored solutions, E-commerce Dev Group specializes in extending Liquid’s capabilities through Shopify Plus and custom development services.
Summary and Resources
Main Points Recap
Liquid’s main components work together to build dynamic Shopify storefronts that adapt to business needs and customer interactions:
- Objects: Pull and display store data dynamically.
- Tags: Manage template logic and control content flow.
- Filters: Adjust and format data before displaying it.
These elements are the building blocks for customizing and improving your Shopify store. To gain a deeper understanding, check out the resources below.
Where to Learn More
Dive into Shopify’s official documentation for detailed guides, use Theme Kit for local development, or explore Partner Academy courses for a structured learning experience.
For advanced projects or tailored solutions, professional services can provide additional support.
Get Help from E-commerce Dev Group
E-commerce Dev Group offers custom Shopify development and theme optimization to help businesses make the most of Liquid. Their services include custom theme creation, performance tuning, and Shopify Plus solutions.
"Liquid allows for dynamic content generation by replacing placeholders within theme files with actual data from the Shopify store. This enables customization of the storefront by displaying product information, customer details, and collections in a flexible and dynamic way." [4]
Getting started with Shopify Liquid
FAQs
Now that we’ve gone through Liquid’s components and features, let’s tackle a few common questions about how it works in Shopify.
How does Liquid work on Shopify?
Liquid acts as the bridge between Shopify’s store data and HTML. It uses objects like {{ product.title }} to display data, and tags like {% if product.available %} to manage logic. When someone visits your store, Liquid pulls the latest data from Shopify’s database to update your content on the fly [1].
What is the theme Liquid file in Shopify?
Theme Liquid files are a mix of HTML and Liquid code, creating dynamic templates for your Shopify store. They handle tasks such as:
- Updating content automatically
- Applying business rules
- Structuring your theme’s templates
What is the difference between HTML and Liquid?
Here’s a quick comparison of HTML and Liquid:
| Feature | HTML | Liquid |
|---|---|---|
| Purpose | Displays static content | Generates dynamic content |
| Functionality | Fixed structure for web pages | Accesses store data and adds logic |
For instance, HTML might show a static price like <p>Price: $19.99</p>. Liquid, on the other hand, can dynamically display current prices with <p>Price: {{ product.price | money }}</p>, updating whenever the price changes in your store [2].
