Additional Filters
These filters provide extra utility functions for working with variables in Liquid templates. They help with setting default values, formatting file sizes, rendering placeholder SVGs, and converting values to booleans or numbers. Use these filters to handle edge cases and enhance template flexibility.
default
Sets a default value for any variable with no assigned value. default
will show its value if the input is either null, false or empty.
Input
{% assign test_default = "" %}
{{ 'my_string' | default: 'I will not show up' }}
{{ test_default | default: "I will show up" }}
Output
my_string
I will show up
file_size
Formats bytes to prettier file size format.
Input
{{ 1024 | file_size }}
Output
1 KB
placeholder_svg_tag
Renders a placeholder SVG.
Input
{{ 'image' | placeholder_svg_tag }}
Output
<svg viewBox="0 0 525 525" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg"><!-- SVG definition --></svg>
Following options are available:
Target | Size |
---|---|
Category image | category-<n> , n=1..7 |
Background | background-<n> , n=1..3 |
Product image | product-<n> , n=1..12 |
General placeholder | image |
For more advanced usage, you can define SVG attributes as filter parameters and set a CSS class for the svg
element.
Input
{{ 'product-2' | placeholder_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>
to_bool
Converts the input to a boolean value.
Input
{{ 'true' | to_bool }}
{{ 'false' | to_bool }}
{{ '1' | to_bool }}
{{ '0' | to_bool }}
{{ 'yes' | to_bool }}
{{ 'no' | to_bool }}
{{ 'on' | to_bool }}
{{ 'off' | to_bool }}
Output
true
false
true
false
true
false
true
false
to_number
Converts the input to a number.
Input
{{ '123' | to_number }}
{{ '123.45' | to_number }}
{{ '123.45.67' | to_number }}
Output
123
123.45
123.45