Shopify Liquid for Non-Tech-Savvy Merchants and Beginners

Learning the basics of Liquid can help you stay out of the dark and be unafraid to touch code. After all, your theme and all the code in it are also part of your business.

While it may seem purely technical, Liquid is a relatively human-readable programming language. Most non-tech-savvy merchants can easily understand it.

In this guide, I’ll try to explain Liquid at a very primitive level to provide a strong understanding of the technology that runs our storefronts.

This article is not a programming tutorial aimed at tech-savvy readers.

What is Liquid?

This article’s cover nicely illustrates what Liquid is at its core; a hole in the wall.

You stick your arm in there and grab any helpful information you want; your products, pages, images, collections, tags, and virtually anything you can find manually through your admin interface.

The “hole” is this set of brackets.

{{}}

And everything you can “name” inside will magically appear on your site.
So, for example, if we wanted to show our product’s price, we’d say:

{{ product.price }}

The dot is like a “possessive apostrophe”; it’s almost as if we wrote:

{{ product's price }}

Why is Liquid?

We only need Liquid because themes need some “interface” into a store’s data.

And Liquid is not the only “interface” to your store’s data.
I could access some of your store’s public product data regardless of whether your product page displays this data.

As an example,
“Just because your product page doesn’t say when a product was created/updated doesn’t mean I can’t access that information.”

Try this:

1. View any one of your product pages.
2. Add .json to the end.
3. Notice any dates for “published_at” and “updated_at”?

Obviously, this doesn’t mean all of your store’s data is open to everyone, just the already public. The point is that: to access any data, we need an interface to it.

Back to Liquid

Liquid is a secure interface to your store’s data; only your theme can use it.

And what’s more, Liquid lets you do some cool things with that data before showing it to your customers.

Let’s say you want to show the product’s title.

{{ product.title }}

But now, let’s say you wanted that title but with uppercase letters.

{{ product.title | upcase }}

The “|” character is called a “pipe,” and you can use it to make a “pipeline.”

Imagine a manufacturing assembly line, where a product gets assembled through a series of sequential steps, each adding or modifying something about the product.

You begin from the left, and every “|” (pipe) starts a new step.

For a product titled “My Cool Product,” the following pipeline processes the title into “MY COOL PRODUCT”

{{ product.title | upcase }}

What does the following pipeline do?

{{ product.title | downcase }}

That’s right! It makes “my cool product”

But not just product data!

Liquid doesn’t only deal with your store’s data (products, collection, etc.). It can also use theme and section settings directly from the theme editor.

For example, if a section had settings for a title, you might access that title using

{{ section.settings.title }}

The same is true about section blocks.

Liquid as a programming language

I’ve only shown the tip of what Liquid can do; in the real world, it gets super hairy and often requires a good understanding of programming.

Take this snippet, for example.

  
    
{% liquid
  for product in collections['all'].products
    assign diff = block.settings.max | minus: block.settings.min
    assign _seed = product.first_available_variant.id | append: product.updated_at
    assign seed = _seed | date: "%s"
    assign rnd = seed | modulo: diff | plus: block.settings.min

    echo rnd
    echo '<br>'
  endfor
%}

This snippet can generate up to 50 random numbers in a range specified through the theme editor.

Do I need to learn Liquid as a Shopify merchant?

Learning Liquid is learning to code. Unless you’re willing to spend much time learning to code, you’re probably better off trying to improve at doing what you already do.

But learning the basics can help you stay out of the dark and be unafraid to touch code. After all, your theme and all the code in it are also part of your business.

🥳 Thanks for reading.