The Liquid language

The 2 HTML limitations seen in the first article are clearly an obstacle for implementing decent SOC for web pages. So, the good folks at Shopify solved this problem by creating in 2006 a templating language called Liquid.

1 | What is Liquid?

Liquid is a language that adds to HTML the programming capabilities it misses by nature. With Liquid, we can now declare and use variables, add logic, and perform some actions with functions. This is not possible with plain HTML. But the Liquid language goes a bit further by even allowing to use objects and arrays.

Therefore, in Shopify themes, instead of using HTML, CSS, and JavaScript files, we use Liquid, CSS and JavaScript files. Liquid files are HTML files on steroids. They end with .liquid instead of .html. To render proper HTML pages, Shopify executes the Liquid files and transforms them into pure HTML files that web browsers can parse and display, just like any other HTML pages. The processing of the Liquid files is entirely handled in the background by Shopify, on the back-end side.

To recap, in the Shopify theme system, there are 3 types of files: JavaScript, Liquid and CSS files:

Logic (Iterations and control flow)✔️✔️

2 | Learning Liquid

If you are familiar with any general-purpose programming language, you already know the concepts used by the Liquid language. Similarly to most templating languages and engines, the syntax is just "heavier" (in my opinion).

The Liquid template is now an open-source language, used by many companies. Their documentation is really good, so I simply encourage you to read it online right there: Read carefully the Basics and Tags sections. You can quickly browse the Filters section, just to get an idea of what is possible. Then, I think that you are good to move on.

3 | My comments about Liquid

  • Use comments only when you really need to. The comment tags are quite long and make Liquid code less readable. I believe that comments in Liquid should rarely be used, since the language mostly uses simple and straightforward logic and data structures. Moreover, Liquid code that has many comments is seldom a good sign. Liquid code should be self-explanatory.
  • There are 2 different tags for variable assignment. The {% capture %} tag is used to assign what other programming languages call template literals or literal string interpolation (strings that reference variables). From my experience, you will not need this tag very often, unless you want to repeat the exact same text several times on a page, which is quite unusual.

Author: (reviewed by Coralie Delpha)
Initial publication date:
Last updated: