shopify liquid cheat sheet

2025

3 min read

·

29-03-2025

16

0

Share

Meta Description: Unlock the power of Shopify Liquid! This cheat sheet provides a comprehensive guide to Liquid syntax, objects, filters, and tags, empowering you to customize your Shopify theme and build unique online stores. Master Liquid's core concepts, from basic syntax to advanced techniques, with clear examples and practical applications. Boost your Shopify store's functionality and design with this essential resource.

This cheat sheet will cover the essentials of Shopify Liquid, allowing you to customize your store's theme effectively. We'll explore the fundamental building blocks, including objects, tags, filters, and control flow, with practical examples to illustrate each concept.

Understanding Shopify Liquid

Shopify Liquid is a templating language that allows you to dynamically create content on your Shopify store. It combines HTML, CSS, and JavaScript with its own unique syntax. Mastering Liquid is crucial for customizing your theme's appearance and functionality beyond the built-in options. Think of it as the engine driving your store's visual presentation and data display.

Core Components of Liquid

Liquid's power lies in its three main components:

• Objects: These are the data sources, providing information about your store, products, collections, and customers. Think of them as containers holding the information you want to display. Common objects include product, collection, customer, and cart.
• Tags: These control the logic and structure of your code. They tell Liquid what to do, often manipulating objects or creating loops. They're identified by curly braces and percentage signs: {% tag %}.
• Filters: These modify the output of objects. They change how data is presented, like formatting numbers, dates, or text. They're used within curly braces: {{ object | filter }}.

Basic Liquid Syntax

Let's delve into the basic syntax with examples:

Objects

Accessing object properties is straightforward. You use a dot (.) to access properties within an object:

{{ product.title }}  <!-- Displays the product title -->
{{ product.price }}   <!-- Displays the product price -->
{{ collection.title }} <!-- Displays the collection title -->

Tags

Tags are used to control the flow of your code, create loops, and include sections.

• for loops: Iterate over arrays or collections.

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

• if statements: Perform conditional logic.

{% if product.available %}
  <p>In stock</p>
{% else %}
  <p>Sold out</p>
{% endif %}

• include: Include snippets of code from other files.

{% include 'product-card' %}

• assign: Create variables to store values.

{% assign myVariable = "Hello World" %}
{{ myVariable }}

Filters

Filters modify the output of an object.

• date: Formats dates.

{{ '2024-03-08' | date: '%Y-%m-%d' }} <!-- Output: 2024-03-08 -->

• money: Formats currency.

{{ product.price | money }} <!-- Output: $29.99 -->

• truncate: Truncates text to a specific length.

{{ product.description | truncate: 80 }} <!-- Truncates description to 80 characters -->

• capitalize: Capitalizes the first letter of a string.

{{ 'hello world' | capitalize }} <!-- Output: Hello world -->

Advanced Liquid Techniques

Let's explore some more advanced techniques that can significantly enhance your theme customization.

Working with Arrays

Arrays are lists of items, often used to display product collections or features. You can access array elements using their index (starting from 0):

{% assign myArray = 'apple', 'banana', 'cherry' %}
{{ myArray[0] }}  <!-- Output: apple -->
{{ myArray[1] }}  <!-- Output: banana -->

You can also iterate through arrays using for loops:

{% for item in myArray %}
  <li>{{ item }}</li>
{% endfor %}

Conditional Statements (Beyond Basic if)

Liquid supports unless, elsif, and nested if statements for more complex conditional logic.

{% unless product.available %}
  <p>This product is currently unavailable.</p>
{% endunless %}

{% if product.price > 100 %}
  <p>Luxury Item</p>
{% elsif product.price > 50 %}
  <p>Mid-Range Item</p>
{% else %}
  <p>Budget-Friendly Item</p>
{% endif %}

Custom Objects and Variables

You can create your own custom objects and variables to simplify complex logic and reuse data across your theme.

{% assign myCustomObject = { name: 'My Object', value: 10 } %}
{{ myCustomObject.name }}
{{ myCustomObject.value }}

Troubleshooting and Best Practices

Debugging Liquid can be tricky, but Shopify provides helpful tools. Remember to:

• Use the Liquid debugger: Shopify's theme editor has a built-in debugger to help pinpoint errors.
• Comment your code: This makes your code easier to understand and maintain.
• Test thoroughly: Always test your changes on a development store before deploying them to your live store.
• Keep it simple: Avoid overly complex Liquid code, as it can make your theme harder to maintain.

Conclusion

This cheat sheet provides a solid foundation for mastering Shopify Liquid. With practice and a grasp of these core concepts, you can unlock the full potential of theme customization, creating a unique and engaging online store experience. Remember to consult Shopify's official Liquid documentation for the most up-to-date information and a complete reference. Happy coding!