Beginner’s Guide to Shopify Liquid Template Language

If you have ever looked at a Shopify theme, you may have seen code that looks a bit different to normal HTML and CSS. This code is called Liquid, Shopify’s special template language. Liquid helps you control what appears on your online shop pages. It mixes ordinary text with little tags and filters to show products, prices, images, and more.

This guide will help you understand the basics of Liquid so you can start customising your Shopify theme. You do not need to be an expert coder—just some basic knowledge of HTML and CSS will be enough to begin.

What is Liquid?

Liquid is a template language created by Shopify. It allows you to:

1. Insert dynamic content: Show details from your products, collections, or store settings.
2. Apply logic: Choose when to show or hide certain information.
3. Format data: Change how numbers, dates, or text appear to visitors.

When you edit your Shopify theme, you will see Liquid tags and objects in the files. These help Shopify know what to display.

Liquid Objects

Objects are pieces of data that Liquid uses to show dynamic content. They are written inside double curly braces like this:

{{ product.title }}

This line shows the title of the product on the page. Other common objects include:

• {{ product.price }}: Shows a product’s price.
• {{ product.description }}: Shows a product’s description.
• {{ collection.title }}: Shows the name of a collection.

Because these objects are linked to your Shopify store’s data, they will automatically update when you change your products, prices, or other details.

Liquid Tags

Tags let you control logic and create structure. They are written inside curly braces with a percentage sign, like this:

{% if product.available %}

This product is available!

{% endif %}

Tags do not show any content on their own. Instead, they act as instructions. For example:

• If/Else tags:

  {% if product.available %}
    In stock!
  {% else %}
    Out of stock.
  {% endif %}

These tags check a condition and show different content depending on the result.

• For loops:

  {% for product in collection.products %}
    {{ product.title }}  
  {% endfor %}

These tags allow you to repeat content for each item in a list. For example, this loop shows the title of every product in a given collection.

• Case/When tags:

  {% case product.type %}
    {% when "T-Shirt" %}
      This is a t-shirt.
    {% when "Mug" %}
      This is a mug.
    {% else %}
      This is another type of product.
  {% endcase %}

These are helpful if you want to show different content based on specific values.

Liquid Filters

Filters change how objects look on the page. You write filters inside the object tags, using a pipe symbol |. For example:

{{ product.price | money }}

This shows the product’s price in the shop’s currency format.

Some common filters include:

• | upcase : Makes text uppercase.

  {{ product.title | upcase }}

• | downcase : Makes text lowercase.
• | capitalize : Capitalises the first letter of each word.
• | replace: 'old', 'new' : Replaces certain text with something else.

Filters are a quick way to improve how data looks, such as formatting prices, dates, and text.

Common Liquid Files in Shopify Themes

Your Shopify theme uses Liquid to create different pages. Some common files include:

• layout/theme.liquid: The main template that includes the header, footer, and basic structure.
• templates/*.liquid: Templates for different pages, such as product.liquid or collection.liquid.
• sections/*.liquid: Reusable sections that you can add or rearrange on your homepage and other pages.
• snippets/*.liquid: Small pieces of code you can include in other Liquid files. For example, a product-card.liquid snippet might show a product image and price.

How to Get Started

1. Use the Shopify Theme Editor: You can start by making small changes in the theme customiser. Add or remove sections and see how the code looks in your theme files.

2. Edit Your Theme Code: In the Shopify Admin, go to Online Store > Themes > Actions > Edit code. Here you will find your theme’s Liquid files. Start with something simple, like adding a product title on the homepage.

3. Read the Documentation: The Shopify Liquid documentation is a helpful resource. It explains every tag, object, and filter.

4. Practice with a Test Store: If possible, create a test store or use a backup theme so you can experiment without affecting your live shop.

Example: Adding a Welcome Message

Let’s say you want to add a welcome message to your homepage if the user is viewing the store for the first time today. You might do something like:

{% if customer %}
  {{ 'Welcome back, ' | append: customer.first_name | capitalize }}!
{% else %}
  Welcome to our store!
{% endif %}

This code checks if there is a logged-in customer. If yes, it shows “Welcome back” and their first name, formatted nicely. If no, it shows a general welcome message.

Next Steps

• Experiment with different tags and filters to get comfortable.
• Try adding a loop to show a list of product titles.
• Change the text formatting of a product description using filters.
• Build a small custom snippet and include it in your main layout.

Conclusion

Liquid may look unusual at first, but it is not as hard as it seems. By learning a few basic tags, objects, and filters, you can control the look and feel of your Shopify store. As you become more comfortable, you will be able to create unique, dynamic pages that show exactly what you want your customers to see. Over time, Liquid will become a powerful tool in your theme customisation toolbox.