If you’ve built a website before, you know there is always a small learning curve to the platform, coding, and simply getting yourself oriented.

Ask any developer and they’re pretty familiar with the basics of web design, like HTML, CSS, and Javascript. Each one serves its own purpose and are the backbones of many websites.

Are you familiar with Liquid?

If you’re responsible for building an eCommerce website, then you’ve no doubt heard of Shopify. Thanks to their new WYSIWYG editor, you don’t have to be a coder to make adjustments.

One of the world’s leading eCommerce website builders, Shopify co-founder developed Liquid a few years ago and now the template language is used in various projects and software systems.

Today, we’re going to run through the basics of what Liquid is and its purpose for building or adjusting your online store’s template.

Liquid’s Purpose and Uses

At its core, Liquid isn’t all that different from other template languages. It serves to connect HTML files with data. It was designed to be easy to read and simple to understand. It is written in Ruby, so those having familiarity will already have a leg up.

It’s important to understand that Liquid was designed with eCommerce in mind so all of its functions are built around making sure your product pages are just as you want them to be.

That’s one of the big reasons that Liquid is used for dynamic elements. An eCommerce webpage is still going to make use of HTML on static pages (such as the privacy policy or contact section), but product pages are going to be going through changes.

Liquid makes it simple to retrieve specific data because it acts as a placeholder. When a user requests a URL of a Shopify store, that request is sent to Shopify, they select the correct page from their directory, Liquid’s placeholders are replaced by actual data, an HTML file is then sent to the browser, and finally, the correct page is displayed in front of the user.

Delimiters

It’s easy to spot a Liquid file because it’s going to have the .liquid extension. When you look at a file, you’re going to see a combination of Liquid constructs and basic HTML code.

You will also be able to recognize Liquid as it uses the double curly brackets {{ }} for output and {% %} for logic.

These delimiters are our placeholders that will eventually be replaced by data when requested by the browser.

Objects

One of three features used to categorize Liquid, objects (or variables) are used to represent one or more values. You’ll use them for anything, like titles and search results.

They are going to generate pieces of data for display purposes. This is where you’ll use those double curly brackets discussed above.

You’re going to want to follow the basic outline of {{yourpage.contentpiece}}. So, that can be anything like:

yourpage.domain yourpage.address yourpage.privacy_policy yourpage.vendors

All items after the . are there to represent shop object properties.

Tags

The second feature of Liquid, tags are going to create logic. That means they’re going to use the percentage sign above.

Tags, just like other website builders, are not actually shown on the webpage but determine how objects are shown on a certain page. They can also be used to determine in an object is going to be displayed at all.

There are a few different types of tags, such as variable, control flow, and iteration.

Filters

The last feature of Liquid, filters are a crucial part of Liquid as a whole.

One of the main draws of Liquid is that it allows themes to be agnostic and this is made possible by filters. They reduce the amount of code that needs to be written, saving designers countless hours and valuable time.

In the simplest explanation, filters allow web designers to alter data taken from a store. It starts in one location and through manipulation, comes out on the other end properly displayed.

Filters are used for a number of elements, such as font, color, money, HTML, date, and more.

Summary

As with anything else, Liquid will take some time to get used to but it’s far from impossible. Thanks to its agnostic use and ability to be displayed and connected to just about any webpage, you don’t have to be the world’s greatest coder to feel comfortable with Liquid.

While this is just a basic look, we encourage you to check out other tutorials for more precise instruction and demonstrations.

Plus, it’s always a good time to jump on the eCommerce train if it’s crossed your mind lately.