Shopify Liquid Cheat Sheet: Top Elements to Know About

Store owners often find themselves limited by the standard options, unable to implement specific design tweaks or dynamic content displays crucial for branding and conversions. Speaking from some experience (actually a lot of it), that can be frustrating.

In that case, ‘Liquid’ can be helpful for customizing the Shopify store in any way, whether it’s with a custom theme or just a custom code to the store.

This templating language helps you with the lack of control over the branding and conversions. So let’s see what Liquid is and how Shopify experts go about using it.

What is Shopify Liquid?

Liquid is an open-source, Ruby-based template language created by Shopify. It is used to load dynamic content on storefronts, enabling you to pull data from your store, like products, collections, customer information, and more. Liquid code is mostly made up of three components, i.e. objects, tags, and filters, along with a few others.

• Objects: These are containers for data (e.g., product.title would be the title of a product). Placeholders for dynamic content, enclosed in curly braces {{ }}.
• Tags: These are the programming logic that controls how the data is displayed (e.g., loops to display multiple products, conditional statements to show different content based on certain criteria). Control the logic of the page, enclosed in {% %}.
• Filters: These modify the output of objects (e.g., formatting a price as currency, changing text to uppercase). Modify the output of objects, placed within an object like {{ product.title | upcase }}.

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

Let’s discuss these components and more in detail.

Key Components of Shopify Liquid

Think of 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, there are some components hard at work.

Shopify Liquid Objects

Objects are like containers that hold data within your Shopify store. This data can be anything from product information (title, price, description) to shop settings (name, currency) or even customer details.

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

Product Object: Displays details about a product.

{{ 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.

{{ customer.first_name }}
{{ customer.email }}

Shop Object: Information about the store.

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

Shopify Liquid Filters

Filters modify the output of an object and are applied after the object, separated by a pipe |.

Money Filter: Formats a number as currency.

{{ product.price | money }}

Upcase and Downcase Filters: Changes 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: Escapes HTML characters to prevent XSS attacks.

{{ product.description | escape }}

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

{{ product.description | 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 %}

Include Tag: Used to include reusable snippets of code (Liquid files).

{% include 'header' %}

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: Loop through multiple pages of results (useful for large collections or search results).

{% 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 %}
{% 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

These are variables that you can access in your store:

Current Page: Information about the current page.

{{ page.title }}

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

{{ product.variants.first.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 for creating a truly customized, unique 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 offers several key benefits for both beginners and experienced developers working with the Shopify platform:

For Beginners

• Faster Learning Curve: A cheat sheet provides a quick reference for essential Liquid syntax, objects, tags, and filters, accelerating the learning process. Instead of constantly digging through documentation, beginners can quickly find the code snippets they need.   
• Reduced Frustration: Liquid’s syntax can be confusing at first. A cheat sheet helps avoid common errors and syntax mistakes, leading to a smoother and less frustrating development experience.
• Practical Examples: Good cheat sheets include practical examples, demonstrating how Liquid elements are used in real-world scenarios. This helps beginners understand the context and application of different code snippets.
• Increased Confidence: Having a readily available reference builds confidence and encourages beginners to experiment with Liquid and explore its capabilities.

For Experienced Developers

• Time Savings: Even experienced developers don’t memorize every single Liquid element. A cheat sheet serves as a handy reminder for less frequently used syntax or filters, saving valuable development time.   
• Improved Efficiency: Quickly accessing code snippets and syntax rules streamlines the development workflow, allowing developers to focus on solving problems and building features rather than searching for documentation.   
• Consistency and Best Practices: A well-structured cheat sheet can reinforce best practices and ensure consistent coding style across projects.
• Quick Troubleshooting: When encountering errors or unexpected behavior, a cheat sheet can be a valuable tool for quickly checking syntax and identifying potential issues.

In essence, this cheat sheet can improve Shopify Liquid development. It promotes efficient coding practices and ensures you can get the full potential of the Shopify platform. Our eCommerce consulting services could help you with it.

FAQs on Shopify Liquid Cheat Sheet

Let’s Summarize

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 adhering to best practices—like code organization, performance optimization, and security considerations—you can write efficient, maintainable Liquid code.If you need help with understanding and using the cheat sheet for your store, let’s have a consultation today!