Theme Extensions

IMPORTANT: This feature is currently in CLOSD BETA and only available by request. If you would like to use it, please reach out to us at apps@thinkific.com.Link

Requirements:Link

  • This feature assumes that you are a Thinkific Partner with access to the Partner Portal already. See Becoming An App Partner
  • This feature is behind a feature flag. It is only accessible to partner accounts that we have turned it on for. Contact us at apps@thinkific.com to request access.

Creating your first Theme ExtensionsLink

Theme Extensions can be registered in a Thinkific App and become accessible to Course Creators in Site Builder Sites when the app is installed.

Theme Extensions

Currently, Theme Extensions include the ability to make new Theme Sections available to customers. We will look at further additions to this in the future.

To build your first Theme Extension, you will need to do two things:

  1. Create an App in your Partner Portal
  2. Build a zip file that includes the necessary Theme extension files

Building a Theme Extension Zip FileLink

A Theme Extension Zip File contains all of the relevant code for installing custom sections into a Site Builder Site.

We recommend that you build your custom sections in the Theme Editor of a Site Builder Theme for testing purposes before installing it in a working app.

In order for a zip file to successfully be uploaded to an App, it must be created from the root of the project folder and contain a specific file structure.

Zip File StructureLink

Here is a Demo Zip File that you can use as a starting point.

Every Zip File must contain the following files

FileDescriptionsreadme.mdThis is where you can document your App Extension.manifest.jsonThis is where you will be able to provide additional info about your App Extension, such as name, author, repository, documentation and support URLs.sections/ (folder)This should contain valid Liquid templates. Upon installing the app, a tenant will be able to add these sections to any page in Site Builder.

Notes:

  • The section files must be uniquely named.
  • The section files must have a valid {% schema %}. Please refer to the schema section in one of the section files as an example
Folder StructureLink
|- readme.md
|- manifest.json
|- sections/
|  |- section-name-1.liquid
|  |- section-name-2.liquid
Detailed Section DescriptionsLink

When a Course Creator configures your section to their Site Builder, they will see a description above the settings. You can customize this description to include links, images, or video.

Example:

{% schema %}
{
  "label":"Astronauts",
  "description":"This is an astronauts app! <br/> For more details, visit our <a href='example.com'>website</a>. <br/> <br/> <img src='https://cdn.britannica.com/35/210535-050-60B90533/Roberta-Bodnar-Canadian-astronaut.jpg' width='200px' /> <br/> <br/> <iframe width='320' height='180' src='https://www.youtube.com/embed/CAxlduB68T4' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>",
  "previewImageUrl":"https://cdn.thinkific.com/57/20210222/bd6ff9e981480e3e5327fd4ee1b2e9ff.png",
  "previewDescription":"This section is only for Astronauts",
  "settings":[]
}
{% endschema%}

Theme Extensions

Theme Extensions

App and Extension VersioningLink

TBD - This is something that we are still working on. Currently, if you re-upload a new Theme Extensions Zip File to an existing app, the changes you make will have an immediate effect on all sites that the App is installed on. This means if you remove an existing section, it will also removed it from all Thinkific Sites.

Customer ExperienceLink

Once your app has been installed on a Thinkific Site, the sections that you have defined become immediately available when selecting a new section to add to a page in Site Builder.

These sections can be found at the bottom of the Section Page Picker in a group with the name of your App.

Customer Experience

Common IssuesLink

Uploading a zip failsLink

  • Verify that your sections contain a valid schema. A basic schema should look like this:

    {% schema %}
      {
        "label":"My Section",
        "description":"",
        "previewImageUrl":"",
        "previewDescription":"",
        "settings":[]
      }
    {% endschema %}

Uploading a zip succeeds but sections are not visible in Site BuilderLink

  • Verify that your zip contains a sections folder and that it contains at least one .liquid file
  • Verify that your zip was created from the root project folder, rather than from compressing all the contents of the zip folder.

Other Notes and ConsiderationsLink

  1. This is an MVP.
  2. It's a good idea to test sections on a sandbox site first.
  3. No malicious code in Liquid templates (infinite loops, redirects, etc).
  4. For now, all sections are available on all pages.
  5. There is no versioning. Re-uploading a zip will override tenant's app sections immediately.
    • The exception to this is deleting pre-existing app sections. If a zip that omits an existing app section is re-uploaded, the section will only be deleted if the app has not been installed by any active tenants. An active tenant is one who is not on a sandbox plan or on a cancelled plan.
  6. When a tenant changes their theme, their app sections are removed/overwritten (just like regular sections).