Blog

First, lets get into what is Shopify?

 

Shopify is an e-commerce platform for online stores.

Shopify gives us a platform for creating our own online shopping stores.

 

What is Liquid?

Liquid is an open source template language created by Shopify and which is written in Ruby. All the Shopify themes are built using liquid so we can say it is the backbone of Shopify and is used to load the dynamic content of online stores.

Liquid acts as a bridge between the web layout and the website data.

Basically, a template language makes it possible to re-use the static elements that define the layout of a webpage, while dynamically loading the pages with data from a Shopify store. The static elements are of-course written in HTML, and the dynamic elements are written in Liquid.

 

How does Liquid work with Shopify?

 

1. User requests a URL of a Shopify store in the browser.

 

2. Shopify works out to find which store is being requested.

 

3. For the requested store, Shopify selects the required liquid template from the active theme directory.

 

4. The liquid content place-holder is replaced with the real data stored on the Shopify platform for the requested e-Commerce website.

 

5. After that, the compiled HTML file is sent to the browser.

 

6. The browser processes the HTML file and fetches all other required assets(images, JS, CSS, etc.) files.

Liquid Syntax:

 

Liquid code can be categorized mainly into three things: Objects, Tags, and Filters.

 

Objects:

• For displaying any object and or any variable name, we can use the output tag denoted by {{ …. }} double curly braces.

• For example, we can display the title of a page using {{ page.title }}. Here, Liquid is rendering the value of the object with the name page.title.

• Objects uses the dot syntax in-order to fetch any properties of an object.

Tags:

• Tags are used to create the logic and control flow part for the templates.

• The {% …. %} curly braces with a percent sign are used to denote a logic.

For example:

 

If the user is logged in and his name is Jay, then the above code will display - Hello Jay

Filters:

• Liquid filters are used to modify the output of any numbers, strings, objects, and variables.

• They are denoted by a pipe character “ | ” and are placed within an output tag {{ }}.

For example:

 

Liquid Collections:

• Liquid collection is different from product collection. Generally, a bunch of products that are grouped together logically is called a product collection and in Liquid, a collection is the number of objects that are all the same.

• Example: Collection of product images, etc

 

Conclusion:

Liquid is a powerful template language while working on the Shopify platform. And its similarity with HTML and ability to load the dynamic data makes it a great choice to create eCommerce websites with Shopify.