Using Assets in Custom Themes

When creating custom themes you can use your own assets to create customized site pages that match your desired branding and styles. 

• Uploading assets
• Using Assets
• Using CSS uploaded as an asset

Uploading assets

To upload assets:

1. Open up your theme
2. Select Assets
3. Click add New Asset
4. Select the files for your assets
5. Click 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 }}">

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

Imported files cannot be greater than 25 MB. To avoid exports in excess of 25 MB, consider adding images through Site Builder to reduce the exported file's size.  

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.

For information on using fonts in Custom Themes, see Using Fonts in Custom Themes.