Your Ultimate Shopify Liquid Cheat Sheet

Struggling to master Liquid syntax for your Shopify store? Tired of digging through complex documentation to find the tags and filters you need? Look no further for your ultimate Shopify Liquid cheat sheet.

Whether you're just starting out building Shopify themes or are a seasoned developer, Liquid can be tricky to grasp. The logic and syntax feel confusing at first. You find yourself constantly Googling how to do basic things like output a variable or iterate through a collection. But fear not, this guide will turn you into a Liquid expert in no time.

In this comprehensive Liquid reference, we’ll condense everything you need to know into one place. You’ll learn how to output dynamic content, transform text, loop through objects, leverage ecommerce data, build templates, and more. Follow along for pro tips and code snippets that will help you use Liquid like a pro. 

Stop wasting hours puzzling over code. With this Shopify Liquid cheat sheet, you’ll work smarter, deliver amazing store experiences, and become a better developer.
‍

‍

TLDR; Your Ultimate Shopify Liquid Cheat Sheet

• Variables ({{ }}) dynamically output content using objects like product and cart
• Filters (|) transform and modify text and data on the fly
• Tags add logic and control flow with if, else, unless, case, and for
• Built-in objects like shop and product provide ecommerce data access
• Templates, snippets, and sections define theme layout and design
• Settings_schema enables customization without coding
• Useful tips for debugging, performance, and Liquid resources
• This complete Shopify Liquid reference guide covers everything you need to know
• Put your new skills into action and start building smarter Liquid themes!

‍

Variables

One of the most important parts of Liquid is using variables. Variables allow you to output dynamic content on your pages. In Liquid, variables are wrapped in double curly braces like {{ this }}.

For example, if you wanted to output the name of the current product, you'd use {{ product.title }}. The variables can come from objects like the shop, product, or cart. You can also assign variables in your Shopify admin and access them.

When outputting variables, you need to be mindful of whitespace and newlines. Shopify will strip extra whitespace which can break your template. It's best practice to trim whitespace from variables to avoid issues.

To access nested properties, you can use dot notation like {{ product.vendor }} and {{ product.variants[0].title }}. This allows you to dig into objects like products and output specific data.

By default, Shopify will HTML escape any variables to prevent security issues. If you need to output an unescaped variable, you can use {{ product.description | raw }} for example.

Learning how to properly leverage variables is the key to building dynamic Liquid templates. With the ability to output all types of objects and properties, you can create powerful shop experiences. Keep this Shopify Liquid cheat sheet handy to reference variable syntax as you build your themes.

‍

Filters

Filters are one of the most useful parts of Liquid. They allow you to transform and modify the output of variables and text strings on the fly. Filters can format text, convert data types, escape/unescape output, and more.

Some commonly used filters are date, money_without_currency, and url_param_escape. You can apply filters using the pipe | symbol like {{ product.title | uppercase }}. This will dynamically convert the product title to uppercase letters.

Filters can also be chained together like {{ product.description | truncatewords: 20 | strip_html }}. This truncates the description to 20 words and strips any HTML tags from the output.

Here are some of the most popular Liquid filters that every Shopify developer should know:

• date - Format a date
• money - Convert a number into money format
• minus - Subtract one number from another
• json - Convert object into JSON format
• underscore - Convert string into snake case with underscores

Shopify has over 60 built-in filters ranging from text formatting to arrays and mathematical operations. Refer to this Shopify Liquid cheat sheet when you need to quickly look up how to apply filters to get the output you need.

The ability to filter and transform data right in your Liquid code keeps your templates clean and dynamic. Don't forget to leverage multiple filters in a chain to combine transformations. Mastering filters will take your Shopify theme development to the next level.

‍

Tags

Liquid tags allow you to add logic and control flow to your templates. They are power tools for building robust Shopify themes.

Some of the most commonly used tags are if, else, and unless. These allow you to conditionally show or hide content. For example:

{% if product.title == "Awesome Shirt" %}

This product is awesome!

{% endif %}

You can also chain if statements with else to handle multiple conditions:

{% if product.available %}

Add to cart

{% else %}

Sold out

{% endif %}

Case statements are another option for complex logic:

{% case product.type %}

{% when 'Shirt' %}

Shirt details

{% when 'Hat' %}

Hat details

{% endcase %}

For loops let you iterate through collections of products, articles, customers, and more:

{% for product in collection.products %}

{{ product.title }}

{% endfor %}

As you can see, Liquid tags open up tons of possibilities for custom store experiences. Refer to this Shopify Liquid cheat sheet anytime you need a quick example of tags for logic and flow control.

‍

Objects

Liquid provides a number of built-in objects that let you access ecommerce data in your Shopify themes.

The shop object contains info like name, url, money_format, and description. For example {{ shop.name }} will output your store name.

The cart object lets you show cart count, items, and more. {% if cart.item_count > 0 %}Display cart{% endif %}

The customer object provides access to first_name, last_name, orders_count, and other customer data if they are logged in. You can customize experiences for logged in customers this way.

For products, you can use product.title, product.description, product.images, and more. Dig into variants with product.variants to show options.

The line_item object contains cart item info like quantity and properties. The products array lets you access each line item's product.

You can also access custom metafields using Liquid. For example:

{% if product.metafields.namespace.key %}

{{ product.metafields.namespace.key }}

{% endif %}

These built-in objects allow you to leverage the full Shopify data model in your templates. Keep this Shopify Liquid cheat sheet bookmarked to look up how to access key objects as you build your themes.

‍

Theme Development

A key part of building Shopify themes is constructing templates, snippets, and sections to define the theme layout and design.

Templates control overall page layout. For example, the product.liquid template outputs a product page. The homepage is controlled by index.liquid. You can build custom templates like about-us.liquid or blog.liquid.

Snippets are reusable components that can be included in templates with {% include %}. For example, you may have a featured-product.liquid snippet to showcase a product that gets included on the homepage.

Sections allow you to create areas of pages that store owners can customize. For example, you can have a featured-products section the merchant can add/remove from templates.

Another aspect of theme development is customization. You can use settings_schema to let merchants customize things like colors, fonts, and text without coding.

Finally, working with assets like CSS, JS, images, and icons is crucial. Utilize the theme editor and CDN to manage assets efficiently.

Refer to this Shopify Liquid cheat sheet when building out custom templates, snippets, sections, schema, and assets for your theme.

‍

Tips and Tricks

Here are some handy tips and tricks to help you master Liquid as you build Shopify themes and apps:

Debugging - Output Liquid tags and variables to the browser as you develop:

{% comment %}

Message will not be rendered

{% endcomment %}

{{ product.title }}

Performance - Limit for loops, use eager loading, cache variables to improve speed.

{% assign image = product.featured_image %}

{{ image }}

Tools - Use the Liquid playground to test code snippets live. Install apps like Hydrogen for Atom.

Resources:

Liquid documentation - https://shopify.dev/api/liquid

Liquid forum - https://community.shopify.com/c/Shopify-Discussion/bd-p/ecommerce-discussion

Shopify courses - https://academy.shopify.com

This Shopify Liquid cheat sheet summarizes key tips to optimize your Liquid coding and access helpful resources to continue learning.

Keep these tips handy as you develop dynamic Liquid templates, sections, and apps for the Shopify platform. Smart use of Liquid will allow you to build custom store experiences that drive sales and conversions.

Key Takeaways: Your Ultimate Shopify Liquid Cheat Sheet

With this comprehensive reference guide, you now have all the Liquid knowledge needed to build powerful Shopify themes. No more digging through dense docs or guessing how syntax works. The key concepts, tags, filters, objects, and snippets have been condensed into one easy cheat sheet.

We walked through real-world examples that demonstrate how Liquid can create dynamic, custom store experiences that drive sales. You learned how to output variables, transform text, control logic, access data, build templates, and optimize performance.

Our Shopify Liquid crash course equipped you with pro tips and code samples to level up your skills. Put this newfound expertise into action on your existing or next theme project. Build smarter Liquid templates that engage customers and grow your business. The possibilities are endless when you master the Liquid language. Thanks for reading and happy coding!