Themes and Static Assets

Storefront Theme manages all static assets (JavaScript files, fonts, images, and so on). After a theme is uploaded through the Theme Manager, the assets are linked through a content delivery network (CDN). When you create a theme, you can add an asset. For example, you can add an image as a profile banner:

<img src="{{ r('/assets/images/profile/hero/myimg.jpg') }}">

This r() function to reference an asset in the theme can be used in regular pages, or in header-footer templates.

Add JavaScript files globally

You can add scripts to base.html to include them in every page (as long as you extend base.html):

<script src="{{ r("/assets/js/slider.js") }}"></script>
<script src="{{ r("/assets/js/common.js") }}"></script>
<link rel="stylesheet" type="text/css" href="{{ r("/assets/css/theme/theme-index.css") }}">

Add custom fonts

To manage fonts, we recommend that you convert the theme fonts to base64 and add them directly in your SASS files. You can include the fonts in your CSS file with the @font-face rule. You must format the src data as a Data URL.

Add images in SASS files

You can add styles directly in HTML templates as a workaround to create an image, such as a background image. It is currently not possible to add assets in CSS files.