Shopify JavaScript not functioning properly - need assistance

[Isaac_Cosmos]

I’m having trouble getting my JavaScript to work on my Shopify theme. I want to create a second promotional banner that appears underneath the existing one, so there will be two banners stacked vertically. I followed some online tutorials but the script isn’t executing properly.

Here’s what I’m trying to do:

function addElementAfter(targetElement, elementToAdd) {
  targetElement.parentNode.insertBefore(elementToAdd, targetElement.nextSibling);
}

var newElement = document.createElement("div");
newElement.innerHTML = "<div class='secondary-banner'>FAST DELIVERY AVAILABLE</div>";
var existingBanner = document.getElementById("top-announcement");
addElementAfter(existingBanner, newElement);

The script doesn’t seem to run at all. Has anyone encountered similar issues with custom JavaScript in Shopify themes? Any suggestions would be really helpful.

[alexlee]

Check your theme’s script loading order - I hit this same issue when theme updates kept overriding my custom JS. Don’t modify core theme files. Add your script through the theme customizer or as a separate asset file instead. Also, double-check that your announcement banner actually uses ‘top-announcement’ as the ID. Most themes use classes or data attributes instead. Still not working? Try window.addEventListener('load', function() { ... }) instead of DOMContentLoaded. Shopify lazy-loads banner elements sometimes. Test in both preview and live - Shopify’s editor acts weird compared to the actual storefront.

[JackHero77]

Had this exact issue customizing my Dawn theme last month. Your script’s probably running before the DOM element loads. Shopify themes load content dynamically, so the announcement bar might not exist yet when your JavaScript fires. Wrap your code in a DOMContentLoaded event listener or stick it at the bottom of theme.liquid right before the closing body tag. Also check that ‘top-announcement’ ID actually exists - inspect the element in dev tools. Mine had a completely different ID than I thought. One more thing - make sure your theme doesn’t have Content Security Policy restrictions blocking inline scripts.

[amelial]

check ur browser console for errors first - thats usually the quickest way to debug. also, some shopify themes use ajax loading which can mess with timing. try adding a simple console.log('script loaded') to see if your code even runs. might be a caching issue too - clear ur browser cache or try incognito mode.

[sophialee92]

I’ve hit this exact timing issue before. Your script’s running before Shopify finishes rendering the page elements. Ditch DOMContentLoaded and try querySelector with proper error handling instead. First, check if document.getElementById('top-announcement') logs null in console - that’ll confirm the problem. For Shopify’s dynamic loading, I’ve had better luck with setTimeout delays or MutationObserver. Also make sure you’re not loading the script multiple times - causes weird theme bugs.