Hi everyone,
I am a solo founder and I recently used an AI tool to try and fix an issue with my mobile menu. Unfortunately, the AI gave me bad code, and now my mobile menu is completely unresponsive, and my featured images under the hero section on the homepage are not displaying.
The change was made at the very bottom of my theme.liquid file (right before the tag).
What happened: The AI had me replace a scoped event listener for my menu drawer with a global document.addEventListener(‘click’, …) using event capturing and e.stopPropagation(). I suspect this global listener is swallowing the click events and breaking the native JS for both the menu and my homepage image sliders.
JS or css theme
I have attached a screenshot of the code diff (Red is the old code, Green is the AI code that broke it).
Could a developer please look at this diff and provide me with the correct snippet to replace the green code, or confirm if simply reverting to the red code will fix both the menu and the images?
Thank you so much in advance, I really appreciate any help!
Hi @Marc_Jacobson
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
Hey Marc,
Share a preview link to the theme you work with
if the theme is not published, then you can share a permanent preview link by right-clicking the “preview” and then “copy link address” – it should look like:
https://*.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=151493738550
Otherwise it’s hard to tell.
Generally:
Code on the right does not swallow all clicks – it only processes clicks when they are on or inside a summary inside details, otherwise it leaves the click processing to the original/default handler(s).
Again, hard to pinpoint the problem without seeing the HTML and CSS as well – maybe the class names in the code do not match your DOM?
Maybe clicks do not reach relevant elements because they are overlaid with other elements with CSS?
Looking at your diff, the diagnosis is spot-on. The new green code has two critical problems:
-
e.stopPropagation() with true (capture phase) — this intercepts all clicks on the document before they reach any other listeners, which is why your image sliders and other interactive elements are broken.
-
Global document.addEventListener(‘click’, …) replacing a scoped loop — far too broad, catching clicks that were never meant for the menu.
Simply revert to the red (original) code. Here’s the exact snippet to paste back in:
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.menu-drawer details, header details').forEach(function (item) {
const summary = item.querySelector('summary');
if (!summary) return;
summary.addEventListener('click', function (e) {
if (window.innerWidth > 989) return;
e.preventDefault();
const wasOpen = item.hasAttribute('open');
document.querySelectorAll('.menu-drawer details, header details').forEach(function (other) {
if (other !== item) other.removeAttribute('open');
});
if (wasOpen) {
item.removeAttribute('open');
} else {
item.setAttribute('open', '');
}
});
});
});
</script>
