> For the complete documentation index, see [llms.txt](https://docs.overse.app/hubble/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overse.app/hubble/variables/supported-variable-filters.md).

# Supported variable filters

### 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:**

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

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

#### 2. Text filters

These filters help you control the capitalization of text variables.

<table data-full-width="false"><thead><tr><th width="121">Filter</th><th>Description</th><th>Example</th></tr></thead><tbody><tr><td><code>upcase</code></td><td>Converts the string to uppercase.</td><td><code>{{ customer.name | upcase }}</code></td></tr><tr><td><code>downcase</code></td><td>Converts the string to lowercase.</td><td><code>{{ customer.name | downcase }}</code></td></tr><tr><td><code>capitalize</code></td><td>Capitalizes the first word.</td><td><code>{{ customer.name | capitalize }}</code></td></tr></tbody></table>

#### 3. Date filter

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

**Example:**

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

{% hint style="info" %}
**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.
{% endhint %}

**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](https://day.js.org/docs/en/display/format)