Shopify Liquid Filters — Complete Reference Guide
Liquid filters transform output inside double-brace tags. You chain them with the pipe character (|). This page covers every filter you will encounter in Shopify theme development—string, number, array, date, URL, color, math, and HTML/media—with concise input → output examples you can copy straight into your templates. If you're new to Liquid, our beginner's guide covers the fundamentals. For a quick-reference of all Liquid syntax, see the cheat sheet.
String Filters
append
Appends a string to the end of another string.
{{ "shop" | append: ".myshopify.com" }}
<!-- Output: shop.myshopify.com -->prepend
Prepends a string to the beginning of another string.
{{ "liquid" | prepend: "shopify-" }}
<!-- Output: shopify-liquid -->capitalize
Capitalizes the first character of a string.
{{ "hello world" | capitalize }}
<!-- Output: Hello world -->upcase
Converts every character in a string to uppercase.
{{ "Shopify Liquid" | upcase }}
<!-- Output: SHOPIFY LIQUID -->downcase
Converts every character in a string to lowercase.
{{ "Shopify Liquid" | downcase }}
<!-- Output: shopify liquid -->strip
Removes all whitespace from the left and right sides of a string.
{{ " hello " | strip }}
<!-- Output: hello -->lstrip
Removes whitespace from the left (leading) side of a string.
{{ " hello " | lstrip }}
<!-- Output: hello -->rstrip
Removes whitespace from the right (trailing) side of a string.
{{ " hello " | rstrip }}
<!-- Output: hello -->strip_html
Strips all HTML tags from a string, leaving only the text content.
{{ "<p>Hello <b>World</b></p>" | strip_html }}
<!-- Output: Hello World -->strip_newlines
Removes all newline characters from a string.
{{ product.description | strip_newlines }}
<!-- Output: all on one line -->replace
Replaces every occurrence of the first argument with the second argument.
{{ "I love cats and cats love me" | replace: "cats", "dogs" }}
<!-- Output: I love dogs and dogs love me -->replace_first
Replaces only the first occurrence of the first argument with the second argument.
{{ "I love cats and cats love me" | replace_first: "cats", "dogs" }}
<!-- Output: I love dogs and cats love me -->remove
Removes every occurrence of the given substring from a string.
{{ "Hello World" | remove: "World" }}
<!-- Output: Hello -->remove_first
Removes only the first occurrence of the given substring from a string.
{{ "one two one three" | remove_first: "one" }}
<!-- Output: two one three -->truncate
Truncates a string down to the given number of characters. An ellipsis (…) is appended and counts toward the character limit.
{{ "The quick brown fox jumps over" | truncate: 15 }}
<!-- Output: The quick br... -->truncatewords
Truncates a string to the given number of words, then appends an ellipsis.
{{ "The quick brown fox jumps over the lazy dog" | truncatewords: 4 }}
<!-- Output: The quick brown fox... -->split
Splits a string into an array using the given delimiter. The resulting array can be looped over or joined back together.
{% assign fruits = "apple,banana,cherry" | split: "," %}
{% for fruit in fruits %}
{{ fruit }}
{% endfor %}
<!-- Output: apple banana cherry -->url_encode
Percent-encodes a string so it can be safely used inside a URL.
{{ "hello world & goodbye" | url_encode }}
<!-- Output: hello+world+%26+goodbye -->url_decode
Decodes a percent-encoded URL string back to its original form.
{{ "hello+world+%26+goodbye" | url_decode }}
<!-- Output: hello world & goodbye -->handle / handleize
Converts a string into a URL-friendly handle. Spaces become hyphens, special characters are removed, and the result is lowercased. Both handle and handleize produce the same result.
{{ "100% Organic Cotton T-Shirt" | handleize }}
<!-- Output: 100-organic-cotton-t-shirt -->
{{ product.title | handle }}
<!-- Same result -->newline_to_br
Replaces every newline character in a string with an HTML <br> tag. Useful for rendering multi-line text fields in HTML.
{{ product.description | newline_to_br }}
<!-- "Line one\nLine two" becomes "Line one<br>Line two" -->escape
Escapes HTML entities in a string, converting characters like <, >, &, and " into their safe HTML-entity equivalents.
{{ "<p>Hello & welcome</p>" | escape }}
<!-- Output: <p>Hello & welcome</p> -->Number Filters
plus
Adds a number to another number.
{{ 4 | plus: 2 }}
<!-- Output: 6 -->minus
Subtracts a number from another number.
{{ 10 | minus: 3 }}
<!-- Output: 7 -->times
Multiplies a number by another number.
{{ 5 | times: 4 }}
<!-- Output: 20 -->divided_by
Divides a number by the given divisor. When both operands are integers, the result is floored to an integer.
{{ 20 | divided_by: 7 }}
<!-- Output: 2 (integer division) -->
{{ 20 | divided_by: 7.0 }}
<!-- Output: 2.857142857142857 -->modulo
Returns the remainder of dividing a number by another number.
{{ 12 | modulo: 5 }}
<!-- Output: 2 -->ceil
Rounds a number up to the nearest integer.
{{ 1.2 | ceil }}
<!-- Output: 2 -->floor
Rounds a number down to the nearest integer.
{{ 2.9 | floor }}
<!-- Output: 2 -->round
Rounds a number to the nearest integer, or to the specified number of decimal places.
{{ 2.5 | round }}
<!-- Output: 3 -->
{{ 1.2345 | round: 2 }}
<!-- Output: 1.23 -->abs
Returns the absolute value of a number.
{{ -5 | abs }}
<!-- Output: 5 -->money
Formats a number as a monetary amount using the store's currency settings. The input should be in cents (or the smallest currency unit).
{{ 1999 | money }}
<!-- Output: $19.99 -->
{{ product.price | money }}money_with_currency
Formats a number as a monetary amount and appends the currency code.
{{ 1999 | money_with_currency }}
<!-- Output: $19.99 USD -->money_without_trailing_zeros
Formats a number as a monetary amount but drops trailing zeros after the decimal point when the cents portion is .00.
{{ 2000 | money_without_trailing_zeros }}
<!-- Output: $20 -->
{{ 2050 | money_without_trailing_zeros }}
<!-- Output: $20.50 -->Array Filters
join
Joins the elements of an array into a single string, separated by the given delimiter.
{% assign tags = product.tags %}
{{ tags | join: ", " }}
<!-- Output: sale, new, featured -->first
Returns the first element of an array.
{{ product.images | first }}
<!-- Returns the first image object -->
{% assign colors = "red,blue,green" | split: "," %}
{{ colors | first }}
<!-- Output: red -->last
Returns the last element of an array.
{% assign colors = "red,blue,green" | split: "," %}
{{ colors | last }}
<!-- Output: green -->size
Returns the number of elements in an array or the number of characters in a string.
{{ product.tags | size }}
<!-- Output: 3 -->
{{ "hello" | size }}
<!-- Output: 5 -->sort
Sorts the elements of an array in ascending order. For arrays of objects, pass the property name to sort by.
{% assign sorted = collection.products | sort: "price" %}
{% for product in sorted %}
{{ product.title }} - {{ product.price | money }}
{% endfor %}sort_natural
Sorts elements of an array in a case-insensitive order.
{% assign names = "Charlie,alice,Bob" | split: "," %}
{{ names | sort_natural | join: ", " }}
<!-- Output: alice, Bob, Charlie -->reverse
Reverses the order of the elements in an array.
{% assign nums = "1,2,3" | split: "," %}
{{ nums | reverse | join: ", " }}
<!-- Output: 3, 2, 1 -->map
Extracts a single named property from each object in an array, returning a new array of just those values.
{% assign titles = collection.products | map: "title" %}
{{ titles | join: ", " }}
<!-- Output: T-Shirt, Hoodie, Cap -->where
Filters an array to include only objects where the specified property matches the given value. If no value is supplied, it returns objects where the property is truthy.
{% assign available = collection.products | where: "available" %}
<!-- Products where available is truthy -->
{% assign shirts = collection.products | where: "type", "Shirt" %}
<!-- Only products with type == "Shirt" -->concat
Concatenates (combines) two arrays into a single array.
{% assign a = "1,2" | split: "," %}
{% assign b = "3,4" | split: "," %}
{% assign combined = a | concat: b %}
{{ combined | join: ", " }}
<!-- Output: 1, 2, 3, 4 -->uniq
Removes duplicate elements from an array.
{% assign dupes = "a,b,a,c,b" | split: "," %}
{{ dupes | uniq | join: ", " }}
<!-- Output: a, b, c -->compact
Removes all nil (empty) values from an array.
{% assign pages = site.pages | map: "category" | compact %}
{{ pages | join: ", " }}
<!-- nil values removed -->Date Filters
date
Formats a date using strftime-style format strings. In Shopify, dates are typically attached to objects like article.created_at or order.created_at. You can also use the special value "now" to get the current date and time.
<!-- Full date: January 15, 2025 -->
{{ article.created_at | date: "%B %d, %Y" }}
<!-- Short date: 01/15/25 -->
{{ article.created_at | date: "%m/%d/%y" }}
<!-- ISO 8601: 2025-01-15 -->
{{ article.created_at | date: "%Y-%m-%d" }}
<!-- Time: 3:30 PM -->
{{ article.created_at | date: "%l:%M %p" }}
<!-- Day and month: Wed, Jan 15 -->
{{ article.created_at | date: "%a, %b %d" }}
<!-- Current year -->
{{ "now" | date: "%Y" }}Common Date Format Strings
Here is a quick reference of the most-used format directives in Shopify Liquid date filters:
| Directive | Meaning | Example |
|---|---|---|
%Y | 4-digit year | 2025 |
%y | 2-digit year | 25 |
%B | Full month name | January |
%b | Abbreviated month | Jan |
%m | Month number (01–12) | 01 |
%d | Day of month (01–31) | 15 |
%e | Day of month (no leading zero) | 5 |
%A | Full weekday name | Wednesday |
%a | Abbreviated weekday | Wed |
%H | Hour (24-hour, 00–23) | 15 |
%I | Hour (12-hour, 01–12) | 03 |
%l | Hour (12-hour, no leading zero) | 3 |
%M | Minute (00–59) | 30 |
%S | Second (00–59) | 45 |
%p | AM/PM | PM |
URL Filters
asset_url
Returns the full Shopify CDN URL for a file in the theme's assets directory.
{{ "style.css" | asset_url }}
<!-- Output: //cdn.shopify.com/s/files/1/0001/assets/style.css?v=... -->
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">asset_img_url
Returns the CDN URL for an image in the theme's assets directory. You can optionally pass a size parameter.
{{ "logo.png" | asset_img_url: "300x" }}
<!-- Output: //cdn.shopify.com/.../logo_300x.png -->img_url
Returns a resized version of a product image, collection image, or any Shopify-hosted image. The size parameter controls the dimensions.
<!-- Width only (height auto) -->
{{ product.featured_image | img_url: "400x" }}
<!-- Exact dimensions -->
{{ product.featured_image | img_url: "400x300" }}
<!-- Named sizes -->
{{ product.featured_image | img_url: "small" }}
{{ product.featured_image | img_url: "medium" }}
{{ product.featured_image | img_url: "large" }}
{{ product.featured_image | img_url: "master" }}link_to
Wraps a URL string in an HTML <a> anchor tag. The first argument is the link text, and you can optionally pass a title.
{{ "/collections/all" | link_to: "View all products", "Browse our catalog" }}
<!-- Output: <a href="/collections/all" title="Browse our catalog">View all products</a> -->url_for_type
Returns the URL for a collection page that filters products by the given product type.
{{ "Shirts" | url_for_type }}
<!-- Output: /collections/types?q=Shirts -->url_for_vendor
Returns the URL for a collection page that filters products by the given vendor.
{{ "Nike" | url_for_vendor }}
<!-- Output: /collections/vendors?q=Nike -->within
Prepends a collection URL to a product URL so the “back to collection” link on the product page returns the customer to the correct collection.
<a href="{{ product.url | within: collection }}">
{{ product.title }}
</a>
<!-- Output: /collections/summer-sale/products/cool-hat -->Color Filters
color_to_rgb
Converts a CSS color value to its rgb() representation.
{{ "#ff6600" | color_to_rgb }}
<!-- Output: rgb(255, 102, 0) -->
{{ "hsl(25, 100%, 50%)" | color_to_rgb }}
<!-- Output: rgb(255, 106, 0) -->color_to_hsl
Converts a CSS color value to its hsl() representation.
{{ "#ff6600" | color_to_hsl }}
<!-- Output: hsl(24, 100%, 50%) -->color_to_hex
Converts a CSS color value to its hexadecimal representation.
{{ "rgb(255, 102, 0)" | color_to_hex }}
<!-- Output: #ff6600 -->color_lighten
Lightens a color by the given percentage (0–100).
{{ "#ff6600" | color_lighten: 20 }}
<!-- Output: #ff9c52 -->color_darken
Darkens a color by the given percentage (0–100).
{{ "#ff6600" | color_darken: 20 }}
<!-- Output: #993d00 -->color_modify
Modifies a specific component of a color. The first argument is the component name (red, green, blue, hue, saturation, lightness, or alpha) and the second is the new value.
{{ "#ff6600" | color_modify: "alpha", 0.5 }}
<!-- Output: rgba(255, 102, 0, 0.5) -->
{{ "#ff6600" | color_modify: "red", 0 }}
<!-- Output: #006600 -->color_brightness
Returns the perceived brightness of a color as a decimal between 0 and 255. Useful for choosing text color based on a dynamic background.
{% assign brightness = settings.bg_color | color_brightness %}
{% if brightness > 128 %}
{% assign text_color = "#000000" %}
{% else %}
{% assign text_color = "#ffffff" %}
{% endif %}Math Filters
at_least
Ensures the value is at least the given minimum. If the input is less than the argument, the argument is returned instead.
{{ 3 | at_least: 5 }}
<!-- Output: 5 -->
{{ 8 | at_least: 5 }}
<!-- Output: 8 -->at_most
Ensures the value is at most the given maximum. If the input is greater than the argument, the argument is returned instead.
{{ 8 | at_most: 5 }}
<!-- Output: 5 -->
{{ 3 | at_most: 5 }}
<!-- Output: 3 -->HTML / Media Filters
img_tag
Generates a complete HTML <img> tag from an image URL. You can pass alt text and an optional CSS class.
{{ "logo.png" | asset_url | img_tag: "Site Logo", "logo-img" }}
<!-- Output: <img src="//cdn.shopify.com/.../logo.png" alt="Site Logo" class="logo-img" /> -->script_tag
Wraps a URL in an HTML <script> tag.
{{ "shop.js" | asset_url | script_tag }}
<!-- Output: <script src="//cdn.shopify.com/.../shop.js" type="text/javascript"></script> -->stylesheet_tag
Wraps a URL in an HTML <link> stylesheet tag.
{{ "theme.css" | asset_url | stylesheet_tag }}
<!-- Output: <link href="//cdn.shopify.com/.../theme.css" rel="stylesheet" type="text/css" media="all" /> -->payment_type_img_url
Returns the URL of the SVG image for a given payment type. Commonly used inside a loop over shop.enabled_payment_types.
{% for type in shop.enabled_payment_types %}
<img
src="{{ type | payment_type_img_url }}"
alt="{{ type }}"
width="38"
height="24"
/>
{% endfor %}Related Guides
Shopify Liquid Cheat Sheet
Quick-reference for tags, objects, and filters.
Shopify Liquid for Beginners
Learn what Liquid is and write your first template code.
If/Else & Loops Guide
Master conditionals and iteration in Liquid templates.
Liquid Code Examples
15+ real-world Shopify Liquid code examples by use case.
We're building an AI Liquid code generator — join the waitlist.
Get early access when we launch. No spam, just one email.