Platform filters

The filters Tringify adds to Vascula: prices, translations, images, assets and placeholders.

Tringify themes can use every Vascula built-in filter plus the filters on this page.

Filter	Does
`money`	Formats a price for the shopper's language.
`t`	Prints the theme's text in the shopper's language.
`date`	Writes a date in the shopper's language, or with a strftime format.
`image_url`	Gives a resized store image.
`image_srcset`	Gives a `srcset` of resized images.
`image_loading`	Loads the first images at once and the rest lazily.
`asset_url`	Gives the URL of a file the theme ships.
`placeholder_svg`	Prints placeholder artwork.
`placeholder_video`	Gives the URL of a placeholder video.

money#

vascula

{{ product.price.current | money }}
{{ product.price.current | money: isolate: true }}
{{ product.price.current | money: trim_zeros: true }}

Formats a price in the shopper's language, in the price's own currency: ₹1,234.56 in English, 1 234,56 ₹ in French. Use a price value such as product.price.current or product.price.regular, not a plain number.

isolate: true keeps the price together when it sits inside text written in the other direction, such as a price in an Arabic sentence. See Money and languages.

trim_zeros: true leaves out the decimals when the price is a whole amount: ₹1,850 instead of ₹1,850.00. A price with a fraction, such as ₹1,850.50, keeps them. Use it for prices on cards and product pages, and leave it off for bag and order totals so they match checkout. It works together with isolate: true.

t#

vascula

<button>{{ "cart.add" | t }}</button>
<p>{{ "account.greeting" | t: name: customer.first_name }}</p>

Prints the text for a key from the theme's locales/<locale>.json, in the shopper's language, falling back to the theme's default language. Named arguments fill placeholders: with "account.greeting": "Welcome back, {{ name }}", the second line prints Welcome back, Asha. A key that exists in neither file prints translation missing: <locale>.<key>. See Theme Locale Files.

image_url#

vascula

<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.featured_image.alt_text }}">
<img src="{{ settings.image | image_url: width: 480 }}" alt="">

Gives the URL of a store image resized to the width you ask for, rounded up to one of 160, 320, 480, 640, 828, 1080, 1440 or 2048 pixels. The input is a store image: an image object, an image setting or a store image URL. An empty input gives an empty string.

image_srcset#

vascula

<img src="{{ img | image_url: width: 640 }}"
     srcset="{{ img | image_srcset: max: 1440 }}"
     sizes="(min-width: 900px) 50vw, 100vw" alt="">

Lists the image at every width up to max (2048 if not given), for the browser to choose from.

image_loading#

vascula

<img src="{{ img | image_url: width: 1080 }}" {{ img | image_loading }} alt="">

Prints the loading attributes for an image: the first image on the page loads first, the next two load straight away, and the rest load as they scroll into view. Use it on content images, such as banners and product photos.

asset_url#

vascula

<link rel="preload" href="{{ "display.woff2" | asset_url }}" as="font" type="font/woff2" crossorigin>

Gives the URL of a file in the theme's assets/ folder. Assets can be fonts (.woff2, .woff) and images (.png, .jpg, .jpeg, .webp, .gif). An unknown file name is an error.

date#

Pass a style, short, medium, long or full, to write a date the way the shopper's language writes it: short is numeric, medium spells a short month, long the full month, full adds the weekday. Use the _iso value of a field (published_at_iso, created_at_iso) or any timestamp field; its offset decides the calendar day. Any other argument is a strftime format, printed as written. Fields such as published_at already hold display text in the shopper's language.

vascula

{{ post.published_at_iso | date: 'medium' }}
{%- comment -%} en: Oct 5, 2026 · de: 5. Okt. 2026 · ja: 2026年10月5日 {%- endcomment -%}

{{ order.created_at | date: 'long' }}
{{ 'now' | date: '%Y' }}

placeholder_svg#

vascula

{% if settings.image %}
  <img src="{{ settings.image | image_url: width: 1080 }}" alt="">
{% else %}
  {{ "lifestyle-1" | placeholder_svg }}
{% endif %}

Prints artwork for a slot the merchant has not filled yet. It scales to the size your CSS gives it.

Name	For
`image`	Any image
`logo`	A logo
`product-1` to `product-6`	Product cards
`collection-1` to `collection-6`	Collection cards
`lifestyle-1`, `lifestyle-2`	Banners and wide images

placeholder_video#

vascula

{% if settings.video %}
  <video autoplay muted loop playsinline src="{{ settings.video }}"></video>
{% else %}
  <video autoplay muted loop playsinline src="{{ "reel-1" | placeholder_video }}"></video>
{% endif %}

Gives the URL of a placeholder video: reel-1, reel-2, reel-3 or reel-4.