Menu

Custom Themes (For Developers)


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: https://github.com/Shopify/liquid/wiki/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. 


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 designer/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 Themes within your admin dashboard. 

[9223440d9cd222aef31e0b37feb29c11]_1.png


This is what the Themes page of your admin dashboard will look like by default. From here you can select a default theme to be applied to your Course Landing Pages. To create a Custom Theme or edit the HTML and CSS of an existing Theme you will want to click on Manage My Themes in the top right corner. 


From here you will have the option to Publish another installed Theme, Create New Theme, Import Theme, or edit an existing Theme with the Edit HTML/CSS button.

[f798d2e39d54183bb753b53520a5043b]_2.png

Clicking on the Edit HTML/CSS button will bring you into the editor where you can make all your changes. 


Don’t forget to press File > Save when you are done in order for changes to take effect live on your site! 


Themes 2.0 and higher
3.png


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. 


Best practice:

In our version 2.0+ themes work a little differently than our previous versions in that any time you Update or switch themes, it creates a new file. This means that any customizations you have made to Ice Cream Version 2.2.4 will not carry over to Ice Cream Version 2.3 for example. 


Your changes will remain in whatever version file you were editing, and you can always re-Publish it, but best practice is to make a log of all of your changes and to make sure you are keeping your code organized. For example, if you’re just making CSS changes, I would use the ‘theme_wide_css’ or ‘page_specific_css’ files for any CSS customizations rather than going into the base codes in the Styles folder. This way, you always have the defaults available, and you know where all your customizations are so it would be easy to copy & paste them to an Updated theme version. 


Themes 1.9.9 and lower

4.png


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


Best practice:

We recommend that you Create New Theme when you make customizations, this way you always have a clean fresh default to fall back onto. In your newly created Theme file, you can make all your changes and make sure it’s Active when you’re ready for it to be live (also check in the Theme Settings, that all the pages are checked off).

When you update Course Landing Page themes, they will override their specific files within your editor in the Course Landing Pages and Packages folders. So if you have made changes to their templates or base CSS styles in these folders, your customizations may be overridden. So it’s best to keep a copy of any code in case you need to replace it. 


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.