Store Filters
These filters are used for working with store-related data in Liquid templates. They help generate asset URLs, create links, format prices, and handle translations. Use these filters to manage store assets, display product information, and support localization in your storefront.
asset_url
Get URL for theme asset file. If you have a JSON cache manifest file in the public directory of your theme, the cached index is automatically retrieved.
public/cache.manifest.json
{
"js/cache-broken.js" => "js/cache-broken.234adsdsf2341234.js"
}
Input
{{ 'image/my-asset.png' | asset_url }}
{{ 'main.css' | asset_url }}
{{ 'js/cache-broken.js' | asset_url }}
Output
https://www.mystore.com/theme/aurora/ea363c5c4b8a3021fe05d164d00be805/image/my-asset.png
https://www.mystore.com/theme/aurora/ea363c5c4b8a3021fe05d164d00be805/main.css
https://www.mystore.com/theme/aurora/ea363c5c4b8a3021fe05d164d00be805/js/cache-broken.js
full_url
Completes relative urls to absolute URLs.
Input
{{ "/my/store/path" | full_url }}
Output
https://www.mystore.com//my/store/path
is_ico
Test if value is a .ico file.
link
Creates a link to store resource.
Input
{{ product | link }}
Output
https://www.mystore.com/product/my-product
link_to_within
Creates a category-aware URL for the product and wraps the links in anchor element
Input
{{ product | link_to_within: category }}
Output
<a href="https://www.mystore.com/products/my-product?category=my-category" title="My Product Title">My Product Title</a>
money
Rounds the given amount in currenct display currency.
Input
{{ 3.45234 | money }}
Output
3.45
money_in_smallest
Returns the given amount in the smallest currency unit.
Input
{{ 3.45234 | money_in_smallest }}
Output
345
money_with_currency
Returns the amount in current display currency rounded and formatted.
Input
{{ 3.45234 | money_with_currency }}
Output
3.45 €
query_params
Return a array containing query params from given url.
Input
{{ 'https://www.mystore.com/products/my-product?width=32&height=45' | query_params }}
svg_tag
Renders a SVG from public directory of your theme.
Input
{{ 'icon' | svg_tag}}
Output
<svg viewBox="0 0 525 525" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg"><!-- SVG definition --></svg>
For more advanced usage, you can define SVG attributes as filter parameters and set a CSS class for the svg
element.
Input
{{ 'icon' | svg_tag: stroke:'blue', width: 20, height: 20, class: 'my-svg-class' }}
Output
<svg className="my-svg-class" width="20" height="20" viewBox="0 0 525 525" fill="none" stroke="blue" xmlns="http://www.w3.org/2000/svg"><!-- SVG definition --></svg>
t
Retrieve a translation with given key from the locale file for the active locale.
Input
{{ "add_to_cart" | t }}
{{ "sold_out" | t: title: product.title }}
Output
Add to cart
Product Jeans is sold out
weight_with_unit
Returns the weight for a product with unit.
Input
{{ product | weight_with_unit }}
Output
3,4 kg
within
Creates a category-aware URL for the product.
Input
{{ product_url = product | within: category }}
Output
https://www.mystore.com/products/my-product?category=my-category