{"title":"Theme assets","slug":"theme-assets","url":"https://support.storeconnect.com/articles/theme-assets","url_markdown":"https://support.storeconnect.com/articles/theme-assets.md","subtitle":null,"summary":"Upload images, JavaScript, and CSS files as theme assets, then reference them in templates using the asset_url filter. Use supplement assets to extend or replacement assets to override built-in styles and scripts.","type":"Developer_Documentation","video_url":"","keywords":"theme assets, asset_url, css, javascript, theme files, upload assets, supplement, replacement, theme.css, theme.js, custom styles, liquid filter","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"Assets are any external resources that a Theme may need, such as images (icons, placeholders, backgrounds, etc.) and files (Javascript, stylesheets). You can add assets to your theme using the Theme Assets object.\n\nYou can add theme assets from the Related tab of your Theme.\n\n![Theme Assets listed on the Related tab of a Theme record](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790516/knowledge/themes/theme-assets_gfnwut.png)\n\n![New theme asset form with Key field and file upload](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790518/knowledge/themes/new-asset_uahtts.png)\n\nOnce again we have a Key field. This also must be unique per Theme. It can be anything you like, however it is good practice to use a naming convention, eg all images might start with `images/` and be further grouped by type. Here we are uploading a social icon for Twitter, so we have used the key `images/icons/twitter`.\n\n![Saved theme asset record showing the generated URL field](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790507/knowledge/themes/theme-asset-url_kyk71s.png)\n\nOnce you have uploaded your file and saved the record, you’ll see that your asset has a URL field. You can use this url in your Theme Templates by copy and pasting that straight into your template. Or even better you can use the liquid filter `asset_url`.\n\nYou can upload any kind of asset that StoreConnect supports.\n\n## Example\n\nLet’s insert a link to Twitter on our home page.\n\nEdit the home page template and add the following:\n\n```text\n\n   Twitter\n```\n\n![Home page template updated with an asset_url link to the Twitter icon](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790509/knowledge/themes/update-home-page-with-asset_mxytxg.png)\n\nPreview the page, and you’ll see we now have a Twitter icon.\n\n![Home page preview displaying the Twitter icon rendered from the theme asset](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790513/knowledge/themes/preview-home-page-with-asset_s03aov.png)\n\n## Special Assets\n\nThe built-in StoreConnect theme comes with its own theme javascript and css files. They have been developed to work with our templates - they go hand in hand.\n\nYou can upload your own Javascript and CSS files and include them in your templates as we showed above. However often you will want them to be included on every page. To do this there are two options:\n\n- **Supplements** (`theme-supplement.css` / `theme-supplement.js`) — included automatically after the built-in theme files, so your styles and scripts extend the defaults.\n- **Replacements** (`theme.css` / `theme.js`) — included automatically in place of the built-in theme files, so the built-in defaults are removed entirely.\n\nFor the full `{% require %}` tag reference, CSS framework integration (Tailwind/Bootstrap/vanilla), and CSS custom-property overrides, see [Theme assets and styling](theme-assets-and-styling)."}