Our Custom Themes feature allows you to completely customize the appearance of your Thinkific site, by giving you access to the HTML/CSS.
ATTENTION: This article is no longer up to date, and should be automatically redirecting you to a more current article in our Developer-specific documentation. If for some reason you are not redirected, please use this link to see the most recent version of this article.
Plan Availability
Editing your theme code is available on all plans if you're on one of our legacy theme versions, and on the Pro plan or above for our Site Builder themes. 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.
About Themes
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 2.0 and higher (any themes with Page Builder or Site Builder feature). If you require documentation for Themes 1.9.9 and lower, please contact us.
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.
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.