Structure of a Site Builder Theme – Thinkific

Site Builder themes are our most current site themes and this article provides an overview of Site Builder theme structure. For more on editing theme code, see Custom Themes.

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.

Thinkific Themes are made up of blocks of code. These live at various levels and the following directories/folders are included within a Site Builder theme:

Layouts

Layouts

Currently, Site Builder supports one Layout file, called default.

You can disregard + Add New Layout for now, as we will be focusing on editing your existing theme.

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

{{ content_for_layout }}

Everything above and below this variable will appear everywhere on your Thinkific site (with the exception of the Course Player). This is where your main site layout and content live, as well as the header and footer sections.

Inside {{ content_for_layout }} is where the selected Site Page goes.

Sections

Within the Sections folder, you can find all of the available Site Builder sections, and can even + Add New Section!

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:

Within the Sections folder, click + Add New Section
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.
Click Add.
You’ll find this section now in your Sections folder, and when you select it, it will not have any code included yet. You can use the existing sections as a template for reference. Generally you’ll want to include:
- The HTML
- Any 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 use this new section in Site Builder, you must add the file to the schema of the page, under “sections” and then “options” and/or “default”:

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

You can also refer to this video walkthrough for adding a new Section:

Site Pages

A Site Page is made up of sections. If you look at a Site Page, for example, the sign_in page, you’ll see a couple of things. You’ll first see the default content at the top. In this example, the signin_form section is on the sign_in page:

Here you’ll also find the {{ content_for_page }} variable. This is what Site Builder user interface has control over.

At the bottom you’ll see the schema. This page only has sections in the schema, and this is where the options that Site Builder can grab from and the default Site Builder that are included by default are listed.

There is also the default contents, right above the {{ content_for_page }} variable. This is what is not accessible from Site Builder but still appears on this specific page. In this example, it’s the signin_form section.

Snippets

Sections are then broken down even smaller, into Snippets. Snippets are small pieces of code that can be used in multiple places and they are inserted into a section in an include tag, which looks 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.

More about Variables:

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 of our Liquid variables see HERE.
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

You can see more about using Assets HERE.

More Developer Resources

Custom Themes (for Developers)