Whether you are new to Shopify, or you are already a Shopify store owner, you’ve probably encounter a code that looks something like this:
{% assign first_model = product.media | where: "media_type", "model" | first %}
{% if first_model %}
{{ 'product-media.js' | asset_url | script_tag }}
{% endif %}Code language: PHP (php)This is Shopify liquid, a template language created by Shopify that serves as a framework for all Shopify themes. If you’re unfamiliar with Shopify themes, they are the templates that controls the styles and the layout of your online stores. So, if you wish to customize your online store, it’s best to learn liquid programming.
In this article, we’ll take a look at Shopify liquid.
We’ll start by understanding the Shopify liquid programming, and then we’ll learn about its features such as:
- Objects in Liquid
- Tags in Liquid
- Filters in Liquid
So if you’re ready, let’s begin learning Shopify liquid!
Video Tutorial
Do you prefer video tutorials instead of reading? You may watch the video version of this article below:
What is Shopify Liquid?
Shopify liquid is a template language used for creating or modifying Shopify themes. If you’re familiar with Ruby, you probably have heard about this template language because it’s written in Ruby or it’s known to be written in Ruby, but in terms of syntax, it’s very different compared to other programming languages.
In addition, Shopify liquid is very limited. Like there’s a lot that you cannot do with liquid. For example, you cannot retrieve a data from a third party server. Just from Shopify.
What is it used for?
Shopify Liquid is mainly used as the “backend template language” of Shopify themes. Meaning, it is only used to control what is displayed in the Shopify storefront. Don’t get the wrong idea though because Liquid cannot do many things like connect to a third-party server, creating directives, etc.
In web development, there are two contents that you can render: static content and dynamic content.
Static content is a content of a page that stays the same and is usually hard-coded in HTML whereas dynamic content. It’s the content of a page that changes depending on specific parameter.
For example, we have the following product page.
It specifically rendered the product for cats because in the URL, we specified that we want to render this specific product.
The highlighted text above is called a handle. By changing this to a different handle of a product, the product page will render a different product.
In addition to that, Shopify uses its own architecture or template files to display this pages.
For example, the product page is using product.json. It’s a JSON template that uses sections to complete the page, taking a closer look at the section files you will see that there’s a liquid code mixed with HTML, CSS, and JavaScript.
{% comment %}theme-check-disable TemplateLength{% endcomment %}
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
{{ 'component-product-model.css' | asset_url | stylesheet_tag }}
<link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
<link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
<section class="page-width">
...Code language: HTML, XML (xml)Note that the code above is just an example of what code can a liquid file have.
So to put it simply Shopify Liquid is like the middle man between Shopify stores and the server of Shopify (where all the data about your Shopify store is stored).
When a Shopify store asks for a data through liquid, Shopify liquid will ask the server of Shopify if that data that is being requested is available.
If the server returns 200 OK, then the server will give the requested data back to liquid. Then liquid will hold that data and bring that to the Shopify store’s theme.
If the requested data is not available, then the server of Shopify will just return a 404 error response. Meaning, Shopify liquid won’t have anything to bring.
Shopify Liquid Features
Shopify liquid is categorized by three features: objects, tags, and filter.
Objects
Also known as variables are wrapped in double curly braces {{ }}. And it’s used to output pieces of data from a Shopify store. For example, this is a shop object:
{{ shop }}Inside of the shop object, there are properties or attributes that you can use by using dot notation ( . ).
Let’s say we use the name attribute. It should be something like this:
{{ shop.name }}So you’re going to type it like above. The above attribute should render the name of your Shopify store.
There are plenty of attributes that you can use from most of the objects in Shopify. So if you wish to learn more about these objects and attributes, I suggest going to the Shopify developers’s documentation page and get to know these attributes or objects. Now let’s proceed to tags.
Tags
Tags in Shopify liquid are the programming logic that tells templates what to do. This tags are wrapped in curly braces, followed by percentage symbols {% ... %}.
And it’s usually followed by a closing tag or an end tag {% end... %}.
Tags are divided into four categories: control flow, iteration, theme, and variable tags.
Control flow tags are the tags that you can use to create conditions. These control flow tags are the:
- if
- unless
- else/elsif
- case/when
And lastly, the operators and/or.
To create a tag, you need to start it with a tag itself. Say, for example, the, if tag:
{% if condition %}
...Then you need to close it with a closing tag.
{% if condition %}
...
{% endif %}
Code language: PHP (php)However, not all tags are required to have a closing tag. A good example of this is else or elsif. These tags can only be used between if and, endif.
For example:
{% if condition %}
...
{% elsif condition %}
...
{% else %}
...
{% endif %}
Code language: PHP (php)Now, if you want to create multiple conditions for a control flow tag, you can use the operators and, or, or.
For example, we have the following condition:
{% if condition_A and condition_B %}
...
If you’re using and, the two conditions (condition_A and condition_B) must be true in order to execute the block of codes inside of the if.
If you’re using or, either of the two conditions can be true, it will still execute the code inside of the if tag.
{% if condition_A or condition_B %}
...
Now, all of this are part of the fundamentals of programming. And so if you’re a familiar with it, I suggest go and learn that because that’s quite a huge topic for this article.
There are plenty of good resources out there that will teach you everything about programming like the Introduction to Programming and Computer Science by freeCodeCamp.
Next is the iteration tags.
Iteration tags are the tags that you can use to repeat blocks of code. This is where you can use the for tag to loop through an array of values. For example, we have the following for tag:
{% for product in collection %}
{{ product.title }}
{% endfor %}Code language: PHP (php)In the example above we have a condition that for each product in the collection, we are going to render the name of the product.
So for example, in that collection, we have three products: Product #1, Product #2, and Product #3. The entire code above will basically output three, heading title ones (<h1>) with a text: Product #1, Product #2, and Product #3.
You can also combine for tag with an {% else %} tag. This is very useful too, especially if you want to know whether the {% for %} tag executed the codes inside of it or not.
Next up are the theme tags.
Theme tags are the tags that you can use:
- to generate template specific HTML codes;
- to divide arrays into multiple pages, and;
- to tell Shopify themes to render or use a specific layout or snippets.
So this is where you’ll find the form tag, the section tag, the pagination tag, and the layout tag.
Lastly, is the variable tags, variable tags are the tags that you can use to create liquid variables. If you’re familiar with JavaScript or other programming languages, you can create variables (most of the time) using var keyword or a data type. In Shopify liquid, you can use either the {% assign %} tag or {% capture %} tag to create variables.
So how can you create a variable?
{% assign variable_name = shop.name %}In the example above, we use the assign tag to create a variable. You can create the assigned tag, followed by the name of the variable. Then followed by an equal sign to create or assign a value. In the example above, we used the name of the Shopify store.
Now, if you use this variable, like how you use an object, this will output the name of the Shopify store.
Now let’s continue to the last feature of Shopify liquid. And that is the filters.
Filters
Filters are kind of hard to explain, but to put it simply, they are methods that modifies the value or the output of an object.
They are placed within an object tag and it’s denoted by a pipe symbol.
Now let’s take a look at this example above. Here we have a product.title object. Now we can use a filter by adding a pipe symbol and then specify what filter that you want to use. Let’s say we use the upcase filter.
{{ product.title | upcase }}This will then change the output of the object and make the string output all uppercase. That’s basically how filters work. They change or modify the output of an object.
Now, there are plenty of filters that you can use for every situations. There are filters for strings, for numbers, for arrays, for URLs, for colors, et cetera, but they all do the same thing. They modify the value or the outputs of an object.
Closing lines
So that is Shopify Liquid, a template language used for rendering pieces of data from a Shopify store. Now, if you have any question, let me know in the comments below, otherwise, feel free to subscribe to our YouTube channel and like the attached video. We have plenty of good videos in our channel so feel free to check them out! If you have request, let us know!
