Shopify is a collection of front-end templating tools and back-end services that enable anyone with little to no web development experience to build their online store. Liquid is an open-source template language developed by Shopify and written in Ruby (a programming language) used for the front-end side of Shopify. A store owner (or a service provider like a Shopify Partner) may use Liquid to customize the look and feel of a standard Shopify storefront to suit the business’s specific needs.  Liquid is relatively easy to understand, even for people without web development experience. Liquid has been in use since 2006 at Shopify and is now being used by various other hosted web applications.

To understand the Liquid properly, let us consider this simple example, whenever you order a product from online stores, you get a bill/an invoice with every order. The format (how data is represented and oriented) is the same for every invoice, but each invoice’s data varies from user to user. Liquid helps create such templates that contain a particular format of representation for all invoices, and the data is loaded, which changes from user to user.

Where to locate Liquid files?

Every Shopify user can edit the code. To access it, log in to your Shopify account and go to Online Store > Themes on the left menu. Select the Actions button and choose Edit code from the drop-down list.

Liquid files have an extension of .liquid. Every liquid file contains standard HTML code and Liquid. They are distinguishable. Liquid uses its delimiters. It’s either the double curly brackets {{ }} or the curly brackets and percentage combination {% %} that surround a text.

The fundamentals of Liquid’s syntax

You don’t need to know anything about store databases. Liquid has its syntax for displaying the correct information. The code uses three significant components: objects, tags, and filters.

  • Objects are bits of Shopify data that you want Shopify to display on your website, such as product names, availability, collections, blog posts, and discount codes.
  • Tags don’t produce visible output as objects do, but you can assign variables and create conditions or loops to display a message on the page when a product is sold out, or a collection is empty, among other things.
  • Filters are used to change how the output of numbers, strings, objects, and variables are displayed; you can have general filters (date, address format, etc. ), media, font, URL, money, math, or array filters and more.

How does Shopify liquid work?

  1. The user requests a Shopify store’s URL.
  2. Shopify determines which store has been requested.
  3. Shopify selects the needed liquid template from the active theme directory.
  4. The liquid place-holder is replaced with actual data stored on the Shopify platform for the desired eCommerce website.
  5. The browser receives the HTML file that has been compiled.
  6. The browser processes the HTML file and fetches all other required assets (images, JS, CSS, etc.).

Why you should Understand and use Liquid

It takes time to understand and get used to Liquid but understanding Liquid will assist you in your position as a store owner. Even if you’re not a developer or a coder/engineer, you may be able to address some issues or figure out where the problems are coming from on your own. This could help you save time and money in the long run! With the growing popularity of Shopify to create eCommerce websites in simple steps, the demand for Liquid-based themes will also increase.

Show CommentsClose Comments

Leave a comment