Custom Themes - Using Assets

As of V.1.3.0, you can upload and use assets (images, fonts, etc.) in your theme.

Uploading Assets

Using Assets

Using CSS Uploaded as an Asset

Using Font Files Uploaded as an Asset

Important Things to Note 

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

If you have a custom font that you would like to add to your Thinkific site, check out the following instructions. This is not required for Google fonts. See the simplified process for Google fonts below.

1. Download your desired font family 
2. Extract the files to your computer from the .zip file.
3. Find the standard font in the family (e.g. AbrilFatface-Regular.ttf)
4. Go to Design Your Site > Theme Library
5. Click on the ellipses (⋮) next to the Build button your Published Theme
6. Click Edit Code
7. Expand the folder called Assets
8. Click Add New Asset and upload your font file(s)
9. Go to the Styles folder
10. Import the font through the _overrides.scss file
    
    Example:
    @font-face {
    font-family: AbrilFatface-Regular;
    src: url({{ 'AbrilFatface-Regular.ttf' | theme_asset_url }});
    }
    
    
    
11. Open the manifest.json file
12. Add the following to all instances of the list of available fonts as such:
    
    {
              "value": "Font-Name",
              "label": "Font Name",
              "group": "Sans-serif or serif"
 }
    
    Example:
    {
              "value": "AbrilFatface-Regular",
              "label": "AbrilFatface Regular",
              "group": "Sans-serif"
 }  
    
    
13. Save manifest.json
14. Go to Design Your Site > Site Builder > Theme Settings tab
    
15. Change fonts to your custom font
16. Save your changes

Using Google Fonts

If you are using a Google font, you don't need to download the file and can simply reference it in the manifest.json file.

1. Go to Google Fonts here: https://fonts.google.com/
2. Locate your desired font and click on it to view details
3. On your desired style, click Select this style 
4. Click Embed
5. In the CSS view, you'll see the name of the font that you'll need to reference
   
6. Return to your Thinkific site
7. Go to Design Your Site > Theme Library
8. Click on the ellipses (⋮) next to the Build button your Published Theme
9. Click Edit Code
10. Open the manifest.json file
11. Add the following to all instances of the list of available fonts as such:
    
    {
              "value": "Font-Name",
              "label": "Font Name",
              "group": "Sans-serif or serif"
 }
    
    Example:
    
    {
              "value": "Barlow-Regular",
              "label": "Barlow",
              "group": "Sans-serif"
 }  
    
    
12. Save manifest.json
    
13. Go to Design Your Site > Site Builder > Theme Settings tab
    
14. Change fonts to your custom font
15. Save your changes

For help with custom fonts on Legacy or non-Site Builder themes, 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).

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.