Appearance
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
404here 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_pickersetting come back from the API as their own hosted URL and aren't affected by this.