Skip to content

Assets

CSS and JavaScript bundled in your theme are served at a URL matching their path in the package. There's no asset-tag function, just a plain path. The list of servable extensions below is generated from the platform's asset rules.

Assets bundled in your theme are served at a matching /assets/… URL. There's no asset-tag function; templates reference the path directly.

Servable extensions

Only these text extensions are served, from the database, with ETag caching:

css, js, svg, txt, xml, json

Any other extension, including binary ones your package may still carry (woff, woff2, ttf, eot, png, jpg, jpeg, gif, ico, webp, mp4, webm), returns 404 at this route. See the note below.

Referencing assets

Put an asset under assets/ in your .zip (e.g. assets/css/app.css); reference it at the same path, prefixed with /assets:

liquid
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/app.js" defer></script>

Binary assets aren't served yet

Images and fonts you bundle in the package are still imported and stored (packaging doesn't reject them), but nothing currently serves them back at a URL: the route above only ever reads text-file content. Until that lands, host binary assets you need (fonts, background images, icons your CSS references) externally and link to them directly rather than bundling them in the theme package. Anything a host uploads through an image_picker setting (logo, favicon, gallery images, …) is unaffected; those come back from the API as full, already-hosted URLs, not a theme-package path.

Tips

  • Put assets in an assets/ directory grouped by type (assets/css/, assets/js/) and reference them at the same path, prefixed with /assets, e.g. assets/css/app.css/assets/css/app.css. Top-level type directories (css/, js/, …) work too; both layouts produce the same paths.
  • The route only serves the text extensions above; anything else, including the binary extensions your package is still allowed to carry, returns 404 here for now.
  • For anything binary (a background image, a webfont, an icon your CSS references), link to an externally hosted URL rather than bundling it, per the note above. Images a host uploads through an image_picker setting come back from the API as their own hosted URL and aren't affected by this.

© Stayblox — Developer Platform