Hi everyone, How do you usually make sure custom JavaScript continues to work correctly when Shopify sections are added, removed, or reloaded through the theme editor?
You need to listen to Shopify’s Theme Editor design events to re-initialize your custom JS whenever a section reloads.
Wrap your JS logic in a function and bind it to the shopify:section:load event like this:
document.addEventListener('shopify:section:load', function(event) {
// Re-initialize your custom JS functions here
});
This ensures your scripts run seamlessly both on live page loads and within the Theme Editor customizer!
The shopify:section:load approach works, with one important addition: clean up on shopify:section:unload. If your JS binds click handlers or starts timers on load, re-initializing on every section reload without removing the old listeners means they stay alive and fire twice — duplicated carousels, double-firing menus, or timers that multiply.
A pattern I use: one init function and one cleanup function per section. On shopify:section:load, run init. On shopify:section:unload, run cleanup first so the fresh init can re-bind cleanly. For sections built from blocks, also listen for shopify:block:select and shopify:block:deselect when the JS needs to know which block the merchant is editing.
The full set of events Shopify fires from the theme editor is documented: shopify:section:load, shopify:section:unload, shopify:section:select, shopify:section:deselect, shopify:block:select, shopify:block:deselect.