To really understand what liquid template language is, you need to delve into the world of eCommerce and take a good look at Shopify. If you are a new user of the Shopify eCommerce system, you wouldn’t know instantly what code sits behind all of the pretty interfaces and easy to build product options. But as a web designer or developer, you may wish to find out more about what goes on under the hood of Shopify.

Many developers make the mistake of believing that Shopify uses some elements of PHP in its main code base, similar to how most other eCommerce platforms do, some include WooCommerce, Magento, OpenCart and PrestaShop. Unlike these other eCommerce platforms, Shopify has its own purpose-built templating language called Liquid it uses for themes for your online store.

Is Liquid a language or engine?

Some developers call Liquid a type of templating language, whereas, other people believe that it is an engine for Shopify themes. In simple terms, this is just a label and both terms in their own right are correct. I prefer the term “language” as with other traditional coding languages such as PHP, HTML and jQuery, these have syntax with a common output, IF statements and loops. Even with these similarities to other coding languages, this is where the common factors end. Shopify’s Liquid Templating Language is intuitive and has so many benefits over conventional coding practices.

Liquid Files

Once you’ve managed to get under the hood of Shopify and start to look at the actual theme development aspect of the eCommerce platform where do you find these liquid files? Like HTML and PHP, the files will always end in the language extension. See below:

• afilename.php
• afilename.html
• afilename.js

This is no different with liquid template files as these end in .liquid, for example, “afilename.liquid”. This is the easiest way to establish what code you will find inside the actual file.

Once you have opened a .liquid file you will find some code you will be familiar with, HTML. Liquid templating language is a mixture of normal HTML code and also liquid constructs. You can easily distinguish the liquid tags from HTML code as these will follow one of the following patterns:

• The double curly brace delimiters {{ }} denote some output
• The curly brace and percentage delimiters {% %} denote logic

For an established designer or developer with some past experience should be able to read this code easily without any extensive training.

How Does Liquid Work with Shopify?

Shopify eCommerce platform will decide which templates are to be shown to the frontend user of the website. For example, if the URL is http://myshop.myshopify.com/collections/tshirts Shopify will render the collections.liquid template.

Once Shopify understands which template to show to site user, the template will be parsed to look for Liquid placeholder tags. These placeholders are replaced with relevant data from your stored database. It does take some time to understand the connection between Shopify and how the templates work but once you get the hang of this, it will be much easier to work with.

What Are Placeholders?

Placeholder is the simplest form is a piece of code that will be changed when the template is sent to the browser to parse. The information sent to the browser will usually be some logic as discussed earlier using tags like {% %} or output using tags such as {{ }}.

[markdown]
“`html

{{ product.title }}

“`
[/markdown]

As you can see from the above example, this is a mixture of HTML tags (Heading 2) and .liquid code {{ product.liquid }}. This is using the simple output tags from Shopify’s coding language and when passed to the browser will change the Liquid into information pulled from the database. In the example below I have left the heading 2’s in:

[markdown]
“`html

My New Online Store

“`
[/markdown]

Unless you use a filter on the Liquid tag this will print exactly what is stored in that field in the database. Filters will allow you to adapt further.

Logic Tags

As with other languages, Shopify’s Liquid Templating Language allows you to apply some logic. Please see the example below:

[markdown]
“`html
{% if product.available %}
This product is available
{% else %}
Sorry, this product is sold out
{% endif %}
“`
[/markdown]

The logic example above is an IF Statement. By using Liquid logic we can determine the output that is rendered based on whether things such as product stock level is equal to in stock. Liquid code goes one step further and as well as IF, ELSE and END IF logic parameters, Liquid allows you to use boolean logic such as true or false.

Summary

Liquid, in a nutshell, is a very powerful offering brought to the table by Shopify’s ever-growing eCommerce store system. Liquid has so many benefits and advantages over its nearest rivals in terms of usability and adaptability. For any new web designer or developer with some HTML experience should be able to get off the ground quickly with Shopify theme development.