Shopify theme editor removes event listener's in section update

Retired Boards Appdev Partners Discussion
, , ,

Topic summary

A developer is experiencing an issue with a custom Shopify theme section where JavaScript event listeners stop functioning after section settings are updated in the theme editor.

The Problem:

  • Created a custom section with a button and checkbox setting
  • Event listener works on initial load
  • After changing any section setting (like the checkbox), the button’s click event listener stops firing

Root Cause Identified:

  • Shopify’s documentation confirms that section HTML is re-rendered whenever settings change
  • This re-rendering removes the original DOM elements and their attached event listeners

Question Posed:

  • The developer asks whether they need to re-add all event listeners and restart DOM-related logic every time the section updates

The thread appears to be seeking confirmation of the proper approach or potential workarounds for maintaining event listeners through section updates in Shopify’s theme editor.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

I created a simple custom section with one button, and one schema setting (a checkbox). I also created a script where I added an event listener to the button. The problem is that the first time the custom section is loaded the button listener works properly, but once I change any settings of the section, in this case, the checkbox, the button event listener stops working and the event doesn’t fire anymore.

In the docs I found that with every change in the section setting the HTML will be re-rendered, added, or removed, that means that every time the section is updated I have to add all the event listeners again, and ‘restart’ all the DOOM related logic that I had done in javascript?

Thanks a lot, here is the code in case it helps

<div class="section-wrapper">
<button id="button1" type="button">
Click me
</button>
</div>

<script>
const button1 = document.querySelector("#button1");
button1.addEventListener('click', () => {
console.log('Hello world');
});
</script>

{% schema %}
{
"name": "Custom Section",
"tag": "section",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "checkbox",
"label": "Checkbox",
}
],
"blocks": [],
"presets": [
{
"name": "Custom Section",
"blocks": []
}
]
}
{% endschema %}