Site Builder Previewer – Thinkific Developers

In Site Builder, there is the ability to preview the theme while making changes in the builder. This Previewer functionality does the following::

Hover over a section on the left hand panel to easily see in the preview panel the corresponding content
Indicate if the section you are looking to edit is off screen in the preview panel
Applies a border in the preview panel around the section the customer is currently editing
Allows you to hover over a specific section in the preview panel, which will display a button to go directly to edit that section

The Previewer functionality works by default or standard sections that are included in the Thinkific themes.

Add Assets

In order for the Previewer functionality to work with any custom sections you may be adding to the theme, you need to ensure that you have included the following attribute into your custom section files:

data-preview-item="custom-section-name"

The specific name of the section does not matter.

Here’s an example of how to use that attribute in the section file.

<section class=
  "
    banner
    {% include 'section_utility_background' %}
    {% include 'section_utility_content_alignment' %}
    {% include 'section_utility_height_preset' %}
    {% include 'section_utility_has_additional_prices' %}
    {% include 'section_utility_has_free_trial' %}
  "
  data-preview-item="banner"
>

The Site Builder Previewer will only display based on sections that include that attribute, so adding the attribute to your custom sections will ensure that your customers can use the Previewer functionality to easily see which sections they are editing, or jump into editing a section from the preview panel.

Was this article helpful?