As of V.1.3.0, you can upload and use assets (images, fonts, etc.) in your theme.
Uploading assets
To upload assets, open up your theme and select Assets Add New Asset.
Select the files for your assets and hit Upload.
Once the upload is completed, you'll see the files listed in the Assets folder of your theme. They are now ready to use!
Using Assets
To use assets within the html of your theme, reference the asset using the following format:
HTML{{ 'ASSET NAME' | theme_asset_url }}For example, for the image asset uploaded above, I would add this image to the page using the code below:
HTML<img src="{{ 'cute-golden-retriever-happy-puppies.png' | theme_asset_url }}">
Using CSS uploaded as an asset
To use a CSS file that you've uploaded as an asset, add this code into your Header file.
HTML<link rel="stylesheet" type="text/css" href="{{ 'ASSET NAME' | theme_asset_url }}">
For example, if you've uploaded a stylesheet called thinkific.css into your Assets folder:
HTML<link rel="stylesheet" type="text/css" href="{{ 'thinkific.css' | theme_asset_url }}">Using font files uploaded as an asset
To be able to use a font file that you've uploaded as an asset, add this code into your Theme CSS:
CSS
@font-face {
font-family: Define-Font-Name;
src: url({{ 'ASSET NAME' | theme_asset_url }});
}
Example, if I've uploaded my font and the asset file name is bitter-regular.ttf :
CSS@font-face {
font-family: Bitter-Regular;
src: url({{ 'bitter-regular.ttf' | theme_asset_url }});
}
In Site Builder sites only, you can add your new font into the manifest.json file to make it available in your Site Builder Typography settings.
Find the "options" key for each font setting, and add your new font there. Be sure that there is a comma between each set of curly brackets.
{
"value": "Bitter-Regular",
"label": "Bitter",
"group": "Serif"
}
For more help with custom fonts, you can check out this article here.
Important things to note:
The following asset types are supported:
- text files
- javascript files
- css files
- svg, jpeg, png, tiff, bitmap and gif images
- ttf, woff, woff2 and eot font files
- json files
Videos are not supported for a number of reasons, but mostly due to them not being optimized for various devices.
Imported files cannot be greater than 25 MB
Assets will be overwritten if an asset with the same name is uploaded. Assets can be renamed if necessary, by double-clicking on them in the Assets folder.
They will also not carry over if you update or change your theme - you will have to re-upload them to your current active Theme and add your code back in. If you need more help with Custom Themes please see Custom Themes (For Developers).