Menu

Custom Themes - Using Assets

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.



The files are now uploaded and ready to use!


Using assets

To use assets within the html of your theme, use code in the following format:


{{ 'ASSET NAME' | theme_asset_url }}


e.g., for the image I uploaded above, I would use <img src="{{ 'cute-golden-retriever-happy-puppies.jpg' | theme_asset_url }}"> to add the image into a page, as shown below:



Using CSS uploaded as an asset

To use a CSS file that you've uploaded as an asset, add this code under Snippets > Header:


<link rel="stylesheet" type="text/css" href="{{ 'ASSET NAME' | theme_asset_url }}">


Example: <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:


@font-face {

    font-family: Define-Font-Name;

    src: url({{ 'ASSET NAME' | theme_asset_url }});

}


Example:


@font-face {

    font-family: Bitter-Regular;

    src: url({{ 'bitter-regular.ttf' | theme_asset_url }});

}


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


If you need more help with Custom Themes please see Custom Themes (For Developers).


Related articles: Using themes Support policy for site customizations

Need a little extra help customizing or designing your site? We have a wonderful team of experienced freelancers available to give you a hand! Check out our Experts Marketplace.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.