Filters are basic methods for modifying strings, numbers, variables, and objects. Using a filter is as simple as adding | filter_name after whatever you want to filter

<!-- product.name = "great subscription box" -->
{{ product.name | title }}

Output:

Great Subscription Box

The title filter is a Jinja built-in filter

Themes have access to all the Jinja2 built-in filters, plus some Cratejoy defined filters, described below.

FORMATTING

currency

The currency filter formats a currency according to your store’s configured currency. It defaults to 2 decimal places, but you can also specify different values.

<!-- price = 500 -->
{{ price | currency }}
{{ price | currency(0) }}

Output:

$5.00
$5

tojson

We also expose a tojson filter, which converts an object into JSON. If used inside a script tag, disable escaping with jinja2’s ‘safe’ filter.

<!-- store.name = "My Store"  -->  
<script type="text/javascript">
    runExampleCode({{ store.name | tojson | safe }});
</script>

Output:

<script type="text/javascript">
    runExampleCode("My Store");
</script>

TAGS

Tag filters create HTML tags from Jinja variables.

img_tag

Creates an <img> tag from a URL

{{ 'images/man_with_hat.jpg' | asset_url | img_tag("A dapper gentleman wearing a top hat", "thumbnail") }}
{{ 'images/man_with_hat.jpg' | asset_url | img_tag }}

Output:

<img src="//cdn.cratejoy.com/storename/designname/images/man_with_hat.jpg" alt="A dapper gentleman wearing a top hat" class="thumbnail" />
<img src="//cdn.cratejoy.com/storename/designname/images/man_with_hat.jpg" />

icon_tag

Creates an icon <link> from a URL

{{ 'images/favicon.ico' | asset_url | icon_tag }}

Output:

<link href="//cdn.cratejoy.com/storename/designname/images/favicon.ico" rel="icon" type="image/x-icon">

stylesheet_tag

Creates a stylesheet <link> from a URL

{{ 'css/style.css' | asset_url | stylesheet_tag }}

Output:

<link rel="stylesheet" href="//cdn.cratejoy.com/storename/designname/css/style.css" type="text/css" />

javascript_tag

Creates a javascript <script> tag from a URL

{{ 'js/store.js' | asset_url | javascript_tag }}

Output:

<script type="text/javascript" src="//cdn.cratejoy.com/storename/designname/js/store.js"></script>

URL

URL filters help create URLs to files in your store's themes. It is important to use URL filters or you may be referencing your files in a way which bypasses our content distribution network and slows down your storefront's loading for customers.

asset_url

Returns a URL from a file asset which is part of a design

<a href="{{ 'images/big.jpg' | asset_url }}">Big Image</a>

Output:

<a href="//cdn.cratejoy.com/storename/designname/images/big.jpg">Big Image</a>

global_asset_url

Returns a URL from a file asset which is part of the Cratejoy provided platform

{{ 'css/store.css' | global_asset_url | stylesheet_tag }}

Output:

<link rel="stylesheet" href="//cdn.cratejoy.com/css/store.css" type="text/css" />

product

Return a product object for a given product id.

{% set product = 12345678 | get_product %}
{{ product.name }}

Output:

My Little Box

product_subscribe_url

Returns the URL that corresponds to a product subscription choice, for example a variant or a term

<a class="btn btn-default" href="{{ product | product_subscribe_url(chosen_values,"large-box") }}">Select Large Box</a>

Output:

<a class="btn btn-default" href="//teststore.cratejoy.com/subscribe/1111_My+Box/1111_large-box">Select Large Box</a>

product_ecom_url

Returns the URL that corresponds to an e-commerce product

<a href="{{ product | product_ecom_url }}">{{ product.name | safe}}</a>

Output:

<a href="//teststore.cratejoy.com/shop/product/1111_Dapper+Hat">Dapper Hat</a>

cratejoy_domain

Returns a store’s cratejoy domain

<a href="https://{{ store | cratejoy_domain }}/subscribe/">Subscribe Now!</a>

Output:

<a href="https://teststore.cratejoy.com/subscribe/">Subscribe Now!</a>

custom_domain

Returns a store’s custom domain

<a href="https://{{ store | custom_domain }}/subscribe/">Subscribe Now!</a>

Output:

<a href="https://teststore.com/subscribe/">Subscribe Now!</a>

UTILITY

These filters are time saver functions.

get_price_or_price_range

Returns a price or min-max price range for a product and optional variants. Since products can have a range of prices based on variant choices and term options, this method is a convenient way of seamlessly handling a single price or price range without any template side logic.

<span class="price">{{ product | get_price_or_price_range }}</span>

Output:

If the product has multiple pre-payment terms it may return a range like this:

<span class="price"><p>$10-$25</p></span>

If the product has just a single pre-payment term (such as month to month) it would return a single price:

<span class="price"><p>$25</p></span>

Variant values may also be specified

<!-- value is the variant value we're getting the price for -->
<span class="price">{{ product | get_price_or_price_range(value.variant_type, values = chosen_values + [value]) }}</span>

append_kvp

Returns a URL with a Key-Value pair appended to it. Used to select variants in subscribe flow

<!-- base_url = "http://teststore.cratejoy.com/subscribe/" -->
<a href="{{ base_url | append_kvp('box-size', 'small') }}">Select Small Box</a>

Output:

<a href="http://teststore.cratejoy.com/subscribe/box-size_small">Select Small Box</a>

category

Returns products matching passed in taxonomies.

<!--
store.ecom_products contains
name - taxonomies
"Bird Necklacke" - ['birds']
"Pith Helmet" - ['helmets']
"Snow Shoes" - ['shoes', 'snow']
"Hawk Headdress" - ['helmets', 'birds']
-->
{% for p in store.ecom_products | category('birds', 'helmets') %}
    {{ p.name }}
{% endfor %}

Output:

Bird Necklace
Pith Helmet
Hawk Headdress

meta_value

Returns the meta field value for the passed in key

<!-- If your subscription had a meta field key value pair {"flavor_preference": "Savory"}-->
Your Flavor Preference: {{ subscription | meta_value("flavor_preference") }}

Output:

Your Flavor Preference: Savory

get_meta_dict

Returns a dictionary of all meta fields attached to the filtered object

<!-- If your subscription had a meta field key value pair {"flavor_preference": "Savory", "send_day":"Friday"}-->
{% set meta = subscription|get_meta_dict %}
Your Flavor Preference: {{ meta.flavor_preference }}
Your Send Day: {{ meta.send_day }}

Output:

Your Flavor Preference: Savory
Your Send Day: Friday