Shopify Liquid Tutorial for Beginners: Complete Guide

Shopify Liquid Tutorial for Beginners: Complete Guide

If you want to customize a Shopify store beyond the options available in the theme editor, learning Shopify Liquid is an excellent place to start. Liquid is Shopify's template language and is used to display dynamic store data, control how content appears, and build customized Shopify themes and sections.

The good news is that you don't need to be an expert programmer to get started. If you understand basic HTML and have some familiarity with programming concepts, you can learn the fundamentals of Liquid relatively quickly.

In this Shopify Liquid tutorial for beginners, you'll learn what Liquid is, how its syntax works, and how to use variables, objects, tags, filters, loops, and conditional statements. You'll also see practical examples that you can use while developing Shopify themes.

What Is Shopify Liquid?

Liquid is an open-source template language originally created by Shopify. It allows Shopify themes to display dynamic information from a store.

For example, instead of manually writing a product name into your theme, Liquid can retrieve the product's name automatically:

<h1>{{ product.title }}</h1>

When a customer visits a product page, Shopify processes the Liquid code and replaces {{ product.title }} with the actual product title.

Liquid sits between your store's data and the HTML that the customer's browser receives.

A simplified workflow looks like this:

Shopify store data → Liquid → HTML → Customer's browser

Liquid is commonly used for:

  • Displaying product information
  • Showing collection data
  • Creating dynamic navigation
  • Displaying prices
  • Creating conditional content
  • Looping through products
  • Building reusable theme sections
  • Customizing Shopify storefronts

Why Should You Learn Shopify Liquid?

Shopify's theme editor provides many customization options, but eventually you may want more control over your storefront.

Learning Liquid allows you to customize things such as:

  • Product pages
  • Collection pages
  • Product cards
  • Navigation menus
  • Cart pages
  • Homepage sections
  • Promotional banners
  • Custom content blocks
  • Product badges
  • Dynamic messages

For Shopify developers, Liquid is one of the most useful technologies to understand.

What Do You Need Before Learning Liquid?

You don't need advanced programming knowledge to learn Liquid.

However, it helps to understand basic:

  • HTML
  • CSS
  • Variables
  • Conditional statements
  • Loops
  • Basic programming logic

You should also be comfortable working with Shopify themes and files.

If you're completely new to coding, start with HTML and basic CSS first. Once you understand how HTML elements work, Liquid becomes much easier to understand.

Understanding Shopify Liquid Syntax

Liquid uses two main types of syntax:

  1. Output
  2. Tags

Liquid Output

Output is written using double curly braces:

{{ product.title }}

Output tells Shopify to display a value.

For example:

<h1>{{ product.title }}</h1>

If the product is called "Classic T-Shirt", the browser will display:

Classic T-Shirt

You can also output other product properties:

{{ product.description }}
{{ product.vendor }}
{{ product.type }}
{{ product.url }}

Liquid Tags

Tags are written using curly braces and percent signs:

{% if product.available %}
  <p>In stock</p>
{% endif %}

Tags are used to control logic and execute Liquid instructions.

Common tags include:

{% if %}
{% else %}
{% endif %}

{% for %}
{% endfor %}

{% assign %}
{% capture %}

A simple way to remember the difference is:

  • {{ }} = display something
  • {% %} = perform logic or an action

Shopify Liquid Objects

Objects contain the data that you want to access.

For example:

{{ product.title }}

Here, product is the object and title is one of its properties.

Some commonly used Shopify objects include:

  • product
  • collection
  • cart
  • customer
  • shop
  • request
  • routes
  • settings
  • section
  • block

Product Object

The product object contains information about a product.

For example:

{{ product.title }}

Display the product price:

{{ product.price }}

Display the vendor:

{{ product.vendor }}

Display the product type:

{{ product.type }}

Display the product URL:

{{ product.url }}

Shop Object

The shop object provides information about the Shopify store.

For example:

{{ shop.name }}

You could use it inside a heading:

<h2>Welcome to {{ shop.name }}</h2>

Cart Object

The cart object provides information about the customer's cart.

For example:

{{ cart.item_count }}

This can be used to display the number of items currently in the cart.

<p>Your cart contains {{ cart.item_count }} items.</p>

Shopify Liquid Variables

Variables allow you to store values and reuse them.

You can create a variable using the assign tag:

{% assign message = "Welcome to our store!" %}

Then output it:

<p>{{ message }}</p>

The result is:

Welcome to our store!

Variables can also store numbers:

{% assign quantity = 5 %}
<p>Quantity: {{ quantity }}</p>

You can assign values from Shopify objects as well:

{% assign product_name = product.title %}

<h1>{{ product_name }}</h1>

Variables are particularly useful when you need to reuse or manipulate a value.

Shopify Liquid Filters

Filters allow you to modify output before displaying it.

Filters are added using the pipe character:

{{ value | filter }}

For example:

{{ product.title | upcase }}

This converts the product title to uppercase.

Common Liquid Filters

Upcase

{{ product.title | upcase }}

Downcase

{{ product.title | downcase }}

Capitalize

{{ product.title | capitalize }}

Strip HTML

{{ product.description | strip_html }}

This removes HTML tags from the output.

Truncate

{{ product.description | truncate: 100 }}

This limits the output to a specified length.

Replace

{{ product.title | replace: "Old", "New" }}

Filters can also be chained together:

{{ product.title | strip | downcase | capitalize }}

The output of one filter becomes the input for the next.

Shopify Liquid Conditional Statements

Conditional statements allow your theme to display different content depending on a condition.

The most common conditional tag is if.

{% if product.available %}
  <p>Available</p>
{% endif %}

If the product is available, the message is displayed.

If and Else

You can provide alternative content using else:

{% if product.available %}
  <p>In stock</p>
{% else %}
  <p>Sold out</p>
{% endif %}

Elsif

You can check multiple conditions:

{% if product.available %}
  <p>Available now</p>
{% elsif product.tags contains 'preorder' %}
  <p>Available for preorder</p>
{% else %}
  <p>Currently unavailable</p>
{% endif %}

Comparison Operators

Liquid supports several comparison operators, including:

==
!=
>
<
>=
<=
contains

For example:

{% if product.price > 1000 %}
  <p>Premium product</p>
{% endif %}

You can also check whether a product contains a particular tag:

{% if product.tags contains 'featured' %}
  <span>Featured</span>
{% endif %}

Shopify Liquid Loops

Loops are useful when you want to display multiple items.

For example, you can loop through products:

{% for product in collection.products %}
  <h2>{{ product.title }}</h2>
{% endfor %}

This will generate a heading for every product in the collection.

Display Product Links

You can combine Liquid with HTML:

{% for product in collection.products %}
  <a href="{{ product.url }}">
    {{ product.title }}
  </a>
{% endfor %}

Display Product Prices

{% for product in collection.products %}
  <h2>{{ product.title }}</h2>
  <p>{{ product.price | money }}</p>
{% endfor %}

The money filter formats the price according to the store's currency settings.

The Forloop Object

Liquid provides information about the current loop through the forloop object.

For example:

{% for product in collection.products %}
  <p>Product {{ forloop.index }}: {{ product.title }}</p>
{% endfor %}

Useful properties include:

forloop.index
forloop.index0
forloop.first
forloop.last
forloop.length

For example:

{% if forloop.first %}
  <p>This is the first product.</p>
{% endif %}

Working With Product Data

One of the most common uses of Liquid is displaying product information.

A basic product template might contain:

<h1>{{ product.title }}</h1>

<p>{{ product.vendor }}</p>

<div>
  {{ product.description }}
</div>

<p>{{ product.price | money }}</p>

You can also display the featured product image:

{% if product.featured_image %}
  <img
    src="{{ product.featured_image | image_url: width: 800 }}"
    alt="{{ product.featured_image.alt | escape }}"
  >
{% endif %}

Using conditional logic is helpful because not every product necessarily has the same data.

Working With Product Images

Shopify provides image-related properties and filters that allow you to control how images are displayed.

For example:

{{ product.featured_image | image_url: width: 600 }}

You can use the resulting URL in an HTML image element:

<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  alt="{{ product.title | escape }}"
>

The escape filter is useful when inserting dynamic text into HTML attributes.

Shopify Liquid Tags

Liquid includes many tags for controlling theme behavior and generating content.

Some important tags include:

  • if
  • unless
  • for
  • case
  • assign
  • capture
  • render
  • comment

Unless

unless is essentially the opposite of if.

{% unless product.available %}
  <p>This product is currently sold out.</p>
{% endunless %}

Case

The case tag is useful when you need to compare one value against multiple possibilities.

{% case product.type %}
  {% when 'Shirt' %}
    <p>This is a shirt.</p>
  {% when 'Shoes' %}
    <p>This is footwear.</p>
  {% else %}
    <p>Other product.</p>
{% endcase %}

This can be easier to read than a long series of if and elsif statements.

Using Liquid With HTML

Liquid is usually written alongside HTML.

For example:

<div class="product-card">
  <h2>{{ product.title }}</h2>

  {% if product.featured_image %}
    <img
      src="{{ product.featured_image | image_url: width: 500 }}"
      alt="{{ product.title | escape }}"
    >
  {% endif %}

  <p>{{ product.price | money }}</p>
</div>

Here, HTML controls the structure while Liquid provides dynamic store data.

This combination is one of the most important concepts to understand when developing Shopify themes.

Creating a Product Badge With Liquid

Here's a simple practical example.

Suppose you want to display a "Sale" badge when a product is on sale.

You can check whether the product's compare-at price is greater than its current price:

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

You can then style the badge with CSS:

.sale-badge {
  background: #e63946;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

This is a simple example of how Liquid and CSS can work together.

Creating a Featured Product Section

You can use Liquid to create dynamic sections that display selected products.

A basic example might look like:

<div class="featured-product">
  <h2>{{ product.title }}</h2>

  {% if product.featured_image %}
    <img
      src="{{ product.featured_image | image_url: width: 700 }}"
      alt="{{ product.title | escape }}"
    >
  {% endif %}

  <p>{{ product.price | money }}</p>

  <a href="{{ product.url }}">View Product</a>
</div>

In a real Shopify theme, you would typically make the product configurable through the section schema so that the merchant can select the product from the theme editor.

Shopify Liquid Sections

Modern Shopify themes use sections extensively.

A section allows merchants to customize parts of their storefront through the theme editor.

A simplified section file might contain:

<section class="custom-section">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.description }}</p>
</section>

The values can be connected to settings defined in the section schema.

For example:

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description"
    }
  ],
  "presets": [
    {
      "name": "Custom Section"
    }
  ]
}
{% endschema %}

Now the merchant can enter the heading and description through the Shopify theme editor.

Liquid and Metafields

Metafields allow Shopify merchants to store additional information that isn't included in standard product fields.

For example, you might have a product metafield containing:

  • Materials
  • Specifications
  • Care instructions
  • Additional product information
  • Manufacturer information

Depending on the metafield definition, you can access it through Liquid.

For example:

{{ product.metafields.custom.material }}

You can conditionally display it:

{% if product.metafields.custom.material %}
  <p>
    Material: {{ product.metafields.custom.material }}
  </p>
{% endif %}

Metafields are extremely useful for creating flexible Shopify storefronts.

Common Shopify Liquid Mistakes

Beginners often make a few common mistakes when learning Liquid.

1. Forgetting to Close Tags

If you write:

{% if product.available %}

you need to close the condition:

{% endif %}

Similarly:

{% for product in collection.products %}

needs:

{% endfor %}

2. Confusing Output and Tags

Remember:

{{ product.title }}

outputs data.

While:

{% if product.available %}

controls logic.

Mixing these two syntaxes can result in errors.

3. Forgetting That Some Data May Be Empty

Don't assume every product has every property.

Instead of blindly displaying optional information, check it:

{% if product.vendor != blank %}
  <p>Brand: {{ product.vendor }}</p>
{% endif %}

This prevents empty sections from appearing on the storefront.

4. Writing Extremely Complex Liquid

Liquid should generally remain readable.

If a piece of logic becomes unnecessarily complicated, consider whether some of the work should be handled elsewhere.

Readable code is easier to maintain and troubleshoot.

Shopify Liquid Best Practices

Following a few best practices will make your Shopify theme code easier to maintain.

Keep Liquid readable

Use meaningful variable names:

{% assign featured_product = product %}

instead of confusing names.

Use conditions for optional data

{% if product.description != blank %}
  {{ product.description }}
{% endif %}

Escape dynamic HTML values

For example:

{{ product.title | escape }}

when inserting text into an HTML attribute.

Avoid unnecessary duplication

If the same markup is used repeatedly, consider reusable snippets or theme components where appropriate.

Keep performance in mind

Avoid unnecessary loops and excessive data processing, particularly in sections that appear across many pages.

A Practical Shopify Liquid Example

Let's combine several concepts into one simple product card.

<div class="product-card">

  {% if product.featured_image %}
    <a href="{{ product.url }}">
      <img
        src="{{ product.featured_image | image_url: width: 500 }}"
        alt="{{ product.featured_image.alt | default: product.title | escape }}"
      >
    </a>
  {% endif %}

  <h2>
    <a href="{{ product.url }}">
      {{ product.title }}
    </a>
  </h2>

  {% if product.vendor != blank %}
    <p>{{ product.vendor }}</p>
  {% endif %}

  <p>
    {{ product.price | money }}
  </p>

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

  {% if product.available %}
    <p>In stock</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}

</div>

This example demonstrates several important Liquid concepts:

  • Product objects
  • Conditional statements
  • Liquid filters
  • Dynamic URLs
  • Product images
  • Product prices
  • Availability checks
  • Sale detection

Once you understand examples like this, you can begin creating much more sophisticated Shopify theme components.

How to Learn Shopify Liquid Faster

The best way to learn Liquid is to combine documentation with practical projects.

Start with small tasks such as:

  1. Display a product title.
  2. Display a product price.
  3. Add a product image.
  4. Create an "In Stock" message.
  5. Create a "Sale" badge.
  6. Loop through products.
  7. Create a custom section.
  8. Work with metafields.
  9. Build a custom product card.
  10. Create a complete reusable theme component.

Don't try to memorize every Liquid object or filter. Instead, learn how the syntax works and use the documentation to look up specific objects, properties, tags, and filters when needed.

Frequently Asked Questions

Is Shopify Liquid difficult to learn?

Liquid is relatively beginner-friendly, especially if you already know basic HTML and CSS. The syntax is simpler than many general-purpose programming languages, although advanced Shopify theme development can require knowledge of JavaScript, CSS, APIs, and Shopify's theme architecture.

Is Shopify Liquid a programming language?

Liquid is generally described as a template language. It provides variables, filters, conditions, loops, and other features for generating dynamic content, but it isn't a general-purpose programming language.

Can I use Liquid without knowing JavaScript?

Yes. You can perform many Shopify theme customizations using HTML, CSS, and Liquid without JavaScript. JavaScript becomes useful when you need interactive functionality that Liquid alone cannot provide.

Where is Liquid used in Shopify?

Liquid is primarily used within Shopify themes to generate dynamic storefront content. It can be used in theme files such as templates, sections, snippets, and layouts.

Can Liquid access Shopify product information?

Yes. Liquid provides access to Shopify store data through objects such as product, collection, cart, and other objects available in the relevant theme context.

Can I create custom Shopify themes with Liquid?

Yes. Liquid is a core part of Shopify theme development. You can use it together with HTML, CSS, JavaScript, and Shopify's theme architecture to build customized storefront experiences.

Conclusion

Shopify Liquid is one of the most important technologies to learn if you want to customize Shopify themes.

The fundamentals are straightforward:

  • Objects provide access to Shopify data.
  • Output tags display values.
  • Liquid tags control logic.
  • Filters modify values.
  • Conditions let you display different content based on rules.
  • Loops let you work with collections of data.
  • Sections and snippets help you create reusable theme components.
  • Metafields allow you to work with additional store data.

Start with small examples and gradually build more advanced components. Once you're comfortable with Liquid syntax and Shopify's theme structure, you'll be able to create much more customized and flexible Shopify storefronts.

The key is practice: take a real storefront requirement, break it into smaller pieces, and use Liquid to make the content dynamic.