Do you want to make some specific tweaks to your Shopify theme? If so – then you’ll need to get familiar with Liquid, Shopify’s programming language.
But what if you don’t have any coding experience at all?
Not to worry – Liquid is a beginner-friendly programming language. It bears a lot in common with HTML/CSS and JavaScript, and it’s written in Ruby. If you’re even a little bit familiar with those languages, you’ll pick up Liquid in no time.
Even if you’ve never touched a line of code, there are some simple tweaks you can learn how to do to edit your theme. That way – you’ll finally be able to customize your Shopify theme the way you want it.
If you want to learn more about using Liquid, you’re in the right place. Here’s a simple guide to Liquid to get you started understanding how to use it.
Starting With the Basics
First, you’ll need to understand the three core building blocks of dynamic content with Liquid. They are tags, filters, and objects. You use these features within Liquid template files – which make up a Shopify theme.
When you learn how to work with Liquid, you can edit your Shopify theme through these files. After a while, you can even attempt to build your theme from scratch.
Some consider Liquid as more syntax than an actual language. That’s because it has many more limitations than most general-purpose programming languages. Yet – these limitations are also why it’s more beginner-friendly.
Static and Dynamic Content
The whole purpose of a template language like Liquid is to combine static and dynamic content. What’s that? Here’s a breakdown.
Static content stays the same from page to page. You can deliver static content directly to a web browser. In other words, no web application is necessary to display static content. It’s also exclusively written in HTML.
Examples of static content include documents, fonts, images, and videos.
Dynamic content, on the other hand, DOES change from page to page. For this reason, you can’t display dynamic content directly to your browser. You’ll need a web application to generate it.
Dynamic content is web content that will change based on behavior and preferences. An example of dynamic content would be displaying similar products to customers at checkout. It’s dynamic because the products that will show up change based on what the customer is buying.
If you use any popular streaming service – you’ve seen dynamic content in action. Your homepage will change based on what you’ve viewed in the past.
Dynamic content is valuable for e-commerce stores for many reasons. You can recommend similar products, upsell them, and so much more. To use dynamic content on your Shopify theme – you’ll need to use Liquid.
Let’s start with a breakdown of the building blocks of dynamic content – tags, filters, and objects.
Understanding Tags
We’ll begin with tags – which make up the logic that tells the templates what to do. You can recognize a tag because they’re wrapped in {% characters. There are a few different types of tags that we’ll go over. They are:
- Control flow tags
- Deprecated tags
- Iteration tags
- Theme tags
- Variable tags
Each tag has a specific purpose for your programming logic. Let’s take a closer look at each one.
Control Flow Tags
A control flow tag creates conditions that determine when to execute blocks of code. In other words, a control flow tag lets you dictate when certain things happen. To visualize this, let’s look at an example of the control flow tag ‘if.’
You use an ‘if’ tag to execute a block of code if the condition is met or true. An example of this will be if you want to display a custom message for a particular product. Let’s say you sell men’s shirts on your Shopify store. You want to congratulate customers for buying your shirts. To do so, you add an ‘if’ tag like this:
{% if product.title == 'Floral Shirt' %}
Congrats on buying a new floral shirt!
{% endif %}As you can see, the tag is telling your store, “If they do buy a floral shirt, execute this line of code to display the message.”
The only difference is that you use Liquid instead of communicating in plain English. Make sense?
Remember, an ‘if’ control flow tag is only if the condition gets met or is true. If you want to set a message to display if customers DON’T buy the shirt – you need an ‘unless’ tag. That will let your theme know to display this message if the condition is not met or is false. Here’s an example of an ‘unless’ tag for the same product:
{% unless product.title == 'Floral Shirt' %}
You don't know what you're missing!
{% endunless %}Deprecated Tags
Some tags end up going by the wayside – and Shopify replaces them. If you’re still using the old tags, they’re considered deprecated. They may still work, but it’s a good idea to use the updated tags to avoid issues. Here’s a list of some common tags that have updated replacements:
- The currency form has been updated by the localization form.
- Shopify replaced the include tag with the render tag.
It’s essential to stay up to date with the latest tags, so you don’t use old-fashioned ones. That will keep your Shopify theme running smoothly. If you’re experiencing issues with your theme – deprecated tags may be the culprit. Do a little research and find out if Shopify has updated specific tags that you’re using.
Iteration Tags
An iteration tag will repeatedly run blocks of code for your theme. The ‘for’ tag will create a loop with a maximum of 50 results per page. If you have more than 50 results – you’ll need to use the ‘paginate’ to split them across a few pages.
Here’s an example of a ‘for’ iteration tag:
{% for product in collection.products %}
{{ product.title}}
{% endfor %}That will loop the product titles for a specific collection. That’s a handy way to speed up adding new product collections to your store.
An ‘else’ iteration tag specifies a fallback for a ‘for’ loop if it has zero length. An example will be if you try to loop over an empty collection. It’s a stipulation that you can use to display a message letting customers know that your collection is empty.
Here’s an example:
{% for product in collection.products %}
{{ product.title }}
{% else %}
This collection is currently empty
{% endfor %} As you can see – you’re letting your store know to display a specific message once a condition is met. That will help you let your customers know whenever a collection is out of stock. That way – your customers don’t wind up trying to order items that you don’t have.
Next, there’s the ‘break’ iteration tag. You can use it to stop a loop from continuing to iterate. That’s convenient if you want to list out a collection but only to a certain point. The ‘break’ tag gives you the freedom to decide how much of a loop you want to show. That way – you aren’t stuck showing 50 results per page.
If you want only to display 10 or 20 results – use the ‘break’ tag to let Shopify know. Let’s take a look at a ‘break’ tag in action:
{% for i in (1..50) %}
{% if i == 20 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
If that seems a tad confusing – let’s break it down, so it makes sense. You use a ‘for’ tag to start an iteration loop in the first line. The (1..50) refers to the number of results a loop will display (remember the max is 50.)
You’re letting Shopify know where you want the iteration to stop on the next line. You use an ‘if’ tag and the variable ‘i’ to communicate this ( {% if i == 20 %}).
On the following line, you enter the ‘break’ tag. It’s crucial to include this, or the break in the iteration won’t happen.
The following line is an ‘else’ tag – which is necessary because it initiates the fallback case. What’s that? It’s what interrupts the iteration so you can display something else. In this case, you’re showing a break for the variable ‘i’.
The final two lines are ending the open tags (‘if’ and ‘for’)
Hopefully, that breaks things down for you. While it may seem complicated at first, it becomes more manageable once you realize what’s going on. The liquid language is simply a way of communicating with your Shopify theme. Each line of code has a translation in English, just like a foreign language. There are more iteration tags out there – but those are the two most basic.
Theme Tags
Next, we’ll look at theme tags. These are the most versatile of all the Liquid tags. They have a few purposes, including:
- Letting the theme know which layout and snippets to use
- Splitting returned arrays into more than one page
- Outputting HTML markup specific to the template
Do you want to leave special comments for your customers in your store? You can do so with the ‘comment’ theme tag. That allows you to leave un-rendered code in your template. You have to write your comment first and add the ‘comment’ tag. Bear in mind; it won’t show up if you include anything within the tags. That’s because Liquid views the tag as nil – and ignores any code held inside.
Here’s an example of how to properly use a comment tag:
- I love my store {% comment %}, {% endcomment %}
On your store, all that will show up is, “I love my store.” So if you need to add comments throughout your theme, you can use this tag to do so.
The ‘echo’ theme tag lets you output an expression from the HTML. It’s the same as wrapping your expression in {{ and }}. It works inside Liquid, and it fully supports filters.
There are more theme tags than this with the other types, but those are the basics. Let’s move on to the final form of tags you’ll use with Liquid.
Variable Tags
A variable tag is very much self-explanatory. You use it to create a new variable within Liquid. It’s probably the most straightforward tag to understand out of all the Liquid tags.
The ‘assign’ variable tag will create a new named variable that you can use anywhere in your code. Here’s a simple example of a variable tag in action:
{% assign favorite_color = 'red' %}If you then code the phrase ‘My favorite color is {{ favorite_color }}. Here’s what will show up in your store, “My favorite color is red.”
As you can see – you assigned a named variable for ‘favorite_color.’ Now, whenever you reference that variable in the code, ‘red’ will show up in its place.
The ‘capture’ tag lets you create strings of variables. In other words, you can use this tag to create strings that have multiple variables. Let’s look at an example of this to see it in action:
{% assign favorite_color = 'red' %}
{% assign age = 32 %}
{% capture about_myself %}
I am {{ age }} and my favorite color is {{ favorite_color }}
{% endcapture %}
{{ about_myself }}When you add this code, here’s what will display in your store, “I am 32, and my favorite color is red.”
That’s a lot of code, so let’s break down what happened there. First, you used two ‘assign’ tags to name two variables. You name your favorite color as well as your age.
To use these two variables in one sentence, you use the ‘capture’ tag. First, you need to name the capture, which is ‘about_myself.’ Next, you type the sentence you want to display. Finally, you run the {{ about_myself }} capture to display it on your store. Make sense?
That’s a basic rundown of how to use tags inside Liquid. As you can see – there’s a lot to know, but it’s all straightforward once you understand it.
Understanding Objects in Liquid
Let’s move on to objects, another building block of dynamic content. Objects contain attributes for outputting dynamic content on your page. A simple example is the ‘product’ object. It has a feature called ‘.title’ to output the product title.
While a tag’s wrapped in {% %}, objects are wrapped in {{ }}.
Going with the product.title example above, here’s an object in Liquid:
{{ product.title }} <! -- Output: "Awesome Shirt" -->You will see Awesome Shirt under the product title on your Shopify store.
You can access global objects from any file in your theme. They also go by the name global variables. It’s essential to know these to speed up the coding process. Here’s a brief look at a few global objects in Liquid.
One of the most important global objects is the all_products object. As the name implies, it contains a complete list of all the products in your store. You can use it to access your products by their handles. Here’s an example of what that looks like:
{{ all_products ['amazing-sneakers'].title }} That’s a simplified way of displaying product titles in your theme, no matter where you are. It’s for this reason why global objects are so helpful in Liquid.
Another global object is ‘articles.’ You can use it to retrieve articles by using its handle. That’s a convenient way to pull up any news or blog article from your Shopify store. Since it’s a global object, you can use it on any page in your template. To do so, you’ll need to use an ‘assign’ variable tag too. Here’s an example of the ‘article’ object in action:
{% assign article = articles['blog/listicle'] %}
{{ article.title | link_to: article.url }}As you can see – the first line contains the ‘assign’ variable tag. You then assign the handle of the article to the object. You use the article object to link to the article in question on the following line.
Understanding Filters in Liquid
The final building block that we’ll examine is a filter. You use filters in Liquid to modify the output of numbers, strings, variables, and objects. In other words, a filter is nothing more than a modifier. Filters don’t have their capabilities, but they expand on the output of different blocks of code.
Filters are easy to use and use output tags {{ }} much like objects. The pipe character ‘|’ is also vital for a filter.
So what kind of filters can you add to Liquid? All sorts, such as uppercase, lowercase, removing objects, and so much more. To keep it simple here’s a basic example of a filter in Liquid:
<!-- product.title = "Awesome Shirt" -->
{{ product.title | upcase }} Once adding this filter, here’s what the output will look like, “AWESOME SHIRT.” As you can see – the filter specified that you wanted to display the product title in all caps. That’s how easy it is to use filters in your Liquid code.
Shopify Theme development with Coding Phase
If you are interested in a great course to learn liquid try out Shopify Theme Development by CodingPhase. Codingphase by Joe Santos teaches you all about the liquid programming language as you code alongside him to create a theme. I highly recommend this course as it’s easy to follow and has tons of useful information. We recommend subscribing to the diamond plan so you can have access to both the Shopify theme development courses and Shopify app development courses, while also getting access to a huge collection of programming courses you can take. You can also buy courses individually but you will end up spending more money than if you bought the diamond plan and got access to all of the Codingphase courses. If you want to get access to the Shopify theme development course and a huge collection of courses check out Codingphase at this link.
Closing Thoughts: A Simple Guide to Liquid
Okay, so we’ve gone over a ton so far – so let’s recap. Liquid is Shopify’s programming language that runs its themes. It’s written in Ruby – and it’s a beginner-friendly language. To create dynamic content, you use tags, filters, and objects.
Tags are what assign variables, create conditions, and more. Objects contain the attributes for displaying dynamic content. Finally, filters are modifiers that you use to edit the other two types. With a bit of time, you’ll be able to start coding in Liquid with ease. If you’d be interested in our guide on how to sell themes on Shopify visit this link here.
To get more Shopify developer tips see our developer posts here.
