This help article is meant to act as a basic troubleshooting guide for the Meteor Mega Menus app for Shopify. Below you'll find a list of common issues, fixes, and other troubleshooting tips.

If you change your store's password or edit the app's proxy settings (both of which are done in the Shopify admin), then you may be shown an error page in the app admin that states there is a connection error. This error page also allows you to update the app's settings.

To fix the problem, make sure that the storefront password and proxy URL in the app's settings match what Shopify has on file.

This is the most common problem we see, and luckily it's the easiest to fix!

First and foremost, double-check and make sure that you’re viewing the same theme that Meteor has been set to use. The changes you make in Meteor will only apply to the currently selected theme, so it's imperative that you have the app installed on the proper theme in the store.

There are two ways to view and change the theme that Meteor is using:

Second, make sure that you clicked the 'Save' or 'Confirm' button after making changes to mega menus in the app admin. This may be obvious, but everyone makes mistakes from time to time! 🤗

Third, make sure that the mega menu you're editing in the app has been published to the theme. Each mega menu in Meteor can be published and unpublished at any time, which gives you greater control over each dropdown menu on the storefront. To make sure the changes you make in the app are displayed on the storefront, a mega menu in Meteor needs to be published.

Here are some helpful tips if you notice that certain mega menus are displaying on the storefront, but others are not:

First, check that you are viewing the correct theme that the app is using. Clicking the ‘Preview’ button in the app's header is always a good way to open up the correct theme in a new browser tab.

Second, make sure that the mega menu(s) you're working on are published to the theme. If a mega menu is unpublished it will not be displayed on the storefront.

Third, there may be an issue with how the app's mega menus are being attached to the selected link in the theme's navigation bar. In some cases, you may need to use the ‘Manual attachment’ setting (found in the Menu Placement section of the app admin) to assign your menu to the correct link.

It's important to note that the app's mega menus are designed to use the font that is being used by the header in the store's theme. For some themes, this means that the font family that is shown in the app when editing mega menus may be different from the font family that is being used by the store's theme. This is somewhat expected, and as long as the mega menus on the storefront are using the correct font there's nothing to worry about.

Since the app is embedded into the Shopify admin there is a limited amount of screen real estate. This means that the overall width of the mega menu shown in the app admin may be different than the actual width of the mega menu on the storefront. This is most common with mega menus that are set to a width of "Full" or "Wide". We suggest using a computer with a large screen resolution or testing customization changes on the storefront if this becomes bothersome.

There may be cases where a store's theme (or another app that is installed on the store's theme) will overwrite the app’s styling for the mega menus. Please contact us if you’re having this issue, and we’ll be happy to step in and try to address the problem using the app's built-in CSS editor 😎

If you notice that the positioning of your mega menus is not ideal when viewing the mega menus on the storefront, then you may need to adjust the vertical offset of the mega menus using the app's built-in settings.

Meteor is designed to automatically detect the theme’s mobile breakpoint. However, this setting may need to be adjusted if the store's theme uses some unique markup or an unfamiliar layout.

Follow the steps below to adjust the mobile breakpoint:

Meteor is designed to automatically hide the theme's native dropdown menus for any link that has a mega menu attached. The end result is that the theme's dropdown menu is hidden, and the app's mega menu is shown instead.

There are some cases where the app is unable to hide the theme's native dropdown menus. When this happens, some extra CSS may need to be added to forcefully hide the theme's menus. 

You are welcome to hide the menus on your own using the app's CSS editor, or you can contact our Support team and we'll be happy to make the changes on your behalf 👍

If you notice that certain elements on the storefront are overlapping the app's mega menus, then the z-index for the mega menus may need to be adjusted.

Follow the steps below to adjust the z-index:

Sometimes Meteor's mega menus simply will not show up on the storefront. Most of the time, this is the result of the store's theme using some unique markup that is preventing the app's scripts from automatically attaching the mega menus. There are other cases where another script is breaking or overriding the app's scripts.

To begin troubleshooting this type of issue, you'll first want to cover the basics by the process of elimination.

If the problem is still occurring after going over the basic checklist, then you'll want to make sure that the mega menus are attached to the proper links on the storefront. You can use the app's JS API to debug mega menu attachment, but in most cases, it's easier to simply inspect the element(s) that are supposed to have mega menus using your browser's dev tools.

Any links or buttons that have Meteor attached will have a special data attribute added to the markup. The attribute is data-has-meteor-menu, and the value should be true. See this screenshot for an example of what this looks like for an anchor tag:

Attribute missing

If you do not see the data attribute for data-has-meteor-menu when inspecting an element that is supposed to have a mega menu, then it's safe to assume that Meteor is not attached to the link or button you're looking at.

Attribute exists

If you can see that Meteor is attaching to the proper elements in the theme, then the issue is most likely a JavaScript conflict that is preventing the menus from being displayed. For cases like this, we suggest contacting your theme developer so they can adjust the theme's code to resolve the conflict.