# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.overse.app/hubble/variables/supported-variable-filters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.