Shopify Liquid Cheat Sheet: Syntax, Tags, Filters & Examples

Store owners often find themselves constrained by standard theme options, unable to implement the design changes or dynamic content displays needed to improve branding and conversions. That can be frustrating, especially when a store needs more flexibility than its theme settings provide.

Shopify Liquid helps bridge this gap by allowing developers to customize storefront templates and display dynamic store data. Whether you’re modifying an existing theme or building a custom Shopify theme, understanding Liquid makes it easier to control how products, collections, and other store elements appear.

This Shopify Liquid cheat sheet covers essential Liquid syntax, objects, tags, filters, variables, and practical Shopify Liquid code snippets. Use it as a quick reference when customizing your store or looking for examples to speed up development.

What is Shopify Liquid?

Shopify Liquid is an open-source template language Shopify created to display dynamic content in online stores. It allows developers to access store data, including products, collections, and shop settings, and control how that information appears in storefront templates.

Understanding Shopify Liquid syntax starts with three core components: objects, tags, and filters. Developers use double curly braces ({{ }}) to output values and curly-brace percentage delimiters ({% %}) to execute template instructions. These building blocks support Shopify theme customization, including dynamic product pages, collection templates, reusable snippets, conditional content, and other storefront features.

• Objects: Access Shopify store data, such as product titles, prices, and availability, using {{ }}.
• Tags: Control template logic and behavior, including conditions, loops, and variable assignments, using {% %}.
• Filters: Modify how an object’s value is displayed, such as converting a product title to uppercase with {{ product.title | upcase }}.

Liquid takes the information stored in your Shopify admin panel and uses code to display it on your website the way you design.

Let’s discuss these components and more in detail.

Key Components of Shopify Liquid

Think of Shopify Liquid as a bridge between the content of your Shopify store (products, collections, customer data, etc.) and the HTML that creates the visual layout of your online store. To achieve that, several components are hard at work.

Shopify Liquid Objects

Shopify Liquid objects expose store data through properties that you can reference in theme templates. For example, product.title retrieves a product’s title, while product.variants provides access to its variants. Understanding Shopify Liquid object properties helps developers display product information, build dynamic collection pages, and customize storefront layouts using the correct Liquid syntax.

You access object data using double curly braces {{ }}.

Product Object: Displays product details.

{{ product.title }}
{{ product.price | money }}
{{ product.description }}

Collection Object: Displays collection-related data.

{{ collection.title }}
{{ collection.description }}

Cart Object: Information about the current cart.

{{ cart.total_price | money }}
{{ cart.item_count }}

Customer Object: Information about a logged-in customer.

{% if customer %}
  {{ customer.first_name | escape }}
  {{ customer.email | escape }}
{% endif %}

(Note: The customer object is available in supported contexts, such as when a customer is logged in. Check that the object exists before accessing its properties.)

Shop Object: Information about the store.

{{ shop.name }}
{{ shop.currency }}

Shopify Liquid Filters

Filters modify an object’s output and are applied after the object, separated by a pipe (|).

Money Filter: Formats a number as currency.

{{ product.price | money }}

Upcase and Downcase Filters: Change text to uppercase or lowercase.

{{ product.title | upcase }}
{{ product.title | downcase }}

Date Filter: Formats a date string.

{{ order.created_at | date: "%A, %B %d, %Y" }}

Escape Filter: Converts special HTML characters into escaped representations, helping prevent text from being interpreted as HTML markup in appropriate output contexts.

{{ search.terms | escape }}

Truncate Filter: Limits the length of a string and appends an ellipsis.

{{ product.description | strip_html | truncate: 100 }}

Link to Filter: Converts a string into a clickable link.

{{ 'Shop Now' | link_to: 'https://example.com' }}

Default Filter: Returns a default value if the object is empty or undefined.

{{ product.description | default: 'No description available' }}

Shopify Liquid Tags

Tags are the programming logic of Liquid. They control the flow of your code and allow you to perform actions like:

• Conditional logic: Displaying different content based on certain conditions (e.g., showing an “Out of Stock” message if a product’s inventory is zero).
• Loops: Repeating a block of code for each item in a list (e.g., displaying all the images for a product).

If Statements: Conditional logic to display content if a condition is true.

{% if product.available %}
  <p>This product is available</p>
{% else %}
  <p>Sorry, this product is out of stock</p>
{% endif %}

For Loop: Loop through objects or arrays (like products, collections, etc.).

{% for product in collection.products %}
  <p>{{ product.title }}</p>
{% endfor %}

Render Tag: The render tag inserts a reusable snippet into a Shopify theme. Unlike the deprecated include tag, render uses an isolated scope, helping make code easier to maintain. You can pass variables explicitly when a snippet needs access to data from its parent template.

{% render 'product-card', product: product %}

Assign Tag: Used to assign a value to a variable.

{% assign my_variable = 'Hello, world!' %}

Case Statements: Used for multiple conditions (like a switch case).

{% case product.type %}
  {% when 'Shirts' %}
    <p>Shirt</p>
  {% when 'Pants' %}
    <p>Pants</p>
  {% else %}
    <p>Other Product</p>
{% endcase %}

Shopify Liquid Loops

For Loop: Loop through a list of items, such as products in a collection.

{% for product in collection.products %}
  <h3>{{ product.title }}</h3>
{% endfor %}

Pagination Loop: Split large collections or search results into multiple pages.

{% paginate collection.products by 12 %}
  {% for product in collection.products %}
    <p>{{ product.title }}</p>
  {% endfor %}
  {% if paginate.previous %}
    <a href="{{ paginate.previous.url }}">Previous</a>
  {% endif %}
  {% if paginate.next %}
    <a href="{{ paginate.next.url }}">Next</a>
  {% endif %}
{% endpaginate %}

Shopify Liquid Conditions

If-Else Statements: Used for conditional logic.

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <button>Out of Stock</button>
{% endif %}

Unless Statement: Opposite of if—executes the code if the condition is false.

{% unless product.available %}
  <p>Sorry, this product is out of stock.</p>
{% endunless %}

Useful Shopify Liquid Variables

Shopify Liquid objects and their properties provide access to store data, page information, product variants, and request details. Their availability depends on the current template and rendering context.

Page: Information about a page created in Shopify admin (Online Store → Pages).

{{ page.title }}

Product Variant: Information about a specific variant of a product.

{{ product.selected_or_first_available_variant.title }}

Request Object: Provides information about the current request, such as the page URL.

{{ request.path }}

By understanding these components, you can better work with Liquid to create a truly customized shopping experience. If you need help with that, get our professional Shopify development services. We’ll ensure the best benefits with the same.

Benefits of Having a Shopify Liquid Cheat Sheet

A Shopify Liquid cheat sheet helps developers quickly find syntax, review code examples, and troubleshoot common theme customizations without repeatedly searching documentation.

Key benefits include:

• Faster development: Find frequently used Liquid objects, tags, filters, and variables quickly.
• Fewer syntax errors: Check delimiters, quotation marks, and expressions before adding code to a theme.
• Easier troubleshooting: Refer to examples when working with conditions, loops, and product data.
• Consistent code: Keep reusable Liquid patterns accessible when building or maintaining Shopify themes.

In essence, this cheat sheet can enhance Shopify Liquid development by promoting efficient coding practices and helping you unlock the full potential of the platform, something our eCommerce website maintenance services can also support you with.

Final Thoughts

Mastering Shopify’s Liquid templating language unlocks significant potential for customizing your online store. This cheat sheet has provided a concise overview of its core components. Objects, which hold your store’s data. Tags, which provide the logic and control flow. And filters, which modify and format that data for display.

By using these objects, tags, and filters correctly, you can write efficient, maintainable Liquid code while delivering a smoother shopping experience.

FAQs on Shopify Liquid Cheat Sheet

1. Is Liquid difficult to learn?

If you have some basic understanding of HTML and programming concepts, Liquid is relatively easy to pick up. A cheat sheet can significantly accelerate the learning process.

2. How can a Shopify Liquid cheat sheet help me?

A cheat sheet provides a quick reference for Liquid syntax and common code snippets, saving you time searching through documentation. It’s especially useful for beginners and for quickly recalling less frequently used syntax.

3. How do I test my Liquid code?

The best way to test your Liquid code is to preview your theme in the Shopify theme editor. You can also use Shopify CLI (shopify theme dev) to preview changes locally and Shopify theme check to find errors.