Thinkific Themes are made of a variety of components organized into the following directories/folders:

• Layouts
• Sections
• Site Pages
• Snippets
• Styles
• Assets

Layouts

In current versions of Site Builder, only one Layout file, called default is recognized. Any additional files added to this folder will not be recognized by the Theme.

The default layout is a global file that defines the base structure of all pages in a Theme. Any code added to the default layout will be pressent on all pages that are built in the Site Builder (This excludes single page apps like the Course Player and Communities, etc). This is where your main site layout and content live, as well as the header and footer sections.

In the default file, you will see a very important variable: {{ content_for_layout }}

Inside {{ content_for_layout }} is where the dynamic content will be displayed based on the specified page. This variable should not be removed from the default page.

Sections

Sections are the building blocks of all pages in Site Builder, and the sections folder in a Theme defines the available sections that the end use can include in their page while they design and build their website.

Adding a New Section

Newly added sections do not show up in Site Builder automatically, but you can add them to the schema of the page you want to use them on.

To add a new Section:

1. Within the Sections folder, click + Add New Section
2. Name the Section. This is the name of the file, so it should be all one word. You can use underscores for spaces, if necessary.
3. Click Add to create the new section file.
4. Now that you've created a new section file in the sections folder, you can add your content to define your sections structure, style, and functionality. Generally you’ll want to include:

• All relevant HTML elements.
• Section specific CSS between {% style %} tags.
• You should also include {% schema %} to allow the section to have a label and settings. The {% schema %} section is a JSON object. The label is what you will see when you go to add the section to your page from Site Builder user interface, so we recommend including this. A simple schema with just a label will look like this:

{% schema %}
{
"label":"My New Section"
}
{% endschema %}

To make this new section available, you must add it to the schema of each Site Page that this section should be available on. We'll learn about Site Pages next.

Add the file to the schema of the Site Page, under “sections” and then “options” and/or “default”.

Note that JSON formatting is extremely specific. Your files will not save if you’re syntax is incorrect (missing a comma, quotation mark, or bracket.)

Site Pages

Site Pages define the various page views that are available to the end user when editing their website in Site Builder.

Each Site Page generally contains 2 key elements:

1. Default Contents - This is all of the content that is static on the page. This may include the presence of sections that cannot be removed by the end user.
2. Custom Sections - This is the dynamic additions of sections to the page, as defined by the end user in Site Builder.

A Site Page must include a {$ schema $}, complete with a "sections" object that defines the sections that may be added to the page and the {{ content_for_page }} variable, which defines where the custom sections will be injected.

Note: When creating a new Section (see above), it must be added to this schema before it becomes available in Site Builder.

Snippets

Snippets are small pieces of reusable functionality that can be used in multiple sections/pages. Snippets can be inserted into a section using an include tag, like this: {% include 'course_action_buttons' %}

In the above example, course_action_buttons is the name of the Snippet’s filename. The only thing you need to do to include a Snippet in your section is save it in the Snippets folder.

A Snippet can contain other Snippets. Snippets and Sections will also contain Variables.

Variable formatting:

Variables are brought into your theme code between double curly brackets {{ like_this }}. For example, {{ content_for_page }} and {{ content_for_layout }} are variables that come from Site Builder. Other variables that come from Site Builder start with {{ section.settings…. }} These represent data that is inputted through the Site Builder interface. For example, in the Text & Media Section, the entire rich text content that you’ve added into that section is represented by {{ section.settings.body }} If you’re building your own section, you can include settings options in your schema JSON.

Liquid API:

We also make a huge amount of information available via our Liquid variables and drops. You can use these to populate your sections with data. For a comprehensive list check out our Liquid variables.

We recommend referring to this documentation for using Liquid templating language.

Styles

These are the base SASS style files associated with your chosen theme. The _overrides.scss file can be used to quickly alter particular classes.

Assets

The Assets folder is a place where you can upload images, fonts, and code files. The following file types are supported: .txt, .js, .css, .jpeg, .jpg, .png, .tiff, .bmp, .gif, .ttf, .svg, .eot, .woff, .woff2, .htm, .html, .json and ,.map

Learn more about Assets.

Legacy Themes

Thinkific has been through a number of iterations of various themes in the past. While most customers no longer have access to these themes, a small portion of customers are still using a legacy theme on their site.

Page builder themes

Page Builder Themes include Altitude, Horizon, Ice Cream. These themes are no longer available to new customers, but they can still be found on customer sites!

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.

Up Next: Learn more about Assets.