What is Shopify Liquid? A Quick Rundown of The Basics

Over 4.4 million ecommerce websites are built using the Shopify platform. It’s the all-in-one eCommerce platform that's rocked the web since its start in 2006. Merchants choose this platform to host their online stores for many reasons, from easy payment setup to built-in marketing tools and much more besides. 

But one of the critical aspects of Shopify is its intuitive site builder with thousands of themes and Shopify app integrations to choose from. 

However, while the no-code builder lets you create stunning and unique websites, there are some limitations. For instance, when you start building your online store, you must choose a theme that defines the arrangement and level of control you get over your content. Even if you select an empty theme, i.e., one without content -there’s still an underlying code architecture that predefines how content is organized.

But there’s good news. If you want to create your own Shopify template for your site or someone else’s, there’s Shopify Liquid.

Interested? Join me as I endeavor to answer the question: What is Shopify Liquid? Let’s dive in!

What is Shopify Liquid?

Interestingly, Shopify Liquid has been around since Shopify’s inception. When Shopify’s creators first designed the platform, they constructed an open-source project to serve as the template language for all Shopify website templates. 

For the uninitiated, ‘open-source programming language’ refers to a software’s source code that’s freely available to the public, allowing anyone to use, modify, and distribute the code for any purpose. 

Created using Ruby, Shopify Liquid essentially serves as a placeholder so that you can insert data into a predefined format (more on this below).

So, how does this work?

To understand this, you first need to know that websites are typically static or dynamic. Static stores are hardcoded to show content precisely as it’s written, for instance, in HTML. In contrast, a dynamic website can display different content depending on how the user interacts with it. 

Now let’s say you have a static website; the basic skeleton of the site is preset, but you want to render dynamic content. This is where writing Shopify Liquid into your HTML code is handy. This lends itself as a placeholder for dynamic content. 

Shopify Liquid acts as an intermediary between your store and Shopify’s server, enabling Liquid to pull data from Shopify’s server and deliver it to your store. Liquid can request three main types of data:

1. Objects
2. Tags
3. Filters

Below, we’ll explore each data type in turn:

Liquid Objects

Objects are similar to a library of functions or content; within each object, there are various properties. 

If you aren’t familiar with the concept of objects, here’s a brief overview:

An object is a fundamental concept in programming. An object consists of two components: 

1. Properties that define the state of the object
2. Functions that define the behavior of the object

To better illustrate how this works, we’ll use a non-coding-related example. For instance, a car. Here, the car, i.e., the object, could have functions such as “accelerate,” “turn,” and “brake.” In contrast, the properties could be the car’s “windows,” “doors,” etc. 

Simply put, objects are an important concept in coding because they help organize complex systems into more manageable chunks.

For instance, let’s say you’re creating a custom Shopify theme and want to display a blog title in your template. You can use Liquid to bring that information from Shopify’s server and display it somewhere on the page. In this example, this is the piece of Liquid code you would use to achieve this:

{{Blog.title}} 

Let’s break this down:

• Here, ‘blog’ is the object. 
• The property we want within this library is marked by ‘title.’ 
• The ‘.’ tells Liquid how these two bits of data are related. 
• The double brackets are Liquid syntax that defines the {{content/output you want}} you want from the Shopify server. 

Liquid Tags

When using Shopify Liquid, tags add logic to the content we request from the Shopify server to help define when content should be visible on the page. For instance, let’s say we want to display a particular graphic on our festive blog posts. I.e., we want this graphic to only appear when a specific condition is met. 

Here’s what this might look like:

{% if blog.title == ‘celebration’ %}

**image HTML**

{% end if %}

This might seem complex, but if we break it down, it’s pretty simple to understand:

• Tags use a slightly different syntax than objects which look like this  {%…%}.
• The first tag {% if blog.title == ‘celebration’ %} tells Liquid what condition has to be met before requesting content from the server.
• The condition we asked for is defined by an ‘if’ statement. If you’re familiar with coding, you will know that ‘if' statements work by comparing two or more pieces of data to each other. If they match, it will move on to the next line in our code. Here,  if blog.title == ‘celebration,’ we’re asking Liquid to check if our blog title contains the word ‘celebration.’ If it does, it will go down to the next line of our code. If it doesn’t, Liquid won’t return any content.
• In this example, if we have a blog title that contains the word ‘celebration,’ Liquid will pull and display our image HTML.
• Once it does this, it goes to the following line {% end if %}, which terminates our program.

This is just one example of what you can do with tags. Shopify Liquid has tags to:

• Control when code is executed
• Iterate/iteration (repeat) a block of code
• Display certain HTML markups
• Create new variables.

Liquid Filters

Filters are pieces of code that change or modify the output of an object. For instance, they can change website elements' color, font, size, or look. 

But, as well as changing the object's visible aspects, they can perform functions on an object. For instance, if you want to show your blog titles in upcase, a filter could help you achieve this without manually changing all your blog titles:

{{ blog.title | uppercase }}

• The syntax for filters is {{…}}.
• Here, the object property we are looking for is ‘blog.title’.
• The filter we are applying is uppercase.
• The ‘|’ separates the input and output of our code.

Now, when a user looks at our blog title, it will appear in uppercase.

Benefits of Shopify Liquid

Suppose you’re a site designer or developer. In that case, one of the most significant benefits of Shopify Liquid is that you don’t need the store data (i.e., information about the store) to create or modify a website. This is because when a user first makes a Shopify store, all the information is stored on the Shopify server, meaning you can use Liquid to simply retrieve the data you need. 

However, if you’re not a web developer, instead you’re just a store owner looking to spruce up your store, there are benefits for you as well:

• Easy to learn and use: Liquid has a simple syntax and is easy to understand, making it accessible for developers and non-developers.
• Dynamic content: Liquid allows for dynamic content creation
• Customizable: With Liquid, you can create custom templates and themes, giving you complete control over the look and feel of your eCommerce store.
• Improved performance: Liquid templates are compiled and cached, improving website performance and speed compared to other template engines.
• Large community: Shopify has a large user community, providing access to a wealth of knowledge and support, making finding solutions to common Liquid-related problems easier.

Requirements

So what do you need to start using Shopify Liquid?

If you already have a Shopify store, Shopify Liquid will be available for you to use for free. We’ll discuss how you can find Liquid below. But all you need to know for now is that every site created on Shopify is built with Liquid, so you can start manually editing this code as soon as you’ve made a site.

However, if you don’t have a Shopify store, you’ll need to make one to start playing around with Liquid. 

1. First, head over to Shopify and select a plan. Fill in your details and create your account.
2. From your Shopify admin, click on themes. Shopify automatically provides a default theme. You can leave this as-is or choose another theme to start from.
3. Shopify has a checklist you can go through to complete your store. You’ll want to do all the basics, such as adding product pages, designing your storefront, etc.

Now that you have the basic skeleton of your online store, you can pull this data from the Shopify server and customize it using Liquid (more on this below). 

While you don’t need any coding experience to start using Liquid, familiarity with basic coding principles will make your journey easier. But for the most part, you can find extensive self-help documentation and tutorials on the Shopify developers portal. Here you’ll find an entire section dedicated to Liquid Basics. 

It’s advisable that you spend some time looking through these guides before you start. While Liquid is a powerful customization tool, it also has the potential to break your site if you don’t know what you’re doing!

Getting Started With Shopify Liquid

So, using what we’ve learned so far, let’s see how we can go about editing our Shopify theme using Liquid. 

To access Liquid, follow these steps:

1. Duplicate your theme: To prevent any major mishaps, it’s wise to make a copy of your theme before starting. That way, if you make any mistakes, your original Shopify theme remains intact. To do this, navigate to the themes section on the right-hand side of your Shopify dashboard. Choose the theme you want to edit and click actions to see the drop-down menu. Now, select duplicate.
2. Rename your duplicate: When you duplicate a theme, you’ll see it appear in your list of themes. You can rename your copy so you don’t confuse the original and the duplicate. Just click the actions button again and hit rename on the drop-down menu. 
3. Entering the code editor: Now, select actions on your duplicate again and select edit code. You’ll be directed to the complete list of codes within your theme. Take a look at the folders listed on your right. You should see a bunch of folders containing different aspects of your theme, such as the layout, templates, sections, etc. Open the templates folder. 
4. Coding in Liquid: Inside the templates folder, you’ll see a list of files with the file type .liquid. You can also create a new Liquid file template by selecting the plus button on the template folder. It will ask you what template you want to make, i.e., page, section, blog, etc., and to name the file. To edit a file, double-click a template file, and it will open in the code editor on the right.

Inside any Liquid file, you’ll see an HTML script. This is the skeleton of your website. You can use the Liquid language inside this HTML to retrieve information from the Shopify server. As long as you use the correct Liquid syntax, i.e., the brackets, it should render your content accordingly.

To illustrate, let's run through an easy example:

Resizing Images Using Shopify Liquid

Images are an essential aspect of most Shopify stores. But if you’re using multiple images, it can be a nightmare to size them all correctly, so they appear neatly. To fix this, we’re looking at the img_url filter. Like other filters, img_url is designed to modify the content it takes from the Shopify server. You can use this filter to change your images' sizing, scale, format, and cropping. 

This is an excellent technique because the filter only temporarily modifies an existing image; it doesn’t create a new image every time to render your template, so it won’t slow your site's load time. 

So, how do we resize an image?

First, we need to decide where we want to apply the changes. You can apply the img_url filter to any object with an image property, including:

• Products
• Product variants
• Line items
• Collections
• Articles

Once you decide which images you want to edit, you need to know which property you wish to target. To find out what properties have an image attribute, look at Shopify’s list of objects and their properties. 

In this example, we’ll be targeting our blog article images.

Here’s the basic code:

{{ blog.articles.image | img_url: ‘100×100' }}

Breakdown:

• Blog is the object we’re looking for, and we want the property articles, as this contains all the articles in our blog. Specifically, we want to change the images in our blog articles, so we’re targeting the image property within articles.
• Now we apply the filter img_url. If we left this as-is, it would simply display an image pulled from the URL provided by the Shopify server. However, we’re also going to give an extra parameter: the image size ‘100×100’ (note that Shopify uses pixels to determine size ranges).
• Finally, we wrap our code using the Liquid double-bracket syntax, which is used for filters. 

And we’re done! This should return output for all our blog images, making them 100 by 100 pixels in size.

Tips and Takeaways

I hope that having read this article, you now have an answer to the question: What is Shopify Liquid?

As you can see, Shopify Liquid is a versatile tool that can serve various functions when designing or editing a Shopify template. While there’s a bit of a learning curve, once you get used to it, it’s reasonably easy to use – especially compared to other more complex coding languages like Javascript.

If you’re interested in using Shopify Liquid, we would advise you to follow these takeaways to get the most out of it:

1. Start with a solid understanding of Liquid: A strong understanding of Liquid will allow you to build more complex custom themes. With this foundation, new users can leverage the full potential of Shopify to create unique and engaging online stores.
2. Test your theme thoroughly: Testing is essential to ensure your custom theme works as expected across different browsers and devices. By catching compatibility issues early, you avoid potential frustration for your customers.
3. Use available tools and resources: Shopify has a wealth of resources available to help theme developers, so use them! When utilized, this can make the development process faster and easier.

With all these points covered, I think it’s safe to say that Shopify Liquid can be a fun and effective way to update or create a more engaging and dynamic Shopify store. 

That’s all from me; over to you. Let me know about your experiences with Shopify Liquid in the comments below!