Shopify Liquid For Beginners: Tips To Get You Started Coding NOW!

But what exactly is Shopify Liquid?

Search no more, because in this article, we will provide you with everything you need to know about Liquid in the simplest way possible – perfect for beginners like you.

We also got a bonus tip for you by the end of this article so you can start coding RIGHT NOW!

Outline

• Introduction to Shopify Liquid
• Resources For Further Learning
• Start Coding Now Using ChatGPT
• Use ChatGPT To Interpret Liquid Codes
• Bottom Line

Introduction to Shopify Liquid

Shopify Liquid is an open source template language originally created by Tobias Lutke (Shopify co-founder). It is the templating language where all Shopify themes are written in.

Some people refer to Liquid as a template language while some call it a template engine. While both are true in some respects, it is more accurate to call it as a template language because Liquid codes are mainly placeholders for commands that pull out data and replaces them with a design element when rendered into the browser.

No matter how complex their capabilities are, not all Shopify themes are the same.

What if you liked the look and feel of a particular theme in Shopify but it lacks one feature that you really like? Normally, you would look at other alternative themes that have that feature.

But if you know how to use the templating language, you can go to the theme’s liquid file and edit the code to add that feature.

That’s what Shopify Liquid does. In a way, it delimits your chosen theme by giving you the power to make edits in its core to achieve that look and feel that you want.

Liquid Code Acts As A Bridge Between Templates And Data

To better understand this concept, first, you must understand that Shopify is a dynamic website.

The dynamic elements (written in Liquid code) of Shopify stores include product displays, collection pages, checkout pages, etc. which can be changed depending on a customer’s location, product choice, and other actions performed in the website.

At the same time, a Shopify store has static elements (written in HTML, CSS, and JavaScript) such as menus, headers, and footers – these things load exactly in the same way wherever you go on the website.

Here’s how it works:

Source

• A Shopify user types in the url of your store in their browser
• Shopify works out which store is being requested and what particular page the query wants to go
• It then identifies which Shopify theme is actively used in your store and it will be loaded your browser
• If there are liquid placeholders (for example, product collections) in your page, Shopify will work that out and these placeholders will be replaced with real-time data in your store
• After the liquid code is identify and worked out, it will be replaced into HTML to load into your browser interface
• After all these processes, your browser now knows what to display and visually represents that data on your customer’s screen as an interactive display

How To Access Liquid File In The Shopify Store?

Liquid files are extremely easy to find in your Shopify dashboard.

Step 1: Open your Shopify dashboard. On the left panel, locate and click the Online Store.

Step 2: Under the Online Store menu item, click Themes. It will then display the current theme you are using in your Shopify store. Click on the three-dot icon and click Duplicate.

Duplicating your current theme is not necessary if you only want to access and examine your liquid theme files. But if you want to make some alterations or try inputting liquid code yourself, duplicating your Shopify store is the safest way in order to not affect your live store when coding errors are committed.

Step 3: A few seconds after clicking duplicate, a copy of your current theme will be created underneath. Scroll down to the Theme Library section, click the three-dot icon, and select Edit Code. You will then be redirected to a different page that contains your theme files as well as other codes in your website.

Step 4: On the left panel of your Shopify code editor, you will see your liquid files. These are fairly easy to find and identify because they use a  “.liquid” extension.

Liquid Syntax and Delimiters

In programming, delimiters are characters that mark the beginning and end of a character string. Liquid uses two (2) types of delimiters that makes it very easy to identify liquid code within a single template file.

Syntax

Syntax in programming is a set of rules that governs the arrangement of every character to create a code that is readable and executable by the computer.

Shopify Liquid comprises more than 100 objects, filters, and tags combined. It is important to know the meaning of these but learning how to write Liquid codes does not end there. You must also know how to arrange these words along with other characters such as curly braces, percentage, dots, hyphens, etc.

In some programming languages, capitalization and spaces matter, to others, they don’t.

Remember that computers work by interpreting characters as a combination of 0 and 1 – also called the binary system. And all characters and letters you input in your code editor will be interpreted as 0 and 1; and based on the computer’s interpretation, an action will be performed.

Thus, although a block of code looks visually correct, a simple misplaced dot or capitalized letter will affect the output.

Think of syntax as the English language. Knowing the meanings of words is not enough. You must also learn how to use them in the proper context in order to say what you really mean to say. Such is also true in programming.

Delimiters

Double curly braces - {{ … }}

• Used to define Objects and Filters
• These delimiters are used to place dynamic content from the database.
• The double curly braces in the liquid code denote Output

Curly brace and percentage - {% … %}

• Used to define Tags
• These delimiters are placeholders for logical actions in your Shopify store.
• These curly-percentage sign denotes Logic and is responsible for functions like:

Now, let’s go back to the Shopify store example above and figure out which codes denote output and logic.

In this block of code, you will see the delimiters in action. Thus, when analyzing liquid, you’ll know when a certain code pulls out an output or implements logic based on the delimiter it uses.

Let us interpret this block of code

{{ page_title }}

This means that code pulls out and displays the title of the product, collection, or page that is currently viewed.

There is some logic as well in the code because there are {% … %} delimiters.

{%- unless page_title contains shop.name %} – {{ shop,name }}{% endunless -%}

You’ll notice that it is using {%- … -%} instead of {% … %}. The dashes beside the percentage signs are called hyphen-trim operators which remove unwanted whitespace surrounding the “unless” statement on the rendered output.

unless is a control flow tag that pulls out data only if a certain condition is not met. It is the opposite of if control flow tag which pulls out data if the condition is met.

page_title is an object which refers to the page title.

The operator in action is contains, which checks for the presence of a substring inside a string or array.

shop.name is another object which pulls out the name of the shop.

The &ndash is an HTML code that represents a hyphen ( – ) and it will be displayed as a horizontal line on the actual webpage.

Simply put, if the page title does not contain the shop name, the webpage will display the name of the shop. On the other hand, if the page title contains the shop name, nothing will be displayed.

Let’s Talk About Objects, Filters, and Tags

Now that we have tackled delimiters and syntax, we now move on to the three main parts of Shopify Liquid.

To give you a better understanding on how the Liquid code works, it is important to know what Objects, Filters, and Tags do when inputting a piece of code.

But what exactly are these? Let’s talk about them one by one.

Note: The screenshots below were take from the Liquid Cheat Sheet. Click the link for a detailed definition of each individual objects, filters, and tags.

Liquid Objects

Liquid objects (also referred to as liquid variables) represent variables in building your theme. Whatever you want to do with your code, you will be interacting with liquid objects. Thus, it is crucial that you know what this represents.

Think of Liquid as a library. The objects are the bookshelves, and the books are the properties. If, say you need to locate your page.title, you first need to find the bookshelf labeled as page, and pull out the book entitled title.

Simply put, objects are used to access data in our Shopify themes and whatever data you want to pull out will be the output.

Liquid Filters

Filters decide what actions are done with the outputs (objects) you pull from your data. These are methods used to modify the output of numbers, strings, variables, and objects. Filters in a liquid code are very easy to spot as they are preceded with a pipe string ( | ) such as {{ … | join: ", " }} and {{ … | first }}

In the library example above, say you pulled out page.title, by adding a filter, you will be able to determine what to do with it. Will you open the book at a certain page, flip it upside down, throw it in the air, etc.

Liquid Tags

Liquid tags, wrapped in {% … %} are used to implement logic in your liquid template. Tags are the non-visible part of the liquid code as they work in conditional terms.

Going back to this chunk of code we extracted from our Shopify store example:

{%- unless page_title contains shop.name %} – {{ shop,name }}{% endunless -%}

We now know that this line of code uses an unless tag which is executed only if a condition is not met. Let’s say the page title is Yankee Caps and the shop name is Caps 4 Less…

The condition for this line of code will be interpreted as: “if the page title (Yankee Caps) does not contain the shop name (Caps 4 Less), display – Caps 4 Less ”.

But if the code is written using an if tag such as:

{%- if page_title contains shop.name %} – {{ shop,name }}{% endif -%}

Since the logic tag has changed, the interpretation also changes. This code now means: “if the page title (Yankee Caps) does contain the shop name (Caps 4 Less), display – Caps 4 Less ”.

Resources For Further Learning

There you go. You now have scratched the surface of Shopify Liquid by knowing what it is used for, its functions, and how its three (3) main parts work together to produce a desired design element. We have also interpreted a sample block of code to know how the delimiters work and what they denote in the template language.

The question is, where do we go from here? Well, here are some factual resources that you can use when you want to go deeper with Shopify Liquid.

Let’s start with this Shopify Crash Course courtesy of David Martin - UXHACKS.

This crash course is a semi-advanced Liquid course as it tackles the basics of filters, operators, and tags. It also discusses the Liquid syntax – which is very crucial in writing a working code.

More importantly, David Martin will walk you through the process of creating a Liquid template. So be sure to follow along.

If it is too overwhelming for you, take a break and only try to absorb what you can.

No need to take notes of hundreds of codes used in Liquid. Here are further reading materials to help you build competency in liquid code:

• Liquid Cheat Sheet

• Complete list of all the basic codes, filters, tags, and objects used in Liquid coding. Keep this handy because it will help you find the codes you need in your learning process.

• Shopify.dev

• More detailed documentation of everything about Liquid written by Shopify developers. This white paper contains terms and definitions as well as the use cases of each codes.

• Learning Liquid

• Library of Liquid-related blogs to supplement your learning process. These blogs will help you dive deeper into the Liquid code and to better internalize it.

• Liquid Code Examples

• Examples of codes written in proper syntax that you can copy and paste in your Liquid files if you need a quick solution to your templating needs. These examples contain codes for collections, blogs, navigations, and more.

Start Coding Now Using ChatGPT

ChatGPT (or Chat Generative Pre-Trained Transformer) is an artificial intelligence (AI) tool developed by OpenAI. It lets users enter prompts (questions, commands, and other types of queries) and in turn, it generates responses according to the data it learned. What makes it unique is that unlike chatbots in the past, ChatGPT is able to create human-like conversational dialogue.

When used properly, ChatGPT is a powerful tool that can generate emails, blogs, articles, scripts or any form of written material – and YES, including Liquid Code!

In this video, Coding with Robby tries to use ChatGPT to generate liquid code to paste it into their liquid file and see if it actually knows how to write code:

The video experiment aims to create Shopify sections using codes written by ChatGPT. The first section added was an announcement bar and the AI was able to write a code that will display the design.

The experiment was asking the AI to generate a section for the products. While ChatGPT was able to generate a code that displayed a product section, code needed a little more tweaking by the user to achieve the desired result.

The Takeaway

ChatGPT did a good job in generating liquid code. However, it still needed some additional prompts and manual tweaking to produce a desirable visual result.

While the AI is indeed knowledgeable about liquid codes, it has its limitations. Some of these are:

• ChatGPT produces general liquid codes that need tweaking in order to make it usable to your Shopify store.
• Since the AI does not know the correlation of existing codes in your website, the code it generates may or may not be applicable to your use case.
• The useability of codes it generates depends on the accuracy of the prompts you enter.
• Unfortunately, you cannot use ChatGPT to generate a fully functional Shopify store if you have very little knowledge of programming. Therefore, to make it useful, you must also learn how codes work so you can input the proper prompts.
• ChatGPT cannot do the job of a web developer but it makes a great assistant to complete small tasks such as writing codes for smaller sections.

Use ChatGPT To Interpret Liquid Codes

If ChatGPT has these limitations, you might wonder, how can you use the AI to help you in liquid codes?

You can use it as an assistant in your learning process. In fact, ChatGPT does a great job at interpreting blocks of code and explaining them at a rudimentary level.

We tried this ourselves and the responses were pretty satisfying – and for someone with zero knowledge about Shopify Liquid, ChatGPT is a great way to simplify the wealth of information that you find over the internet.

Asking ChatGPT To Interpret Codes

First, go to  OpenAI and login using your email address. After that, you will be redirected to the chat interface where you can start inputting your prompts.

Let’s go back to the Shopify store example we used earlier in this blog. This time, we will use a different chunk of code.

Say you want to make sense of this block of code:

We now input this prompt: (trying to be very specific as to what type of information we are looking for)

Interpret this liquid code and explain this to me in very simple terms. Identify all objects, tags, and filters used throughout and explain them individually

{%- if settings.favicon != blank -%}

      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">

    {%- endif -%}

Here is the response ChatGPT returns:

As you can see, ChatGPT is extremely good at following prompts. It interpreted the code line by line and gave an explanation on how the code (and its smaller elements) work and what the result is on the web page.

Let’s try another chunk of code with a different prompt:

The prompt: (now, we will try to not be too specific with our prompt)

Explain what this code does:

 {%- unless settings.type_header_font.system? -%}

      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

    {%- endunless -%}

And here is the response:

As you can see, we did not specify that we were using liquid code and ChatGPT was still able to identify that it is a templating language. It is also able to explain the code line by line and provide meaningful insights. This only shows that the AI tool is smart enough to look beyond prompts.

Let’s now try to be more specific with our prompt using the one we used in our very first prompt:

Interpret this liquid code and explain this to me in very simple terms. Identify all objects, tags, and filters used throughout and explain them individually

 {%- unless settings.type_header_font.system? -%}

      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

    {%- endunless -%}

ChatGPT Response:

With a more specific prompt, ChatGPT was able to provide a more certain answer and more accurate interpretations.

The Takeaway

From this exercise, we learned a lot of things:

• ChatGPT has a deep understanding of Shopify Liquid
• The accuracy of the answers you get are dependent on how specific you are with your prompts
• To be able to get accurate answers, you must know what questions to ask, thus, you need to have a little knowledge of liquid code.

If you are not satisfied with the responses ChatGPT returns, you can click “Regenerate response” and it will give you a different answer to the same question. Also, it is worth noting that by inputting the same prompts we used above, you might get different answers by ChatGPT albeit containing a similar essence with the answers it provided.

Read: Chat GPT For Programming: 100+ Coding Prompts For Chat GPT

Bottom Line

To experienced web developers, Shopify Liquid is a simple code that they can use to make changes faster and safer – minimizing the risk of making design errors.

But to be honest, to people with no background to coding at all, Liquid is an overwhelming thing to learn. Particularly because one must also have a basic understanding of how codes like CSS, HTML, and JSON work because these are harmoniously used in your Shopify store’s backend.

If this sounds like too much work and stress – not to mention the anxiety it might cause once you make mistakes – you can use a no-code pagebuilder like PageFly so you can make changes in your website without the need for codes.

Read: How To Use PageFly: Get Started Within 6 Minutes

Learning Shopify Liquid cannot be done overnight. It requires a systematic process of absorbing chunks of information on a consistent basis to make sense of it all. By using ChatGPT as your learning assistant, you can easily understand the context of codes that you see in your code editor – making the learning stage faster and easier.

Just remember to use the right prompts.