Filters
Filters are convenience methods used to generate page content by transforming the output of variables.
Filters can be used to transform data before it is rendered on a page, like capitalizing strings or formatting numbers. In addition to supported Twig filters, Square extensions provide additional functionality to modify colors, interact with arrays, format addresss, and other operations.
In page templates, filters are wrapped in {{ }} and follow a | character. Filters are often used with functions.
{{ variable_or_expression | filter_name }}
Supported filters
You can use the following filters in Square Online page templates:
| Filter | Description |
|---|---|
| asset_url | Creates a relative URL to a file in the theme/assets directory. |
| asset_full_url | Creates a full URL to a file in the theme/assets directory. |
| stylesheet_tag | Wraps a string in a stylesheet tag. |
| localize | Renders translations from the theme/translations directory. |
| srcset | Generates a srcset attribute for a resized image. |
| sizes | Generates a sizes attribute for a resized image. |
| color_adjust | Lightens dark colors or darkens light colors for hover states. |
| color_darken | Darkens colors by a given percentage. |
| color_lighten | Lightens colors by a given percentage. |
| color_contrast | Checks a foreground color against a background color and returns a contrasting color. |
| color_contrast_ratio | Checks a foreground color against a background color and returns a contrasting ratio for a color pair (1-21). |
| color_neutral | Combines background and foreground colors and returns a hex value. |
| color_alpha | Sets a color’s alpha value as a percentage. |
| color_is_dark | Checks if a color is dark. |
| color_luminance | Determines brightness of a color and returns a value (0.0 - 1.0). |
| array_average | Returns the average value of a given key. |
| array_collapse | Collapses an array of arrays into a single, flat array. |
| array_combine | Combines the values of the array, as keys, with the values of another array. |
| array_concat | Appends the given array’s values onto the end of another array. |
| array_diff | Compares the array against another array based on its values. |
| array_duplicates | Returns duplicate values from the array. |
| array_first_where | Returns the first element in the array with the given key/value pair. |
| array_flip | Swaps the array’s keys with their corresponding values. |
| array_keys | Returns all of the array’s keys. |
| array_max | Returns the maximum value of a given key. |
| array_median | Returns the median value of a given key. |
| array_merge | Merges the given array with the original array. |
| array_merge_recursive | Merges the given array recursively with the original array. |
| array_min | Returns the minimum value of a given key. |
| array_pluck | Retrieves all of the values for a given key. |
| array_random | Returns a random item from the array. |
| array_shuffle | Randomly shuffles the items in the array. |
| array_values | Returns the values from the array. |
| array_where | Filters the collection by a given key/value pair. |
| array_where_between | Filters the array by determining if a specified item value is within a given range. |
| array_where_not_between | Filters the collection by determining if a specified item value is outside of a given range. |
| array_where_in | Removes elements from the array that do not have a specified item value that is contained within a given array. |
| array_where_not_in | Removes elements from the array that have a specified item value that is contained within the given array. |
| array_where_null | Removes elements from the array that do not have a specified null value contained within the given array. |
| array_where_not_null | Removes elements from the array that do have a specified null value contained within the given array. |
| address_format | Generates a single line address from an address object. |
| address_format_multiline | Generates a multiline address as an array from a given address object. |
| format_price | Format a price in subunits to a formatted string. |
| format_phone_number | Format a phone number to its local calling convention. |
| global_selected_style | Gets the selected global style. |
| global_selected_style_color | Gets the selected global style color for the given value. |
| global_selected_style_system_color | Gets the selected global style system color for the given value. |
| Twig filters | Supported core Twig filters. |