What is Liquid by Shopify? 

Liquid is a Ruby-based template language built by Shopify. It’s currently an open-source project on GitHub, and it’s used by a variety of software projects and businesses. The backbone of all Shopify themes is Liquid which is used to load dynamic content on online store pages.  

Is Liquid a programming language or an engine?

Liquid is referred to as a template language by some, and a template engine by others. It doesn’t matter which label you use; both are correct in many ways. I prefer to refer to it as a template language. It has syntax (like traditional programming languages), output, logic, and loops, and it interacts with variables (data) in the same way as a web-centric language as PHP does.  

Website designers and developers can use a template language to create web pages with both static and dynamic content that changes from one page to the next. A template language allows you to reuse the static parts that make up a webpage’s layout while dynamically populating it with data from your Shopify store.  

The static and dynamic elements are written in HTML and Liquid, respectively. When the code in the file is compiled and transmitted to the browser, the Liquid components in the file are replaced by data from the Shopify store where the theme is installed. 

Liquid syntax

Liquid features a syntax, interacts with variables, and includes constructs like output and reasoning, just like traditional programming languages. Liquid constructs are easy to detect due to their understandable syntax, and can be separated from HTML by the following sets of delimiters: 

Double curly brace delimiters {{ }} indicate an output. 

Curly brace percentage delimiters {% %} indicate logic and control flow. 

Objects

Liquid objects are objects that emit data from a Shopify admin. Objects are wrapped in double curly brace delimiters in a theme template and look like this: {{ product.title }} 

Product is the object in the example above, and title is a property of that object. A list of properties is connected with each item. See the Liquid reference for further information on the product object’s characteristics. 

Tags

Template logic and control flow are created with liquid tags. When the homepage is rendered, the curly brace percentage delimiters %% and the text they surround do not produce any visible output. That enables you to assign variables, construct conditions, and loops without displaying any Liquid logic on the page. 

For example, based on whether or not a product is available, you may utilize Liquid tags to display different content on the product page: 

{% if product.available %} 

<h2>Price: $99.99</h2> 

{% else %} 

<h2 class=”sold-out”>Sorry, this product is sold out.</h2> 

{% endif %} 

If the product is available, then the output will be: 

Price: $99.99 

If the product is not available, then the output will be: 

Sorry, this product is sold out. 

Filters

Numbers, strings, objects, and variables can all be modified with liquid filters. They are denoted by a pipe character and are placed within an output tag. 

If you want to build your own web shop or have questions relating to e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in e-commerce.