Understanding what Liquid is

Liquid is a coding language template that was created by Shopify. It is also written in Ruby, an open source programming language. Liquid is finally available as an open source project on GitHub. If you own a Shopify store then you’ll certainly have come across Liquid, as it is the backbone of all the Shopify themes and it’s used to load dynamic content on all online store pages.

The syntax of Liquid code

Liquid is an easy to understand and read code, because it is constructed in a readable manner which is how it can be differentiated from code like HTML. Liquid code uses {{ }} curly brackets and percentage signs {% %}. The liquid code uses 3 major pieces: objects, tags and filters.

Objects

Objects are output pieces of data from the Shopify admin. Objects are wrapped in the curly brackets like so: {{ product.title }}. The output of this on your site’s page would therefore be replaced with an item from your store.

Tags

Liquid tags are used for logic statements and control the flow of a template. This is where the % signs come into place, they surround the text like so: {% if product.available %}. What this means is that the logic won’t be shown on the page, but you can assign variables and create conditions and loops. In the example, if the product is available you’ll see and output on the site page of the price. If you set another condition using {% else %} then if the item is, say sold out, it will display a sold out message instead of the price.

Filters

Filters are used to modify the output of numbers, strings, objects and variables. An example of for colours, for example: {{ '#7abb55c' | colour_lighten: 30 }}. This would put the output as #d0e5c5, which is 30% lighter than #7abb55c.

Some Useful Information

It takes time to understand and get used to Liquid. Because it’s a more readable code, it’s often easier to look through and deduce what the code will do. For further information you can read more about features on Shopify’s help page, or through this reference page that similarly explains tags, filters, objects and even the basics of Liquid code.

Why Should I Understand Liquid

Understanding Liquid will help you as a store owner, and it will help you to realize what your theme is doing. Even if you are not a developer or a coder/engineer, you may be able to fix some things on your own or understand where problems are coming from. This may save you time and money in the future!

Leave a Reply

Your email address will not be published. Required fields are marked *