Welcome to CodeCrew Infotech
Liquid Syntax In Shopify
What is liquid?
The liquid is the coding language which is developed by Shopify.
which is totally written in Ruby which is an open source programming language and Liquid is also available on Github.
In liquid programing language there are many enclosed braces like {{ }}, {% %}, {%- -%}, {- -}. each has a different meaning
The liquid code uses 3 major pieces: objects, tags, and filters.
Objects:-
Object are wrapped in the {{content_for_layout}} it used to display the assigned value of "content_for_layout".
Example:
{% assign variable = "Codecrew" %}
<h1>{{ variable }}</h1>
Here the output is Codecrew between <h1> tag.
<h1>Codecrew</h1>
if you use whitespace in the <h1> tag then it output has whitespace
{% assign variable = "Codecrew" %}
<h1> {{ variable }} </h1>
output is:
<h1> Codecrew </h1>
you can use {{- -}} it will remove the whitespace.
{% assign variable = "Codecrew" %}
<h1> {{- variable -}} </h1>
the output is:
<h1>Codecrew</h1>
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. vailable %}. using this syntax you can assign variables, conditions, and loops.
it represents the logic of the output
In the example, if the product is available you will see an 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.
Filter:-
Filters are used to modify the output of numbers, strings, objects, and variables
for example:-
{% for categories in roots_categories | limit: 5 %}
in this example, it restricts the value of category it shows only 5 roots category which describes in the program.
You may also like
