Supported variable filters

Filters allow you to modify the output of a variable. You can use them to format dates, change text case, or provide default values when data is missing.

What are filters?

Filters mimic Shopify Liquid filters. They are used within the double curly braces {{ }} and are separated from the variable by a pipe character |.

Hubble currently supports a specific subset of filters.

Supported filters

1. Default filter

The default filter allows you to set a fallback value if the variable is empty or doesn't exist.

Standard fallback value:

{{ customer.name | default: 'dear customer!' }}

If customer.name is missing, this will display "dear customer!".

Special non-standard fallback:

You can use a special keyword to hide the entire block if the variable is missing.

{{ customer.name | default: 'DONT_SHOW_BLOCK' }}

If customer.name is missing, the entire block containing this variable will be hidden from the user.

2. Text filters

These filters help you control the capitalization of text variables.

Filter	Description	Example
upcase	Converts the string to uppercase.	`{{ customer.name
downcase	Converts the string to lowercase.	`{{ customer.name
capitalize	Capitalizes the first word.	`{{ customer.name

3. Date filter

The date filter formats a date object into a specific string format.

Example:

{{ customer.created_at | date: "MMM-DD" }}

Note on date formatting

The date filter exists in Liquid, but Hubble uses Day.js formatting, not the Shopify Liquid syntax. This means the format tokens might be different from what you are used to in standard Shopify themes.

Day.js Date Format Tokens

Use the following tokens to construct your date format string:

Format	Description	Example
YY	Two-digit year	18
YYYY	Four-digit year	2018
M	The month, beginning at 1	1-12
MM	The month, 2-digits	01-12
MMM	The abbreviated month name	Jan-Dec
MMMM	The full month name	January-December
D	The day of the month	1-31
DD	The day of the month, 2-digits	01-31
d	The day of the week, with Sunday as 0	0-6
dd	The min day name	Su-Sa
ddd	The short day name	Sun-Sat
dddd	The name of the day of the week	Sunday-Saturday
H	The hour	0-23
HH	The hour, 2-digits	00-23
h	The hour, 12-hour clock	1-12
hh	The hour, 12-hour clock, 2-digits	01-12
m	The minute	0-59
mm	The minute, 2-digits	00-59
s	The second	0-59
ss	The second, 2-digits	00-59
SSS	The millisecond, 3-digits	000-999
Z	The offset from UTC	+05:00
ZZ	The offset from UTC, 2-digits	+0500
A	AM PM	AM
a	am pm	am

List of all available formats in Day.js documentation