Menu

Custom Themes (For Developers)

Note:  This is available on all plans if you're on one of our older theme versions, but for our Site Builder themes access to the theme editor requires our Business plan and above. This is because the Site Builder themes themselves are so much more robust and offer customization options within the platform itself that do not require coding.


Our Custom Themes feature allows you to completely customize the appearance of your Thinkific site, by giving you access to the HTML/CSS.

Themes are based on a templating language called Liquid. If you're familiar with HTML/CSS, you should find Liquid fairly easy to use. Here's where you can find some information to help you get started: Liquid for Designers. A full list of the available Liquid variables for Thinkific can be found here for Themes 1.9.9 and lower, and here for Themes 2.0 and higher (any themes with Page Builder or Site Builder feature). 


Included below are some basic instructions and best practice guidelines for using Custom Themes. Please note there are differences between Themes 2.0 and higher, so find the appropriate details depending on your versions. 


These instructions are meant for developers or anyone who is familiar with coding. If you are not familiar with coding, please contact a web developer who can help you out. For details on what we can and cannot provide support with for Custom Themes, please see here


How to Use Themes

Click on Design Your Site within your admin dashboard, and then click on Theme Library (or Themes if you aren't on Site Builder yet):


This is what the Themes Library page of your admin dashboard will look like by default. You will see your current theme, and below you'll see all your inactive themes which will include any you had previously installed. 


You can click on the highlighted buttons below to select Edit Code on any published or inactive theme. This will bring you into the HTML/CSS editor where you can make all your changes. 



Once you are in the theme editor, you can make changes to the templates or add your own custom CSS. Remember that you will need to press File > Save within the editor in order to see your changes take place.


Note: If you update your theme you will lose your customizations, so we recommend you keep your own changelog of the files you've edited so that you can manually add them back in if you wish to update your theme. We also recommend you duplicate the theme before you edit it, so that way you can have your separate custom theme.


Site Builder themes: Vogue, Vision, Empire


Folder structure:

Layouts -  This is the overall template that defines the layout and base html for your Thinkific site.

Sections - This applies to the sections specific to the Site Builder when you are editing your site.  

Site Pages - Edit the template of any of your site’s pages here.

Snippets - Specific code snippets that get called into different pages/areas on your site. There are also some files for entering in CSS or Javascript (you can tell by their file names, for example ‘theme_wide_css’ will be the place to put any custom CSS style that will apply across your entire theme).

Styles - These are the base SASS style files associated with your chosen theme.

Assets - Here you can upload fonts or images. For more details on how to use these please check out this article



Page Builder themes: Altitude, Horizon, Ice Cream


Folder structure:

Layouts -  This is the overall template that defines the layout and base html for your Thinkific site.

Sections - This applies to the Sections specific to the Page Builder when you are editing your Course. You can edit the templates, or Add New Section (Note: If you add a new section you will need to add it to the schema in the ‘course’ file in the Site Pages folder for it to show up in the Page Builder).

Site Pages - Edit the template of any of your site’s pages here.

Snippets - Specific code snippets that get called into different pages/areas on your site. There are also some files for entering in CSS or Javascript (you can tell by their file names, for example ‘theme_wide_css’ will be the place to put any custom CSS style that will apply across your entire theme).
Assets - Here you can upload fonts or images. For more details on how to use these please check out this article

Styles - These are the base SASS style files associated with your chosen theme. 


Default Themes: individual page themes 1.9.1 and lower


Folder structure:

Theme CSS - This is the base SASS/CSS file for all the styles for your default layout
Theme Layout - This is the overall template that defines the layout and base html for your Thinkific site.
Bundle Landing Pages - here you can edit the structure of the Default Bundle Landing Page or add a new custom template.
Course Landing Pages - here you can edit the structure of any Course Landing Page you have installed, or you can add a new custom template.

Packages - any installed Course Landing Page themes will have their SASS style files here. There is also a ‘package_css’ file that you can use for customizations.
Page Templates - here you can edit the structure of the default Additional Page template, or you can add a new custom template.

Site Pages - Edit the template of any of your site’s pages here.

Snippets - Specific code snippets that get called into different pages/areas on your site. There are also some files for entering in CSS or Javascript (you can tell by their file names, for example ‘theme_wide_footer_scripts’ will be the place to put any footer script files that will apply across your entire theme)

Assets - Here you can upload fonts or images. For more details on how to use these please check out this article




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.


custom themes, custom themes, custom themes, custom themes, custom themes

Did you find it helpful? Yes No

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