Introduction Liquid in Shopify
Drive 20-40% of your revenue with Avada
As you are reading our writing on Liquid Introduction, we assume that you are a newbie to all kinds of open sources and have not had full aware of website customization or configuration.
However, please keep reading our instructional writing on Introduction about Liquid to know more deeply about this open source.
Table of Contents
An overview of Liquid
In this article, we are going to expain in details all you need to know about Liquid: how it can fit so well into Shopify theme cuilding, and the core concepts which will allow you to start gennerating immersive and powerful e-commerce templates. To go more into details, we would be back to the past when Liquid was designed by Tobias Lütke - the Shopify CEO and co-founder. Currently, it is available as an open source project on GitHub. Nowadays, we may not be that much unfamiliar with Liquid when it is mentioned because it is used in so many different software project, from management systems of content to flat file site generators, and the last but not least, Shopify.
So what is Liquid actually? Is it a template language or a template engine?
The fact is that there is no matter how you do call it (both could be all right in many cases). Nonetherless, we would like to consider it a template language because it contains a syntax (such as conventional programming languages), it has various types of concept we can tell logic, output, and loops. On top of that, it can interact perfectly with variables. You can keep in mind that it is the backbone of all Shopify themes, and is employed to load dynamic content to online stores’ pages.
However, there are still some things that you are not able to do with Liquid. For instance, there is no concept of “sate” for Liquid. It does not allow you to get deeper under the platform’s covers. In some cases, for seasoned coders, it can seem counter intuitive, occasionally.
There are 3 liquid types: Tags, Objects and Filters. Let’s explore them now!
Tags
Liquid tags are always employed to generate logic and templates’ control flow. When the webpage is rendered, the curly brace percentage delimiters {% ..... %} and the text that they surround don’t release any output, which is visible. This allows you to assign variables and generate loops or condition when not displaying any of the Liquid logic on the page.
For instance, you are able to apply Liquid tags on showing different content on the product page, it replies on whether the item is available or not:
{% if product.available %}
<h2>Price: $99.99</h2>
{% else %}
<h2 class="sold-out">Sorry, this product is sold out.</h2>
{% endif %}
In case the product is in stock, then the output will look like this:
Price: $99.99
In case the product is not in stock, then the output will look like this:
Sorry, this product is sold out.
Note that the example mentioned above uses if and else Liquid tags, control flow tags.
Liquid tags can be classified into many different types: - Control flow tags - Section tags - Iteraction tags - Variable tags - Theme tags
Objects
Liquid objects can output pieces of data from a administrator on Shopify. In a theme template, objects are wrapped in double curly brace delimiters `` and look similar to the code below:
{{ product.title }}
In the example mentioned above, title is regconized as a property of the object meanwhile product is the object. Every object does have a list of associated properties. You can find the Liquid object in the product template of any Shopify themes. When the code in the file is complied and rendered on a Shopify store’s product page, the Liquid object’s output will be the product’s title. For instance, in a store selling clothes, the result should be:
Awesome T-Shirt
Filters
Liquid filters are employed to edit the output of strings, objects, numbers, and variables. They are all placed within an output tag `` and denoted by |, a pipe character.
We would like to take an example, which is the capitalize string filter, and show it below:
{{ 'hello, world!' | capitalize }}
The filter does capital the string to modify it. The result should be:
Hello, world!
Various filters can be applied on one output in the left-to-right order.
{{ 'hello, world!' | capitalize | remove: "world" }}
The string is the first to be capitalized while the word world is completely deleted. The output must be:
Hello, !
You are able to employ Liquid filters to generate a wide range of necessary data minipulations. They are classified into 8 types: - Array filters - HTML filters - Money filters - URL filters - Color filters - Math filters - String filters - Additional filters
Conclusion
All in all, with this introduction about Liquid, we hope that you will receive useful information about Liquid and 3 liquid types: Tags, Objects and Filters so that you can start gennerating immersive and powerful e-commerce templates.
Liquid
