Liquid is the templating language used to build Shopify themes. While there are plenty of customization options available on Shopify that don’t require you to mess with any code, you might not be able to create exactly the store you want unless you know Liquid.
Indeed, once you understand how to write Liquid code, you’ll have full control over just about every aspect of your Shopify store’s design.
In this guide, we’ll review one of the most powerful parts of the Liquid language: Shopify Liquid filters.
To fully explain Shopify Liquid filters, we must first go over some of the key details that you should know about the Shopify Liquid language in general.
Like any templating language, Liquid acts as a bridge between an HTML file and a data repository (in this case, the data repository is your Shopify store). This allows Shopify to receive requests from the visitors on your site and dynamically generate whatever file is needed for each end user, accounting for factors such as where the visitor is located, what page they’re on, which product they’re viewing, etc.
To access the Liquid files that make up your Shopify theme, simply follow these steps:
If you’re already familiar with HTML, then you’ll recognize much of the contents of any given Liquid file. For example, the main-product.liquid file contains common HTML tags such as <p> for paragraphs, <style> for CSS code, and <button> for, well, buttons.
Anything you can do in HTML you can also do in Liquid. The difference between HTML and Liquid is that Liquid offers some expanded functionality, such as the double curly bracket delimiters — {{ }} — that are used for denoting output.
These delimiters make it possible to use one Liquid file for many different pages. For example, instead of making a new file for every single one of your product pages, you can use Liquid elements such as {{ product.handle }}, {{ product.price }}, etc. in one template file — the appropriate data will then be automatically populated depending on which specific product the end user is viewing.
And that brings us to filters. With filters, you can make changes to your data as it is pulled from your Shopify store information. To filter how data is output on your theme, you need to add a pipe character — | — inside the double curly brackets, then add whichever particular filter you would like to use. It’s also worth noting that you can apply multiple filters to the same output.
Take, for example, this line in our main-product.liquid file:
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
The CSS file referenced here resides in the “Assets” folder of our theme files. The asset_url filter returns the URL path of this file, and the stylesheet_tag filter generates a link tag that points to the given stylesheet — together, these two filters help create a fully formed style element in our main-product.liquid file.
Shopify Liquid filters give you more control over your data, and they can also reduce the amount of code that you need to write for your store.
To give you an even better idea of what these filters can do for you, we’ll review 20 of the most commonly used filters in the table below. For each of these filters, we’ll also provide a code example so that you know how to apply the filter in your own theme files.
| Filter | Purpose | Example Code | Example Output |
| date | Specifies which formatting style should be used when displaying a date. | {{ ‘now’ | date: ‘%B %d, %Y’ }} | September 27, 2024 |
| money | Formats a given price based on your store’s “HTML without currency” settings. | {{ product.price | money }} | $20.00 |
| money_with_currency | Formats a given price based on your store’s “HTML with currency” settings. | {{ product.price | money_with_currency }} | $20.00 USD |
| money_without_trailing_zeros | Formats a given price based on your store’s “HTML without currency” settings, excluding the decimal point and trailing zeros. | {{ product.price | money_without_trailing_zeros }} | $20 |
| upcase | Converts text into uppercase. | {{ product.title | upcase }} | CANDLE TWO-PACK |
| downcase | Converts text into lowercase. | {{ product.title | downcase }} | candle two-pack |
| capitalize | Capitalizes the first word in a string of text. | {{ product.title | capitalize }} | Candle two-pack |
| replace | Replaces all occurrences of a substring with a given string. | {{ product.title | replace: ‘-‘, ‘ ‘ }} | Candle two pack |
| truncate | Truncates a string of text down to a certain number of characters, followed by an ellipsis (which is included in the character count). | {{ article.title | truncate: 20 }} | How To Use Shopif… |
| truncatewords | Truncates a string of text down to a certain number of words, followed by an ellipsis. | {{ article.content | truncatewords: 12 }} | Liquid is the templating language used to build Shopify themes. While there… |
| url_encode | Converts each URL-unsafe character into its percent-encoded equivalent. | {{ ‘contact@store.com’ | url_encode }} | contact%40store.com |
| url_decode | Decodes any percent-encoded characters. | {{ ‘contact%40store.com’ | url_decode }} | contact@store.com |
| link_to | Generates an HTML tag. | {{ ‘Your Store’ | link_to: ‘https://www.yourstore.com’ }} | <a href=”https://www.yourstore.com” title=”” rel=”nofollow”>Your Store</a> |
| link_to_type | Generates an HTML tag linking to a collection page for all products of a certain type. | {{ ‘Shoes’ | link_to_type }} | <a href=”/collections/types?q=Shoes” title=”Shoes”>Shoes</a> |
| link_to_vendor | Generates an HTML tag linking to a collection page for all products from a certain vendor. | {{ ‘Nike’ | link_to_type }} | <a href=”/collections/vendors?q=Nike” title=”Nike”>Nike</a> |
| sort_by | Generates a collection URL with a given sort_by parameter added to the end (this filter only works on collection URLs) | {{ collection.url | sort_by: ‘best-selling’ }} | /collections/shoes?sort_by=best-selling |
| customer_login_link | Generates an HTML tag for the customer login page. | {{ ‘Log in’ | customer_login_link }} | <a href=”/account/login” id=”customer_login_link”>Log in</a> |
| customer_logout_link | Generates an HTML tag for logging the customer out of their account (the customer will then be redirected to your homepage). | {{ ‘Log out’ | customer_logout_link }} | <a href=”/account/logout” id=”customer_logout_link”>Log out</a> |
| customer_register_link | Generates an HTML tag for your customer registration page. | {{ ‘Create an account’ | customer_register_link }} | <a href=”/account/register” id=”customer_register_link”>Create an account</a> |
| default | Sets a default value for whenever a variable turns up a value of empty, false, or nil. | {{ product.selected_variant.url | default: product.url }} | /products/candle-two-pack |
For more information about filters, check out the official Shopify Cheat Sheet — this is one of the most comprehensive Shopify development resources available.
It should also be noted that Shogun offers a way for you to add your own custom-coded content.
Shogun’s visual editor provides you with a wide variety of pre-made elements that you can use to quickly build Shopify pages, including everything from text, images, and video to accordion menus, interactive maps, and countdown clocks.
But there’s a chance you might not be able to find some features that you want to use on your page in the elements library. In that case, you can always use Custom Elements to add it yourself:
Once you’ve created a Custom Element, you’ll be able to access it in the elements library of the visual editor, allowing you to add it to any Shopify page with just a couple clicks.
This allows you to benefit from the convenience of Shogun’s pre-made elements while still retaining the flexibility to custom-code solutions for your store whenever it may be necessary. You’ll be able to optimize your product pages, landing pages, Contact Us page, and every other part of your Shopify store.
