Liquid Basics for Theme Tweaks (Objects, Tags & Filters)

What is Liquid?

Liquid is the templating language Shopify themes are built with — it lets HTML files pull in dynamic data like product titles, prices, and collection lists.

Liquid code lives inside double curly braces {{ }} for output, and curly-percent {% %} for logic like loops and conditions.

Real-life example: Liquid is like fill-in-the-blank letter templates — the same base letter (theme file) produces a different result depending on which name and details (product data) get poured into the blanks.

• {{ }} — output an object's value, like {{ product.title }}
• {% %} — logic tags, like {% if %} or {% for %}
• {%- -%} — same as {% %} but trims extra whitespace

Objects — the data Liquid works with

Objects represent real store data — product, collection, cart, customer, shop — each with properties you can output, like product.price or cart.item_count.

Understanding which object is available on which template (a product object exists on product.json, not on the home page) prevents confusing errors.

Real-life example: Objects are labeled boxes of ingredients in a kitchen — 'product' box has title and price inside, 'cart' box has item count and total — you can only use the box that's actually delivered to that page.

{{ product.title }}
{{ product.price | money }}
{{ collection.title }}
{{ cart.item_count }}
{{ cart.total_price | money }}
{{ shop.name }}
{{ customer.first_name }}

Tags — loops and conditions

Tags control logic: {% if %} shows content conditionally, {% for %} loops through a list like all products in a collection.

Combining tags and objects is how theme sections render dynamic product grids, navigation menus, and conditional banners (like showing a 'Sold Out' badge).

Real-life example: A {% for %} loop is a shop assistant restocking a shelf one item at a time from a delivery crate, repeating the same action for every box until the crate is empty.

<ul>
  {% for product in collection.products %}
    <li>
      {{ product.title }} — {{ product.price | money }}
      {% if product.available == false %}
        <span class="sold-out">Sold Out</span>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Filters — transforming output

Filters modify output using the pipe symbol |, like formatting a price with money, trimming text with truncate, or resizing an image URL.

You can chain multiple filters together, and Liquid applies them left to right, one after another.

Real-life example: Filters are like an assembly line — raw output goes in one end, and each station (filter) reshapes it a little before the final result comes out the other side.

{{ product.price | money }}
{{ product.title | upcase }}
{{ product.description | strip_html | truncate: 100 }}
{{ product.featured_image | image_url: width: 400 }}