# 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](#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](#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: | Type | Target | Detail | Bubbles | Cancelable | Action | Expected | | --- | --- | --- | --- | --- | --- | --- | | `shopline:section:load` | section | `{sectionId}` | true | false | A section has been added or refreshed. | Re-run any necessary JavaScript for that section to work and show properly (as if the page has just loaded). | | `shopline:section:unload` | section | `{sectionId}` | true | false | A section has been removed or is being re-rendered. | Clean up related event listeners, variables, etc., to avoid disruptions and memory leaks during page interactions. | | `shopline:section:select` | section | `{sectionId, selected}` | true | false | A user has selected a section in the sidebar. | Ensure the section is in view and stays in view when selected (auto-scroll). | | `shopline:section:deselect` | section | `{sectionId}` | true | false | A user has deselected a section in the sidebar. | | | `shopline:section:reorder` | section | `{sectionId}` | true | false | A section has been reordered. | | | `shopline:block:select` | block | `{sectionId, blockId}` | true | false | A user has selected a block in the sidebar. | Ensure the block is in view and stays in view when selected (auto-scroll). | | `shopline:block:deselect` | block | `{sectionId, blockId}` | true | false | A user has deselected a block in the sidebar. | | 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: ```html {{#if request.design_mode }} {{/if}} ```
#### JavaScript In JavaScript, the global variable `Shopline.designMode` returns `true` if you are in the theme editor, otherwise `undefined`. For example: ```javascript if (Shopline.designMode) { // This will only execute in the theme editor } ```