Media Filters

Media filters generate image URLs, responsive HTML image elements, and asset paths. They integrate with the QUANTM7 CDN for automatic resizing and optimization.

img_url

Get a URL for an image at the size you want. Pass the width and height as a string:

{{ product.featured_image | img_url: '400x400' }}

The output is a complete URL pointing to the image, automatically resized to 400 by 400 pixels.

Width only

Set just the width. The height will scale to keep the same shape as the original image:

{{ product.featured_image | img_url: '800x' }}

Height only

Set just the height. The width will scale to match:

{{ product.featured_image | img_url: 'x600' }}

Common sizes

The CDN does the work. Your source image is never changed or cropped.

image_tag

Build a full <img> tag in one step. The tag comes with lazy loading and the right sizes for every screen:

{{ product.featured_image | image_tag }}

Output:

<img src="..." loading="lazy" alt="Product name" srcset="..." sizes="..." />

The generated element includes several performance attributes automatically:

• loading="lazy" for deferred loading until the visitor scrolls near the image
• alt text from the image record in your admin
• srcset with multiple resolutions for responsive display
• sizes to indicate the expected display dimensions to the browser

Custom attributes

You can pass extra attributes:

{{ product.featured_image | image_tag: class: 'product-image', loading: 'eager' }}

Specify loading: 'eager' for above-the-fold images that should load immediately rather than waiting for the visitor to scroll.

asset_url

Get the full CDN link for a file in your theme's assets folder:

{{ 'logo.png' | asset_url }}

The output is a URL that points to the file on the CDN.

Use this for files that are part of your theme, like logos, icons, and fonts. It is not for images that merchants upload through the admin (those use img_url instead).

Stylesheets and scripts

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
<script src="{{ 'theme.js' | asset_url }}"></script>

placeholder_svg_tag

Generate an SVG placeholder image for a given category. This is useful for empty states and demo content when no real image is available:

{{ 'product' | placeholder_svg_tag }}

The output is an inline SVG element that shows a generic product silhouette. Pass a CSS class to style it:

{{ 'collection' | placeholder_svg_tag: 'placeholder-image' }}

Available placeholder types include product, collection, image, and lifestyle. Each one has a different illustration suited to its context.

script_tag

Generate a complete <script> tag from a URL:

{{ 'theme.js' | asset_url | script_tag }}

Output:

<script src="/assets/theme.js" defer></script>

stylesheet_tag

Generate a complete <link> stylesheet tag from a URL:

{{ 'theme.css' | asset_url | stylesheet_tag }}

Output:

<link rel="stylesheet" href="/assets/theme.css" />

These two tag filters are a shorter alternative to writing the full HTML by hand. They pair naturally with asset_url.

Practical examples

Product card with responsive image

<div class="product-card">
  {% if product.featured_image %}
    <a href="/products/{{ product.handle }}">
      {{ product.featured_image | image_tag: class: 'product-card__image' }}
    </a>
  {% endif %}
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
</div>

Background image in a section

{% if section.settings.background %}
  <div class="hero" style="background-image: url('{{ section.settings.background | img_url: '1600x' }}')">
    <h1>{{ section.settings.heading }}</h1>
  </div>
{% endif %}

Gallery with thumbnails

<div class="gallery">
  {% for image in product.images %}
    <a href="{{ image | img_url: '1200x' }}">
      <img src="{{ image | img_url: '150x150' }}" alt="{{ image.alt }}" />
    </a>
  {% endfor %}
</div>