Sign in
Log inSign up

Basics of Liquid Language [Part -1]

Soumik Mallik's photo
Soumik Mallik
·Aug 25, 2021·

2 min read

Liquid is a template language to create flexible web apps.

Liquid is an open-source language created by Shopify and written purely in Ruby.

The Basics of Liquid

Liquid code is categorized into objects, tags, and filters.

Objects

Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.

# Input

{{ page.title }}

# Output

Introduction

In this case, Liquid is rendering the content of the title property of the page object, which contains the text Introduction.

Tags

Tags are used to create logic control the flow of the templates and are denoted with curly braces and percentage signs {% and %}

#Input

{% if user %}
    Hello {{ user.name }}!
{% endif %}

#Output

    Hello Soumik!

Tags can be categorized into various types:

  • Control Flow
  • Iteration
  • Template
  • Variable Assignment

We will get to know more about the various types of tag in the upcoming blog.

Filters

Filters are used to manipulate an object and are denoted with a pipe |. 

# Input - 1

{{ "/my/fancy/url" | append: ".html" }}

# Output - 1

/my/fancy/url.html

Multiple filters can be used on one output, and are applied from left to right.

# Input - 2

{{ "world" | capitalize | prepend: "Hello " | append: "!" }}

#Output - 2

Hello World!

I hope this article helped you in understanding the basics of liquid better :)