The file_url filter prepends the S3 or CDN URL to the beginning of the file path. This is useful if you are hardcoding the path to a file in your templates. An example use could be in setting the favicon file or other files that are outside of a theme folder and you can't use the theme_url filter.

<link rel="icon" type="image/png" href="{{ '/favicon-32x32.png'|file_url }}">

<link type="text/css" rel="stylesheet" href="{{ 'layout/css/main.css'|file_url }}">

The filter does not check to ensure that the asset actually exists.

Cache busting

You can also have a version added to the file automatically if the CDN is enabled to force a new version to be used.

{{ '/path/to/file.css'|file_url({version: 2}) }}


As with all filters, you can use the filter when assigning a value to another variable.

{% set logo = 'images/logo.png'|file_url %}


The file_url filter has the following signature.


Parameter Description

The options parameter is optional. The following values are valid:

  • version: (string)
  • append: (boolean)

Pass the options as an object hash.


The version option lets you add a version to the file path if the CDN is enabled to force a new version of the file to be used. By default, the version is added between the file name and the file extension.


{{ '/path/to/file.css'|file_url({version: 2}) }}

That will output something like this:

If you are using the option on the Settings -> CDN page to automatically set version numbers then you can optionally exclude certain files from automatically having a version value applied to the file name. Do this by setting the version value to false.

{{ '/css/file.css'|file_url({version: 2}) }}


The append option tells the system to append the version to the URL using the v parameter.


{{ '/path/to/file.css'|file_url({version: 2, append: true}) }}

That will output something like this:

< Back to the list of filters