Integration with the Theme Editor​

When merchants customize sections through the theme editor, the HTML of these sections is dynamically added, removed, or re-rendered in the existing DOM without reloading the whole page. However, any related JavaScript that runs on page load will not run again.

Additionally, you must ensure that when a section or block is selected, it has a selected state. For example, a carousel section should scroll into view and slide to the selected carousel block when the section is selected, pausing the automatic slide.

To aid in recognizing theme editor actions, like selecting or rearranging sections and blocks, you can utilize the JavaScript events triggered by the theme editor.

You might also want to stop certain code from running in the theme editor. To do this, you can use Handlebars and JavaScript variables to detect the theme editor.

JavaScript Events​

The theme editor sends JavaScript events for sections and blocks that cannot be bubbled or cancelled. Each event has a target (event.target), which is the corresponding section or block element. Section elements are wrappers generated by the layout engine.

Besides section and block events, the theme editor also triggers events when the theme editor preview inspector is turned on or off.

The table below outlines the events emitted by the theme editor:

In the table above, blockId stands for the block ID, sectionId stands for the section ID, and load indicates whether the event was caused by a section refresh or user selection. The value of load is either true or false.

Detect the Theme Editor​

You can detect if you are in the theme editor using Handlebars and JavaScript.

Handlebars​

The Handlebars request object has a property, design_mode, which returns true if you are in the theme editor, otherwise false. For example:

{{#if request.design_mode }}
	<!-- This will only display in the theme editor -->
{{/if}}

JavaScript​

In JavaScript, the global variable Shopline.designMode returns true if you are in the theme editor, otherwise undefined. For example:

if (Shopline.designMode) {
	// This will only execute in the theme editor
}