Assets - Theme Reference - 0.11.3

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.

Theme Assets

You can add theme assets from the Related tab of your Theme.

Once 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.

Once 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.

You can upload any kind of asset that StoreConnect supports.

Example

Let’s insert a link to Twitter on our home page.

Edit the home page template and add the following:

<br>
<a href="http://twitter.com">
  <img src="images/icons/twitter" width="32"> Twitter
</a>

Preview the page, and you’ll see we now have a Twitter icon.

Special Assets

The 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.

You 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.

Supplements

If your theme contains an asset with the key theme-supplement.js or theme-supplement.css these files will be included in the header of your site automatically. They will be included after the built-in versions. This is a great way to have your theme include javascript or css that is required for the proper functioning of your theme.

Example

Add an asset with the key theme-supplement.css. The asset should contains the following css:

body {
  font-family: "Comic Sans MS";
}

Preview the site, and you’ll see the new asset has overridden the site font, but the rest of the built-in theme is still applied.

Replacements

If however your theme contains assets with the keys theme.js or theme.css these files will be included in the header of your site automatically but as a replacement for the built-in versions.

Example

This time create an asset with the key theme.css, keeping the content the same as before.

Preview the site. This time you should still see your favourite font, however the rest of the built-in theme styling will be gone.

That’s it for Theme Assets.

Next up: Configuring your theme with Theme Variables.

Back to Overview