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
.