A basic knowledge of Shopify’s Liquid framework is essential to supporting your Shopify development needs. By understanding the core concepts of Liquid language, you’re empowering yourself with the ability to modify your Shopify theme templates. Keep reading to learn more about the language of Liquid, or head over to our Introduction to Shopify Liquid to get better acquainted with how Liquid communicates with Shopify.
How to Start Learning Shopify Coding
There are two routes you can take to start learning how to code Shopify Liquid:
- Start your own theme from scratch
- Customize a free or paid Shopify theme
Starting your own theme from scratch is definitely a good way to start for learning purposes, but it’s obviously not practical for most business owners juggling many responsibilities.
You can start simple, though. If you’re managing a Shopify store, it’s possible to learn Shopify Liquid by making small modifications and customizations to the theme’s templates with only a basic understanding of the coding language necessary.
How Liquid Works
Liquid, like any other template language, creates a communication channel between a HTML file and the Shopify store. It does this by allowing you to access variables from within a code (.liquid) file, with an easy-to-understand readable coding structure.
Shopify has a very easy nomenclature for accessing different types of data through the Liquid code. It makes things even easier with the .liquid template structure. For example, the product.liquid file gives you access to all the information related to the current product you are viewing. Similarly, the collection.liquid file gives you access to all the collection-related data through an easy code structure.
By default, Shopify connects with the database and also through its own framework, which makes it easier to access data through shortcodes rather than writing SQL queries to access database information.
Liquid Code
Liquid code uses double curly brackets {{ }} and curly bracket / percentage signs {% %} to communicate with the Shopify backend. These are identifiers that trigger the Shopify backend to manipulate the data based on the Liquid code.
The Liquid code is broken into three distinct categories: objects, tags, and filters.
| Objects | Objects are used to output Shopify data. Any code inside double curly brackets {{ }} outputs the resulting data. |
| Tags | Tags are used for logical statements controlling output of a liquid file. Any code inside the curly bracket / percentage signs {% %} does not output anything but instead manipulates the logic on the bases of which the objects output something. |
| Filters | Filters modify output of numbers, variables, and strings. They are used in accordance with the object code. The code {{ “be uppercase text” | upcase }} outputs the following: BE UPPERCASE TEXT |
Though HTML is not part of the liquid framework, it’s used with Liquid code to stylize the output.
Similar to other frameworks and languages, Liquid also has operators, conditions (true/false), types, variables, and whitespace controllers. The first four are widely understood among developers, while whitespace controllers are not very common among other coding languages as they control whether or not the output is going to skip the whitespaces or apply the same formatting as per the code.
Liquid Tags
There are four types of Liquid tags: theme, variable, iteration, and control flow.
| Theme Tags | Theme tags determine the flow of template-specific HTML markup. They are further divided into template tags, sections, and snippets.
Template tags tell the theme to follow specific .liquid files, sections are used to extend the templates further into larger chunks of code, and the smallest form of code to do any specific task is called a snippet. An example of a theme tag is {% form %}, which adds a form to a page. |
| Variable Tags | Variable tags let you define variables to store small data from the Shopify backend or store any calculations to use inside the code. An example of a variable tag is {% assign %}. |
| Iteration Tags | If you want to repeat an action based on a condition, you use iteration tags. For example, {% for %} repeats a specific action until the condition is false. This is useful for displaying products inside a collection page or in a section. Normally loops are limited to 50 results. If you need to execute the loop further, you need to use pagination or you may need to customize the loop and change the limit. |
| Control Flow Tags | If you want to execute a snippet of code based on a condition, you use control flow tags. It also determines if a code will be executed or not. For example, {% if %} runs the code if the condition is met. If the condition returns false, the code does not run. |
Simple Shopify Liquid Coding Examples
Since Shopify is primarily an eCommerce platform, let’s look at a few examples of Liquid coding used in the product.liquid file.
| Liquid Coding Examples | Shortcode | Description |
| Product Title | <h1>{{ product.title }}</h1> | The product title object prints the product title inside the H1 tag. As mentioned earlier, for design purposes, you use Liquid code and HTML codes side by side to achieve the desired output. |
| Product Description | {{ product.description }} | The product description object returns a description of the current product viewed. |
| Product Collections | {% for collection in product.collections %}
{{ collection.title }} {% endfor %} |
Since a product might be assigned to multiple collections, the product collections code returns an array of all collections assigned to a product. |
| Product Tags | {% for tag in product.tags %}
{{ tag }} {% endfor %} |
The reason that the product tags code is defined inside a loop is so that a product that has been assigned many tags will output all of them. |
| Product Variations | {% for product_option in product.options_with_values %}
{{ product_option.name }} <select> {% for value in product_option.values %} <option {% if product_option.selected_value == value %}selected{% endif %}> {{ value }} </option> {% endfor %} </select> {% endfor %} |
The product variations code searches for product options. If there are no product variations, then it returns false and outputs nothing on the screen. If there is a single variation, for example “color,” it outputs a dropdown with the list of colors available. If the product has more than one variation type like “color” and “size,” then it returns two dropdowns with their respective titles. |
| Product Variation URL | {{ variant.url }} | If you want to get a direct link to a product variation, you can use the variation.url object. This is very helpful when you want to display all variations on a collections page rather than finding the variation on the product page. |
| Product Price | {{ product.price }} | The product price object returns the price of the product. If you have multiple variations of a product, the object returns the lowest variant price of the product. Similarly, you can get the minimum and maximum price of the product through the following code.
{{ product.price_min }} {{ product.price_max }} |
| Product Images | {% for image in product.images %}
<img src=”{{ image.src | product_img_url: ‘medium’ }}”> {% endfor %} |
A product may have many images, so you can use a loop to get all the images from a product. |
| Product URL | {{ product.url }} | The product URL object returns the URL of the product. Please note that the resultant URL will be relative to the store URL, such as: “/products/awesome-product”
If you want the complete URL, you need to concatenate it with the store URL. |
Depending on the template or custom code that you are trying to view, the file might start with a few variables definitions.
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
“Assign” means you are defining a variable to store some information from the backend of the product table for easy execution. If you don’t assign code to a variable, you will have to write the long code many times, so it saves you valuable time and coding.
In the first line of code, you are assigning the first product variant or the selected variant to current_variant variable. In the second line of code, you use current_variable to featured_image, on the basis of which you display the appropriate featured image. (This might return false if there are no featured images assigned to a variant and thus the featured image variable will have a null value.)
Customize Your Shopify Site with More Basic Liquid Coding
The examples above are just a few of the many simple codes that you can implement on your Shopify site. We suggest looking through your theme’s templates to see if you can spot the objects, tags, and filters that you want to change, and then reference Shopify’s Liquid Cheat Sheet for even more examples. While we highly recommend hiring a Shopify expert or freelance developer if you feel uncomfortable with touching the code, rolling up your sleeves and taking on the challenge yourself with a little research can save you hundreds of dollars or more in coding fees.
