We Are A Web Agency With A Passion For Design.

Beginner’s Guide:Liquid – Template Language Created By Shopify

If you want to lern Shopify than you have to understand liquid.Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

Liquid was developed by Shopify co-founder and CEO Tobias Lütke and is now available as an open source project on GitHub. Today, it’s used in many different software projects, from content management systems to static site generators—and Shopify. 


Liquid’s file extension

Liquid files have the extension of .liquid. A liquid file is a mix of standard HTML code and Liquid constructs. It’s an easy to read syntax, and is easy to distinguish from HTML when working with a Liquid file. This is made even easier thanks to the use of two sets of delimiters.

The double curly brace delimiters {{ }} denote output, and the curly brace percentage delimiters {% %} denote logic. You’ll become very familiar with these as every Liquid construct begins with one or the other.

 

Liquid code can be categorized into objects, tags, and filters.

 

Objects

Objects tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: {{ and }}.

 

Tags

Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% and %}.

 

Filters

Filters change the output of a Liquid object. They are used within an output and are separated by a |.

 

  • Liquid is a template language that allows us to display data in a template
  • Liquid has constructs such as output, logic, loops and deals with variables
  • Liquid files are a mixture of HTML and Liquid code, and have the .liquid file extension
  • Liquid files used in a Shopify theme are agnostic and have no concept of the store they are currently being used in The two types of delimiters used in Liquid

Leave a Reply