Liquid Template Essentials

The Three Pillars of Liquid Syntax

At its core, Liquid syntax is composed of three main elements: objects, tags, and filters. Understanding how these three components work together is the key to unlocking theme development.

Let's get a formal introduction to each.

To summarize and visualize what you've just read:

• Objects {{ }}: These are for output. They act as placeholders that print data from your store. The data is accessed using dot notation, similar to accessing properties of a JavaScript object (e.g., {{ product.title }}).
• Tags {% %}: These are for logic. They don't produce visible output themselves but control the flow of your template. This includes conditionals (if, else), loops (for), and variable assignments (assign).
• Filters |: These are simple functions used to modify the output of an object. They are placed within an output tag {{ }} and are separated from the object by a pipe character (|). You can chain multiple filters together.

Now, let's watch a quick video that recaps these three concepts visually.

Putting It All Together: From Syntax to Storefront

Now that we have the basic syntax, let's apply it. The best way to learn is by working with real store data. We're going to build a common e-commerce component: a list of products.

The following video is a crash course that walks through writing Liquid from scratch. Since you're already a programmer, this fast-paced, hands-on approach should be effective. We will focus on the parts where we interact with actual Shopify data.

This video demonstrates the most common pattern in theme development:

1. Access a top-level data object (like a collection).
2. Loop through its items (like products).
3. For each item, display its properties, applying filters for formatting and using conditional tags for logic.

The term "drop" that the video mentions (e.g., ProductDrop) is Shopify's internal name for the objects made available to Liquid. For our purposes, you can simply think of a "drop" as a "Liquid object."

<ul>
  {% for vendor in collection.all_vendors %}
    <li>{{ vendor }}</li>
  {% endfor %}
</ul>

Connecting Liquid to Your React Background

In your experience with React and Next.js, you're used to components receiving data from different sources—sometimes as props passed down from a parent, other times fetched from an API or a CMS. Liquid has a similar paradigm.

Content in a Shopify theme comes from two primary sources:

1. Native Shopify Data: These are the global objects that Shopify makes available automatically based on the context of the page. For example, on a product page, you have access to the product object. On a collection page, you get the collection object. This is analogous to how Next.js might provide page-specific data via getServerSideProps or route parameters. You don't have to "fetch" this data; Shopify provides it.

2. Theme Editor Settings: This is data that the merchant enters through the theme customization interface. As a developer, you define what settings are available using a {% schema %} block in your section files. This is very similar to defining fields in a headless CMS and then fetching that data to populate your React components.

This distinction is crucial for building flexible themes.

We will dive deep into creating {% schema %} blocks and building customizable sections in Module 5, but understanding this separation of data sources now is key to forming a correct mental model.

Conclusion

Today we've demystified Liquid's syntax, breaking it down into its three core components. You now know how to use these building blocks to create dynamic templates.

Key Takeaways:

• Liquid syntax revolves around three pillars:
  • Objects {{ }} for outputting data (e.g., {{ product.title }}).
  • Tags {% %} for logic and control flow (e.g., {% for %}, {% if %}).
  • Filters | for modifying output (e.g., {{ product.price | money }}).
• The most common workflow is to loop through a collection of objects (like products) and output their properties, using filters for formatting and tags for conditional logic.
• Data in Liquid comes from two main sources: native Shopify objects provided by context, and merchant-defined settings from the theme editor schema.

In our next lesson, we will continue our exploration of filters. We'll move beyond the money filter and look at a wider range of common and powerful filters used to manipulate strings, numbers, and dates, giving you finer control over your theme's output.