Liquid Basics in Shopify
Drive 20-40% of your revenue with Avada
If you are a newcomer to Shopify platform, you might be unfamiliar with Liquid. In this article, you are going to be shown a basic knowledge of the Liquid Code.
Liquid Basics
What is Liquid Code {#what-is-liquid-code)
Liquid or the Liquid Code is known as template language which lets you show your data in a template. It has constructs, including logic, loops, output, and deals with the variables. Also, the Liquid files are the combination of HTML and the Liquid Codes and are loaded with the liquid file extension.
Liquid files are used in Shopify themes that become agnostic. In addition, it contains no concept of stores they are currently used.
Liquid Basics: objects, tags, and filters
Regarding the Liquid Code, it can be divided to objects, tags, and fitters.
Objects
Objects can inform Liquid the place to aid you in showing your contents on pages. You should bear in mind that variable names and objects are generated by {{ }}
Input
{{ page.title }}
Output
Introduction
In most cases, Liquid can render contents of an object named page.title and objects including the text Introduction.
Tags
Tags can help you create logics and manage flows for the templates. Tags are built by percent signs {% and %} and the curly braces.
You should take note that the markup that is used in tags does not generate visible texts. This means that you are able to assign your variables and produce loops as well as conditions without displaying any the Liquid logic on your pages.
Input
{% if user %}
Hello {{ user.name }}!
{% endif %}
Output
Hello Adam!
Tags are categorized into three types, including Control Flow, Iteration, and Variable Assignments.
Filters
Filters can modify the output of Liquid objects. In fact, they are used in an output as well as are divided by a |.
Input
{{ "/my/fancy/url" | append: ".html" }}
Output
/my/fancy/url.html
Many filters can be applied on output. They are used from the left to the right.
Input
{{ "adam!" | capitalize | prepend: "Hello " }}
Output
Hello Adam!
Conclusion
After reading this post, we hope that you can broaden your knowledge of Liquid Basic. It is not too complicated to understand If you have any question, don’t hesitate to contact us by leaving us a comment.
Liquid
