HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

Hosted file Filters

❮ Previous Next ❯

Hosted file filters provide URLs for assets stored on the Shopify CDN, such as files uploaded through the Shopify admin.

asset_img_url

Gets the CDN URL for an image located in the theme's assets directory.

syntax
{{ 'red-and-black-bramble-berries.jpg' | asset_img_url }}

size

The asset_img_url filter usually gives a small image (100 x 100 px). You can choose a different size if you want.

syntax
image | asset_img_url : string

asset_url

Provides the CDN link for a file located in the theme's assets directory.

syntax
string | asset_url

file_img_url

Returns the URL for an image hosted on Shopify's CDN from the Files page in the Shopify admin.

syntax
string | file_img_url

returns string

The size parameter

By default, the file_img_url filter shows the small version of the image (100 x 100 px). You can choose a different size if needed.

syntax
image | file_img_url : string

file_url

Returns the content delivery network (CDN) URL for a file from the Files page of the Shopify admin.

syntax
string | file_url

global_asset_url

syntax
string | global_asset_url

Returns the CDN URL for a global asset.

Global assets are stored in a directory on Shopify's server. Using global assets can be faster than loading the resource directly.

Depending on the type of resource, you may need to apply an additional filter to load it correctly. The table below lists which filter to use for specific resource types:

Resource Type Additional Filter
JavaScript (.js) script_tag
CSS (.css) stylesheet_tag

The following table lists the global assets available:

Category Assets
Firebug
  • firebug/firebug.css
  • firebug/firebug.html
  • firebug/firebug.js
  • firebug/firebugx.js
  • firebug/errorIcon.png
  • firebug/infoIcon.png
  • firebug/warningIcon.png
JavaScript libraries
  • controls.js
  • dragdrop.js
  • effects.js
  • ga.js
  • mootools.js
Lightbox
  • lightbox.css
  • lightbox.js
  • lightbox/v1/lightbox.css
  • lightbox/v1/lightbox.js
  • lightbox/v2/lightbox.css
  • lightbox/v2/lightbox.js
  • lightbox/v2/close.gif
  • lightbox/v2/loading.gif
  • lightbox/v2/overlay.png
  • lightbox/v2/zoom-lg.gif
  • lightbox/v204/lightbox.css
  • lightbox/v204/lightbox.js
  • lightbox/v204/bullet.gif
  • lightbox/v204/close.gif
  • lightbox/v204/closelabel.gif
  • lightbox/v204/donatebutton.gif
  • lightbox/v204/downloadicon.gif
  • lightbox/v204/loading.gif
  • lightbox/v204/nextlabel.png
  • lightbox/v204/prevlabel.gif
Prototype
  • prototype.js
  • prototype/1.5/prototype.js
  • prototype/1.6/prototype.js
script.aculo.us
  • scriptaculous/1.8.2/scriptaculous.js
  • scriptaculous/1.8.2/builder.js
  • scriptaculous/1.8.2/controls.js
  • scriptaculous/1.8.2/dragdrop.js
  • scriptaculous/1.8.2/effects.js
  • scriptaculous/1.8.2/slider.js
  • scriptaculous/1.8.2/sound.js
  • scriptaculous/1.8.2/unittest.js
Shopify
  • list-collection.css
  • textile.css

shopify_asset_url

syntax
string | shopify_asset_url

Returns the CDN URL for a globally accessible Shopify asset.

  • option_selection.js
  • api.jquery.js
  • shopify_common.js
  • customer_area.js
  • currencies.js
  • customer.css
❮ Previous Next ❯