Shopify theme editor removes event listener's in section update

Store Design
, , , , ,

Topic summary

A developer is experiencing an issue with event listeners in a custom Shopify theme section.

The Problem:

  • An event listener attached to a button works on initial page load
  • When any section setting (like a checkbox) is changed in the theme editor, the event listener stops functioning
  • The button click event no longer fires after settings updates

Root Cause:

  • Shopify’s theme editor re-renders section HTML whenever settings change
  • This re-rendering removes previously attached event listeners

Question:

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

The post includes code snippets showing a basic custom section with a button, checkbox setting, and JavaScript event listener. This appears to be an unresolved technical question about handling dynamic DOM updates in Shopify’s theme editor environment.

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 %}