Resource Path - Liquid Tag Reference

The resource_path simple tag returns the URL path to a theme resource. It resolves the asset path correctly and includes cache-busting information so the browser reloads the asset when it changes. Use it in src, href, and other attributes where you need an asset URL.

Syntax

```liquid

{{ “images/banner.jpg” | resource_path }} ```

```liquid

<img src=”{{ “images/banner.jpg” | resource_path }}” alt=”Banner”> ```

```liquid

```

Property	Value
Tag Name	resource_path
Type	Simple tag (filter syntax)
Source	Hydrofoil (core)

What it returns

The tag returns a URL path string pointing to the asset. It does not output HTML tags; it returns only the path.

Example output:

/assets/images/banner.jpg?v=abc123

The query string (?v=abc123) is a cache-busting token. When the asset changes, the token changes, so browsers download the new version instead of using the cached old one.

Where to use it

Use resource_path anywhere you need an asset URL:

• Image src attributes — <img src="{{ 'images/logo.png' | resource_path }}">
• Links href — <link rel="stylesheet" href="{{ 'stylesheets/custom.css' | resource_path }}">
• CSS url() values — background: url({{ 'images/bg.png' | resource_path }})
• JavaScript source — <script src="{{ 'javascripts/app.js' | resource_path }}"></script>
• Video/audio sources — <video src="{{ 'videos/intro.mp4' | resource_path }}">

How it differs from require

• require — Outputs an HTML <link> or <script> tag directly. Deduplicates automatically. Use when you want the tag added to the page.
• resource_path — Returns only the URL path, no tags. Use when you need to pass a URL to an attribute or CSS property.

Example:

```liquid

{%- require js: “javascripts/app” -%} ```

Outputs: ```html

```

Versus:

```liquid

<script src=”{{ “javascripts/app” | resource_path }}”></script> ```

Both output a script tag, but require uses deduplication, while resource_path is a raw URL filter.

Asset path resolution

Paths are resolved relative to your theme’s assets directory:

```liquid

{{ “images/banner.jpg” | resource_path }} {%- comment -%}Resolves to: /assets/images/banner.jpg?v=abc123{%- endcomment -%}

{{ “stylesheets/custom.css” | resource_path }} {%- comment -%}Resolves to: /assets/stylesheets/custom.css?v=abc123{%- endcomment -%} ```

Do not include the assets/ prefix; it is added automatically.

Cache busting

The query string parameter is added automatically and changes when the file is updated. This ensures browsers download the new asset immediately after deployment, preventing stale cached content.

You do not need to add a manual query string; resource_path handles it.

When to use resource_path

Use resource_path when you:

• Need an asset URL in an attribute — <img src="{{ 'images/logo.png' | resource_path }}">
• Reference an asset in CSS — background: url({{ 'images/bg.png' | resource_path }})
• Pass an asset URL to JavaScript — const logoUrl = "{{ 'images/logo.svg' | resource_path }}"
• Build dynamic asset references — combine strings and variables to build asset paths

Do not use it when:

• You want the tag added automatically — use require instead
• You are referencing an external URL — use the full URL directly

Execution context

The resource_path tag runs at template-render time and returns a string. The string is inserted into the template wherever the tag appears. The final URL includes cache-busting information automatically.

Examples

Image with resource_path

Display an image with the correct, cache-busted path:

```liquid

<img src=”{{ “images/product-hero.jpg” | resource_path }}” alt=”Product showcase” width=”800” height=”400” > ```

Renders as:

```html

```

Background image in CSS

Use resource_path inside a <style> block for dynamic CSS:

```liquid

```

Renders as:

```html

```

Dynamic asset path in JavaScript

Pass an asset URL to JavaScript for dynamic behavior:

```liquid

```

The paths include cache-busting tokens automatically.

Video with multiple formats

Provide fallback video formats, each with a resolved path:

```liquid

```

Each source gets a correct, cache-safe path.