Skip to main content

Liquid Basics in Shopify

Last updated: October 07 2024

Written and researched by experts at Avada Learn more about our methodology

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.

linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.