## **🔍 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**

1. **Log in to your Shopify Admin** and navigate to **Online Store → Themes**.
2. Next to your live theme, click **Actions → Edit Code**.
3. In the file list on the left, open **Layout → theme.liquid**.
4. Locate the Search Atlas script you previously added. It will look similar to a **`<script>`** tag containing your unique tracking ID.
5. **Cut the script tag** from its current position.
6. 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.
7. Click **Save**.
8. 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.