Introduction to Liquid
Liquid is a templating language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, which is used in various developments by many software companies. Liquid is the foundation of all Shopify themes and is used to load dynamic content onto online store pages.
In this article
What is a template language?
Website designers and developers can use a templating language to create web pages that combine static content that is consistent across multiple pages and dynamic content that changes as you move from one page to another. The templating language allows you to reuse static elements that define the layout of a web page while the page is dynamically populated with data from your Shopify store. Static elements are written in HTML, and dynamic elements are written in Liquid. The Liquid elements in the file act as placeholders: when the code in the file is compiled and sent to the browser, Liquid replaces them with data from the Shopify store.
Liquid syntax
Like traditional programming languages, Liquid has a syntax, interacts with variables, and includes constructs such as inference and logic. Liquid constructs are easily recognized and distinguished from HTML by two sets of delimiters: double-curly-brace delimiters {{}} , which denote output, and percentage-curly-bracket delimiters {% %}, which denote logic and control flow.
There are three main groups in Liquid code:
Objects
Liquid objects receive data from the Shopify server. In the theme template, objects are enclosed in double curly braces {{ }} and look like this:
{{product.title}}
In the example above, product is an object and title is a property of that object. Each object has a list of properties associated with it. To learn more about the properties of a product object, see the Product Object link.
The {{product.title}} Liquid object can be found in the Product template of the Shopify theme. When the file code is compiled and displayed on the Shopify store product page, the Liquid object will be displayed in the page header. For example, in a clothing store the result might be:
Awesome T-shirt
Even though each product in your Shopify store uses the same template, the Liquid objects in the template will output different data depending on the product page you're viewing.
To learn more about the different Liquid objects that can be used in theme templates, visit the Liquid Objects link.
Tags Liquid
Liquid tags are used to create logical connections and control flow in templates. Percentage curly braces {% %}, and the text they surround, do not produce visible results when displaying a web page, but they do allow you to assign variables and create conditions or loops.
For example, you can use Liquid tags to display different content on a product page depending on whether the product is available or not:
{% if product.available %}
Price: 99,99$
{% else %}
Sorry, this size is out of stock.
{% endif %}
If the product is available, the following will be displayed:
Price: 99,99$
If the product is not available, the following will be displayed:
Sorry, this size is out of stock.
The above example uses if and else Liquid tags, which are control flow tags.
Liquid tags are divided into four types:
Filters
Liquid filters are used to change the output of numbers, strings, objects and variables. They are placed in the {{ }} or {% %} tag and are denoted by the symbol “|”.
A simple example is the capitalize filter:
{{ 'привет мир!' | capitalize }}
The filter modifies the string by capitalizing it. The output will be:
Привет мир!
Multiple filters can be used in one tag, and they are applied from left to right:
{{ 'Привет мир!' | capitalize | remove: "мир" }}
The line is first shown as capital, and then the word world is removed. The following will be displayed:
Hi!
You can use Liquid filters for a wide range of data operations. Filters are divided into 8 types:
- Array filters
- Color filters
- HTML filters
- Math filters
- Money filters
- Row filters
- URL filters
- Additional filters
Theme templates
You can access your theme files from the Themes section of your Shopify dashboard:
Desktop
iPhone
Android
- From your Shopify account, go to Online Store > Themes.
- Find the theme you want to edit, then click Actions > Edit code.
- Click on the name of the Liquid file you want to change and edit it.
- Click Save.
- Check the corresponding page of your online store to monitor the result.
- In the Shopify app, click Store.
- Click the... button next to Online Store and then click Manage sales channel.
- Click Themes.
- Find the theme you want to edit, then click Actions > Edit code.
- Click on the name of the Liquid file you want to change and edit it.
- Click Save.
- Check the corresponding page of your online store to monitor the result.
- In the Shopify app, click Store.
- Click the... button next to Online Store and then click Manage sales channel.
- Click Themes.
- Find the theme you want to edit, then click Actions > Edit code.
- Click on the name of the Liquid file you want to change and edit it.
- Click Save.
- Check the corresponding page of your online store to monitor the result.
Additional resources
In addition to the comprehensive Liquid reference information available in the Help Center, you can use the Shopify cheat sheet as a quick Liquid guide for your project.
To watch videos on this and other topics, visit the Shopify Youtube channel for developers.