Common issues & fixes

Overview 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. Changes to existing mega menus are not being reflected on the storefront This is the most common problem we see, and luckily it's the easiest to fix! Theme setting 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: Use the ‘ Theme ’ dropdown, found in the top bar of the app admin Use the ' Change themes ' page in the app admin Direct link: https://meteor.heliumdev.com/themes/change Save your changes 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! 🤗 Publish the mega menu Third, make sure that the mega menu you're editing in the app has 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. Certain mega menus are not displaying when hovering or tapping on the attached link Here are some helpful tips if you notice that certain mega menus are displaying on the storefront, but others are not: Theme setting 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. Publish mega menu 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. Menu attachment 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. Pro-tip: You can learn more about manual menu attachment using this help article. The styling of a mega menu looks different in the app admin when compared to the storefront Menu fonts 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. Menu widths 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. Theme styling conflicts 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 😎 Mega menus are too far away or too close to navigation buttons 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. Follow the steps below to adjust the vertical offset: Open the app admin and click the three dots from the top in the right-hand corner to open up the settings menu. Select Settings > General. Once on the Settings page, you can adjust the Vertical Offset settings for either Desktop or Mobile. Positive pixel values will move the mega menus down, and negative pixel values will move the mega menus up. Make sure to click 'Save' once you're done. Mega menus for mobile are showing on desktop (and vice versa) 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: Open the app admin and click the three dots in the app header (found at the top of the app, in the right-hand corner). Select Settings > General. Once on the Settings page, you can adjust the app's Mobile breakpoint setting. Type in your theme's mobile breakpoint, and make sure to click 'Save' once you're done. The theme's native menus are still showing 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 👍 Mega menus are hidden behind other content 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: Open the app admin and click the three dots in the app header (found at the top of the app, in the right-hand corner). Select Settings > Advanced. Once on the Advanced settings page, you can adjust the Menu Layering (z-index) setting. You can make the value higher to see if this solves the layering issue. None of the app's mega menus are displaying on the storefront 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. Basic checklist Make sure that Meteor is installed on the correct theme Check the 'Theme' setting in the top bar in the app admin Make sure at least one mega menu is published Make sure that Meteor's code is running on the theme Run MeteorMenu commands in console Search for Meteor's code in the page's source code Check for Meteor's code in the tags (normally found in layout/theme.liquid ) Make sure the theme has Meteor's snippet and assets ( snippets/meteor-menu.liquid , assets/meteor-menu.css , assets/meteor-menu.js ) 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. Inspect the element(s) 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 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. To fix the attachment problem you can use the app's built-in settings for ' Navigation selectors ', which is found in the app admin under Settings > Advanced . You can learn more about navigation selectors using this help article. 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.

Still puzzling over something?

Custom CSS

Supported themes

Liquid files

Duplicate your theme

Display images for 'Page' menu items