Assets - Theme Reference - 0.11.4

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.

Theme assets

New asset

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.

Theme asset url

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>

Update home page with asset

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

Preview home page with asset

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";
}

New css supplement asset

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.

Preview css supplement asset

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.

Preview css replacement asset

That’s it for Theme Assets.

Next up: Configuring your theme with Theme Variables.

Back to Overview

 

 
Back to Documentation