When we want to create an online store on the Shopify platform, we start by choosing the right template for our store. The template determines the look, functions and layout of the store. A properly selected template has a significant impact on the perception of our store by customers. Shopify templates are built using web technologies such as HTML, CSS, JavaScript and most importantly using the Shopify Liquid template language.
Shopify offers nearly 100 different templates in its collection. Each template can be adapted to the needs of your store by configuring the settings in the administration panel. However, these settings usually have some limitations. When the admin panel doesn’t give us the possibility to make the changes we want, we can edit the Shopify Liquid template code. Before we do that, it’s good to get to know what Shopify Liquid is and how it works to avoid unwanted changes or break our template.
In the following article, we will try to answer the following questions:
- What is the template language?
- What is Shopify Liquid?
- What are the benefits of Shopify Liquid for the store owner?
- How is Shopify Liquid constructed?
- What does Shopify Plus Development give us in combination with Shopify Liquid?
- Where can you find Shopify Liquid learning materials?
What is the template language?
Users are unable to differentiate between static and dynamic content when browsing a website. Static content is hard-coded on the page, while dynamic content is loaded from the database. Web developers use a template language to combine static and dynamic content. The template language in combination with HTML allows you to create website elements and insert dynamic content into them, depending on where such an element is rendered on the page. For example, we have a product page in our store. We can display information about the product such as name, photo or description. This information renders dynamically depending on the product we are currently viewing. The template language is responsible for this, on the Shopify platform it is – Shopify Liquid.
What is Shopify Liquid?
Liquid is a template language created by Shopify. It has been used since 2006 in Shopify stores and many other web applications such as Jekyll. It was written in the Ruby programming language and is the basis of all store templates made for Shopify. It uses a combination of objects, tags, and filters to render dynamic content. It also has many logical and comparative operators, which in combination with tags, define logic indicating to templates which code snippet is to be executed. Over time, shopify and jekyll extended Liquid with their own objects, tags and filters, creating in this way the three most popular types of Liquid language: Liquid, Shopify Liquid, and Jekyll Liquid. Shopify Liquid is available on GitHub as an open-source project and includes objects that represent store, product, customer information and filters. If you own a Shopify store or are planning to create one, you will certainly come across .liquid files in your template, which will contain similar code snippets as this one:
This is a snippet of HTML and Shopify Liquid code. Shopify Liquid syntax is not complicated. Curly brackets `{{ }}`, are responsible for the output, whereas curly brackets combined with percentage signs – `{% %}`, are responsible for the logic. We’ll discuss these syntax in more detail later in this article.
The benefits of using Shopify Liquid
Shopify Liquid templates are created in a simple way – so that their users can edit them themselves. All you need to do this, is learn the basics of the Shopify Liquid language, which is easy to understand and read. Understanding the syntax and operation of the Shopify Liquid language will help you understand how your store template works. Even if you are not a programmer, understanding the Shopify Liquid code won’t be a big challenge for you. As a store owner, this will give you the ability to solve some problems and allow you to edit the template code, according to your preferences. Thanks to this, you will be able to save a lot of time and money in the future.
Liquid and Shopify Liquid have clear documentation with examples of ready-made solutions. Even if you encounter problems at the beginning of your familiarization with Shopify Liquid, you can easily find places where you can get help. You will be able to use the technical documentation or ask the huge Shopify community for help. We wrote on our Shopify agency blog about how to do this in here: Shopify Support.
Learning Shopify Liquid
It’s best to start learning Shopify Liquid by realizing where our liquid code is being processed. As a template engine, Liquid by its nature only runs once on the server side. Therefore, all changes we make to it will be processed before the code goes to our clients’ browsers. Therefore, from the moment the recipient sees our store in the browser, any change to the website requires the use of JavaScript.
Installing Shopify Liquid
Using Liquid and editing our template directly in your Shopify customer dashboard requires no installation. We just need to find the template we want to work on, and after clicking “ACTIONS” next to its name, select the “Edit code” option. We will be redirected to the editor, where we can now make and save changes.
More advanced use of Liquid may require us to reach for a convenient collection of terminal commands and tools – Shopify CLI. This will allow us to more conveniently and efficiently edit the code locally in our own code editor.
ATTENTION! To use Shopify CLI, you must have at least basic programming knowledge (terminal support) and a locally installed code editor. It will also be necessary to install the correct Ruby language version on our computer. See the Shopify CLI documentation for detailed instructions on how to start the local environment on individual operating systems.
Shopify Liquid Basics
The files in which we write the liquid code are divided into 3 folders: “templates”, “sections” and “snippets”. The hierarchy they create allows certain types of files to be used only in the right places.
Templates
The files in the “templates” folder correspond to the individual types of subpages in our store. At this point we can use existing files defined in the “sections” and “snippets” folders. Example of template can be a file named “product.liquid” defined in the “templates” folder, which may outline how individual sections will work together on a product page.
Sections
The contents of the “sections” folder are usually files corresponding to entire sections on individual subpages, e.g. a section with the latest products or a section containing a product description. The sections can only be used in files defined as “templates” – using them in snippets or in other sections will cause an error.
Snippets
Files placed in “snippets” usually represent small or often repetitive elements on the page. A good example is a product tile that appears multiple times on the page in different sections and shows different products. Another minimalist example of use can be a simple graphic icon that we want to use repeatedly in different places. We can use files of this type anywhere.
Basic syntax
At first glance, Liquid looks like HTML with the addition of easy-to-recognize constructs that represent logic or dynamically inserted values. Such constructs include two types of parentheses, logical operators, objects, tags, and filters.
Parentheses
There are two types of parentheses in the code:
- {{ }} (double curly braces) – they allow you to place dynamic content retrieved from the database between them. The following example shows the display of the product name:
- {%%} (curly brackets with a percent sign) – between such brackets we can place logical actions, e.g. if a given block of HTML code should appear on the page only in a specific case. In the example below, the product type will only be displayed above the product name if they are shoes:
Logical operators
In the previous example, we can see the use of the logical operator “==”. There are several such operators in Liquid a that help us control the behavior of our code:
Note that, unlike most programming languages, some operators have been changed to word values. Instead of the operator “||” we use “or” and instead of “&&” we use “and”. This syntax is a convenience for non-technical people, but can be a bit confusing for long-term programmers.
At this point, it is worth mentioning the “contains” operator, which allows us to check whether a given object contains a specific value, for example:
Define variables
We can save the information we use in the code into variables. In Liquid, we have the option of using two types of variables:
Assign
Assign it is used to save simple data or calculation results, e.g .:
Capture
This variable main purpose is to create and save more extensive values. We can also use other, previously defined variables in it, e.g .:
Data types
The individual values in Liquid can be divided into several types. Knowing their differences is essential when using logical operators. The data types in Liquid are:
String
String it is a sequence of characters surrounded by quotation marks, e.g. ‘This string is of the String type’.
Number
Number represents numeric values, both integers and those with a decimal point, e.g. 10 and 12.44.
Boolean
Boolean takes one of the two values: “true” or “false”, they represent the truthfulness of the data and allow you to check it.
Array
Represents a list of multiple values that we can iterate through. Liquid, unlike other programming languages, does not allow us to create such a list directly. The only way to do this is to break an existing value – for example, longer text – into many shorter text values, e.g .:
This will add to the variable “newArray” an object of the Array type with values divided according to spaces in the text: “This”, “product”, “is”, “available” (we will get 4 values on the list).
Nil
This is a special type that Shopify returns to us when the value we ask the database for exists, but it turns out to be empty.
EmptyDrop
This data type represents values that do not exist (and are not empty as is the case with Nil).
How Do I Use Shopify Liquid?
Now that we know the basics of Liquid’s syntax and capabilities, we can now explain how they work and what objects, tags, and filters are. The list of individual Liquid components may be helpful in explaining these issues. It allows you to easily find the areas of interest to us, and short descriptions and examples facilitate trouble-free understanding of the functionalities.
Tags
Tags are predefined keywords that allow us to perform actions specified by the documentation. In the examples so far, we have already dealt with the use of such tags as “if” or “assign”.
Tags can be divided into 4 groups according to their purpose:
Controlling the rendered code
They decide in what situations and whether to execute the given code blocks according to our guidelines. A good example is the standard “if” that causes the enclosed code to be executed if the condition is met:
Iterating
This type of tags allows us to repeat the execution of a given block of code a certain number of times. The basic and most frequently used tag of this type is the “for” tag. We can use it, for example, to display the product tiles for each product separately from the selected collection:
Template
This group includes tags that can change the default behavior of Liquid, or are used to create connections between different files. For example, the ‘raw’ tag stops processing the Liquid code inside itself:
The result of the example above will be text “{{exampleTextVariable}}” on the page instead of the actual value of this variable.
A very frequently used template tag is “render” – it is used to insert code from a snippet file with the given name in its place of use:
This line will place the code from the snippets / product-card.liquid file here.
Variables
Tags from this group include the already discussed “assign” and “capture”. Additionally, they can include “increment” and “decrement” tags, which act as numerators in the code.
Interestingly, the aforementioned counters are in no way connected with other variables and are independent entities, even if they have identical names:
The above code will be converted to the result:
10
0
1
2
10
Objects
Liquid objects are predefined data sets that we can refer to in order to retrieve the information we are interested in. They contain many properties or other child objects that we can freely use. To refer to the property we are interested in, we use the dot notation. For example, to display the name of the author of the currently viewed blog article, we must use the “article” object and refer to its “author” property after a dot, which will display the author’s name in the place we choose.
Objects can be divided into 2 types. The first of them are global objects that are always available to us, regardless of where they are called. An example of a global object may be the “shop” object that stores basic information about the store, such as its address, currency or domain address. The second type are contextual objects, i.e. objects whose existence or value depends on the context in which we use them. As an example, we can take one of the most frequently used objects, or “product”.
Imagine you want to display a product name on a product page called “Green T-shirt”. In this case, by default, the keyword “product” used in parentheses refers to the product you are just visiting, so the following code should show us the name of the product (“Green T-shirt”):
However, if we use an identical code on the blog post page, Shopify won’t return us anything because it won’t know what to refer to in the case of “product”.
Another example of a calling context could be a section with many products in it – in which case the mentioned products are probably rendered using a loop, like that:
In this context of use, the content of the “product” object will depend on the currently processed iteration of the “for” loop.
If we placed this type of code on our product page “Green t-shirt”, the object “product” inside the loop will no longer refer to our “green t-shirt”, but to the product that is in “example_collection.products” and is currently iterating through the “for” loop.
Filters
Filters are used to modify the display of already available data or to make specific changes, e.g. arithmetic. Using filters greatly simplifies our code and the time it takes to make changes.
The syntax of filters is very simple: after the value we display, we add the “|” followed by the name of the filter we want to use.
For example, if we get a given value written entirely in lowercase, but we would like the first letter to be uppercase, just use the ‘capitalize’ filter:
Some filters also accept parameters according to which they will be applied. We pass the parameter value after the filter name and a colon, as in the following example:
There are also more extensive and more powerful filters, allowing for example to remove all HTML code from a given value, modify a given color so that the contrast is sufficient, or generate links to individual pages or sources.
Liquid offers a very large database of filters and it would be difficult to remember them all, however the documentation and the summary list allow you to find the ones you need very easily and quickly.
Shopify Plus and Shopify Liquid
The Shopify Plus plan gives us many additional opportunities as store owners. It is no different in the case of Liquid, because then we have the option of using normally unavailable .liquid files, as well as some additional objects.
The main difference is the ability to edit the code of the order summary pages, i.e. from the so-called “Checkout”. In any other plan, we are very limited in making any changes to it. However, by switching to the Shopify Plus plan, we can ask to be able to create a “layout / checkout.liquid” file in our code, which allows us to view and edit this file according to our needs.
In addition, when we already have access to the “checkout.liquid” file, we also get the option to refer to a previously unavailable liquid object with the same name, ie “checkout”. It contains all possible information related to the order, ranging from information about the products ordered, through additional attributes, selected payment and delivery methods, to information about the customer who makes the purchase.
This gives us great opportunities to adjust the order summary to the needs of our customers and precise information on the course of the entire purchasing process.
Where you can learn about Liquid?
The issues presented in this article only touch the tip of the iceberg, which is Liquid technology. However, learning Liquid does not have to be difficult and painful – especially if we have already had contact with similar solutions. Using the appropriate sources will certainly facilitate this task.
An invaluable resource is, of course, the Shopify documentation itself for Liquid, which can be found here.
Documentation is clearly divided into thematic blocks connected with each other by links, which allows easy maneuvering between topics.
It is true that the documentation itself is quite a friendly source of information, but when we get to know the basics a bit better, it is worth knowing that Shopify also gave us an information shortcut in the form of Cheat Sheet.
The cheat sheet primarily gives us a brief overview of the basics, tags, filters and objects. Everything is presented in a clear and short form, divided thematically and according to the application, thanks to which we can easily filter the information that interests us. Thanks to its form, the cheat sheet also gives us an overview of all the possibilities of using Liquid.
Also, check out the Liquida articles on the official Shopify blog. Browsing this blog is also a great source of information about the most significant changes to Shopify.
The Shopify developer changelog is also a source of knowledge that allows us to stay up to date on technical matters, where brief information about the latest changes appears regularly.
Finally, it is worth mentioning that there is a vibrant Shopify community where we can find a whole lot of useful information. The forum available there allows us to seek expert advice from Shopify experts in case of any problems.
Authors:
