🔍 What Is Happening and Why
When you add the Search Atlas tracking script directly to your Shopify theme's theme.liquid file, it can interfere with how Shopify loads JavaScript for interactive elements like the mobile menu. Instead of rendering as a collapsible menu, the navigation may appear as plain, unstyled text. This happens because script placement affects the order in which the browser parses and executes JavaScript on the page.
⚠️ Before You Begin
Always back up your theme before editing any liquid files. In your Shopify Admin, go to Online Store → Themes → Actions → Duplicate to create a safe copy. This ensures you can restore your site instantly if anything goes wrong.
✅ Step-by-Step Fix
- Log in to your Shopify Admin and navigate to Online Store → Themes.
- Next to your live theme, click Actions → Edit Code.
- In the file list on the left, open Layout → theme.liquid.
- Locate the Search Atlas script you previously added. It will look similar to a
<script>tag containing your unique tracking ID. - Cut the script tag from its current position.
- Scroll to the very bottom of the file and paste the script immediately before the closing
</body>tag. Placing the script here ensures all page elements — including your mobile menu JavaScript — load fully before the tracking script runs. - Click Save.
- Open your storefront on a mobile device or use your browser's mobile preview mode to confirm the menu is working correctly.
💡 Why Script Placement Matters
Shopify themes rely on JavaScript to power dynamic components like mobile menus, drawers, and sliders. When an external script is placed inside the <head> tag or early in the <body>, it can block or conflict with the theme's own scripts as they load. Placing third-party scripts just before the closing </body> tag is a best practice that prevents these conflicts and keeps your store's functionality intact.
🚫 Common Mistakes to Avoid
- Do not place the script inside the
<head>tag. This is the most common cause of mobile menu breakage. - Do not add the script mid-way through the
<body>. This can still interrupt theme JavaScript depending on your theme structure. - Do not add the script to section or snippet files. The script should only appear once, in theme.liquid, before the closing
</body>tag. - Do not skip the backup step. Editing live theme code without a duplicate is risky.
🔄 If the Menu Is Still Broken After Moving the Script
If repositioning the script does not resolve the issue, the problem may be related to your specific Shopify theme's JavaScript architecture. Try the following additional steps:
- Open your browser's developer tools (right-click → Inspect → Console) and check for any JavaScript errors that appear when the page loads. Share these error messages with support if needed.
- Temporarily remove the Search Atlas script entirely, save, and test the mobile menu. If the menu works without the script, the script is confirmed as the source of the conflict.
- Check whether your theme uses a defer or async attribute on its own script tags. If so, try adding defer to the Search Atlas script tag as well:
<script defer src="...">``</script>.
📋 Quick Reference — Correct Script Placement
- Correct location: Immediately before
</body>in theme.liquid - Incorrect location: Inside
<head>, at the top of<body>, or inside any section or snippet file - One instance only: The script should appear exactly once across your theme
💬 Need More Help?
If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.