Welcome

👋Welcome to Meteor's help page and docs! We hope it's a cozy place for you. If you need any help setting up your mega menus, hit the chat box in the bottom-right corner or drop us an email at support@heliumdev.com.

Setup

Getting Started

It’s likely that the header of your store is the first thing your customers look at. So naturally, the header menus will receive a majority of attention. For this reason, your Shopify store should feature menus that customers love. Meteor’s goal is to help you build mega menus that are both eye-catching and navigable, so customers have easy access to your products. ✨

If you’re not sure how to start building mega menus, don’t panic. These docs will guide you through the setup process, so that you have the tools you need to build top-notch mega menus for your store. We also provide email & chat support if you have any questions at all. Before jumping in, here’s a few important details to keep in mind:

1. All mega menus created with Meteor are tied to your Shopify navigation. We recommend to first set up your menus in your Shopify navigation, then attach & customize the mega menus using Meteor.

2. As you build your mega menus, we recommend focusing on organization, discoverability, clarity, and of course aesthetics. Build menus that will catch your customer’s attention and help them find what they need - quickly and effortlessly.

3. Each mega menu created in Meteor should link to one of your store’s main menu items. This is done by editing the ‘Menu placement’ settings in the app (we’ll explain a bit more about this process in a later section).

Duplicate Your Theme

Before building the menus, we first recommend duplicating your store’s live (aka published) theme so that the new menus don’t interfere with your live store. Here’s how to duplicate your theme:

  1. In your Shopify admin, go to Online Store

  2. Navigate to the theme you want to duplicate and click Actions > Duplicate

Pro tip: We recommend renaming this duplicate theme with the keyword ‘Meteor’ so that you can easily distinguish it from your other themes.

Setting Up Your Navigation Menu Links

Since the mega menus are tied to your current store’s navigation, make sure you’ve set up your navigation menus in Shopify. In other words, all menus should first be created in your Shopify navigation, then linked & customized in Meteor. If you haven’t set up these menus yet, we suggest doing that now. To do that, head to the admin area for your store and click on Online Store > Navigation.

  1. Open up your Main Menu (or the menu you’re using in your theme’s header) and take a look at your menu items contained within this menu.

  2. Click ‘Add menu item’ to start adding items to your menu.

  3. To add sub-items (nested menus), simply drag and drop the items by moving them to the right.

  4. When you’re done adding your menu items, be sure to click SAVE.

Here is a quick video showing the process:

Menu tiers

When you set up your menu data from within your Shopify admin, you’ll want to decide beforehand how many levels of links (aka tiers) you want to use for your mega menus. Single navigation menus have a maximum of 2 sub-tiers and separate menus can use up to 3 sub-tiers.

When using a separate menu:

A maximum of 3 total sub-tiers possible. If you’d like to use a different menu from within Shopify, you can create a separate menu and then use the link data from that specific menu for the mega menu content. If you need more than 2 sub-tiers, you’ll need to use this method. Here is an example:

“Main menu”:

  • Mens
  • Womens
  • Children

Separate “Mens” menu:

  • Clothing
    • Shirts
      • Tees
      • Long sleeved
      • Short sleeved
    • Pants
      • Jeans
      • Shorts
      • Sport
    • Coats
      • Brands
      • Active
      • Casual
  • Outdoors

Separate “Womens” menu:

  • New

Separate “Children” menu:

  • Toys

Note: To activate a separate menu from the app admin, select the option for ‘Use a separate menu’ in the ‘Menu content’ section. Make sure to select the proper menu from the drop down list.

When using a single navigation menu:

A maximum of 2 total sub-tiers possible. This method is usually used with your store’s “Main menu”, and it allows you to use a single menu to manage all your mega menu content in one place. For example, if your header uses the “Main menu” list, simply drag and drop menu items to create nested items (aka sub-links). Meteor will inherit the proper menu items depending on the link you choose for the mega menu placement. Here is an example:

“Main menu”:

  • Mens
    • Clothing
      • Shirts
      • Pants
      • Coats
    • Outdoors
      • Packs
      • Tools
  • Womens
    • New
      • On sale
      • Trending
      • Today only
    • Clothing
      • Hats
      • Shoes
      • Pants
  • Children
    • Toys
      • Electronic
      • Outside
      • Puzzles
    • Clothing
      • Shirts
      • Pants
      • Hats

Note: To activate a single menu from the app admin, select the option for ‘Use items from…’ in the ‘Menu content’ section.

Adding Menus in Meteor

Now that you have your menus setup in your Shopify navigation, you can start adding & editing mega menus using Meteor. Here is a step by step guide for creating a new mega menu:

  1. Launch the app. From your Shopify admin, go to Apps and click the link for Meteor Mega Menus to open the app admin.

  2. Select a theme. If you haven’t used the app before you will need to select a theme for Meteor to use. Simply choose the desired theme from the drop down and click the ‘Choose theme’ button. Note: If you have already selected a theme you can skip this step.

  3. Add a new mega menu. Click the ‘Add mega menu’ button to begin the process of creating a new mega menu.

  4. Pick a mega menu template. Use the Menu editor panel that shows on the right-hand side of your screen to browse through the list of available templates. The app will show you a quick preview of each template when you click on a template option. If you’re looking to include images within your menus, you might consider using Amazon, Riviera, Fortress, Prism, Pinnacle or Horizon. Each template displays images differently; so be sure to browse each template to find one that fits your store’s unique style. Once you have settled on a template to use, click the ‘Select template’ button to proceed. Pro tip: If you are not sure exactly which template is best, don’t worry! You can change templates for any mega menu at any time.

  5. Menu placement. This step allows you to control where you want to display the mega menu on your store. By default the app will automatically pull in the links from your store’s “Main menu”, since this is what the majority of stores are using for the header’s navigation. If your store is using a menu other than “Main menu”, you’ll want to use the ‘Main navigation menu’ option in the menu editor to select the appropriate menu. Once the proper main navigation menu is selected, you will want to choose which menu link you want to use for the mega menu you’re creating. You can choose the menu link by either clicking on a link button using the preview pane on the left-hand side of your screen, or by selecting an option from the ‘Menu link’ setting in the editor panel. Once the proper link is selected, click the ‘Continue’ button to proceed.

  6. Menu content. This step allows you to control the content of the mega menu. There are two options on this step; A) ‘Use sub items under …’, or B) ‘Use a separate menu’. You can select the ‘Use sub items under …’ option to automatically populate the mega menu using the sub items that have been nested under your main menu. You can select the ‘Use a separate menu’ option to automatically populate the mega menu using items from a specific menu of your choice. Once you are happy with the menu content, click the ‘Continue’ button to proceed.

  7. Customize the mega menu. This is the last step in the process and is ultimately the most crucial step in terms of styling your mega menu. You have the freedom to style to your personal preference, making sure the mega menu integrates beautifully with your theme. Depending on the template you’re using you will have a wide range of customization options to choose from. There are separate sections for the different settings and options, so make sure to click into each section to see what’s available. As soon as you edit a setting or option, the app should show you an example of what the mega menu will look like in the preview pane. Just like with the other steps, you are welcome to edit the customization settings at any time. Once you are finished making changes, click the ‘Save & Publish’ button.

  8. View the mega menu on the storefront. Once the mega menu has been saved and published, you can click the ‘View on storefront’ button from the top bar to open up a new tab in your browser. The new mega menu should be showing underneath the link you selected on Step 5.

👉 Repeat steps 3 - 7 to create additional mega menus. You can also use the ‘Duplicate’ button from the main page in the app admin to copy over the template and customization settings from an existing mega menu so you can use them when creating a new mega menu.

Success! 🎉

Now it's time to check out your hard work. View the new mega menus by previewing the theme that you've been working on. You can do this two ways:

1) From your Shopify admin, go to your Online Store > Themes. Find the theme you used with Meteor (from Step 2 above) and then click Actions > Preview

OR

2) In the Meteor app, click the "Preview" button that is found in the top left-hand corner

Great work! 🙌

Still having trouble? Click the chat bubble at the bottom right or drop us an email.

Troubleshooting

Changes are not being reflected when saving

Double check that you’re viewing the same theme that Meteor has been set to use (see ‘Theme:’ setting in the top left corner of the app admin).

First, check that you are viewing the correct theme that the app is using. Clicking the ‘Preview’ button is always a good way to open up the correct theme.

Second, there may be an issue with how the menus are being attached to the button/link. In some cases, you may need to use the ‘Manual attachment’ setting in the Menu Placement section to assign your menu to the correct button or link. You can read more about manual attachment in the Developer Documentation section.

Your store’s theme may be overwriting the app’s styling for the mega menus. Please contact us if you’re have this issue and we’ll be happy to step in and fix with some custom CSS.

You’ll want to adjust the vertical offset of your menus. To edit these settings, follow the steps below:

Open the app admin and click the three dots showing at the top in the right-hand corner. Select Settings > General.

From here you can adjust the vertical offsets for either desktop or mobile. Positive pixels will move the mega menus down, and negative pixels will move the mega menus up.

The mobile breakpoint may need to be adjusted. To edit these settings, follow the steps below:

Open the app admin and click the three dots showing at the top in the right-hand corner. Select Settings > General.

From here you can adjust the mobile breakpoint. By default the field is empty because the app will automatically detect the theme’s mobile breakpoint. However this setting may need to be adjusted depending on your theme’s unique navigation.

The z-index may need to be adjusted. To edit these settings, follow the steps below:

Open the app admin and click the three dots showing at the top in the right-hand corner. Select Settings > Advanced.

From here you can adjust the Menu Layering (z-index). You can make the value higher to see if this solves the layering issue. Sometimes, the store’s theme sets this layering on the navigation itself, which may require an edit to the theme’s code. Just let us know if this is an issue for your theme and we’ll be happy to take a look!

FAQ

What is Meteor?

Meteor Mega Menus is a Shopify app that allows you to build fully-customizable drop down Mega Menus for your online store. The app is easy to navigate, responsive and lightweight–so it won’t slow down your store. Meteor Mega Menus includes eight beautifully-designed menu templates, along with a vast amount of customization settings for each template (no coding needed!).

How can Meteor help my Shopify store?

Responsive, high-performing mega menus add significant value to your Shopify store. Showcasing your products in a beautiful & clean way will help your customers more effortlessly browse your products and find what they are looking for.

Can I install Meteor on an unpublished theme?

Definitely. We actually recommend installing on an unpublished theme; primarily so that it does not interfere with your live store. When you’re finished customizing your menus, simply change the theme setting within the app and it will automatically appear on the newly chosen theme.

Do I have to install any app code onto my theme?

You are not required to install any app code, since the installation happens automatically when you choose a theme in the app.

Can I use the menus I’ve created in my Shopify navigation with the app?

Absolutely. In fact, almost all mega menu content in the app is pulled from your store’s navigation menus. This means that when you add a new mega menu in the app, you’ll be asked to choose from a menu you’ve already created in your store’s navigation settings (Online Store > Navigation). If you want to make changes to the contents of a mega menu, you’ll need to do so using the store’s navigation settings..

Can I customize the mobile menus?

You can change mobile background & text colors within the Customization settings. There is also an option to ‘stack’ the links which changes how the links are displayed. If you’d like any other basic styles adjusted, feel free to reach out to our support team and we’ll do our best to help out.

How do I delete a mega menu?

In the Meteor Mega Menus app, find the menu you want to delete. Click the trash can icon and confirm whether or not you want to delete the mega menu.

Known Theme Issues and Fixes

Theme Issue / Fix
Responsive (v5) Mobile menu items display when they should be hidden. Copy and paste the following code to the CSS editor in Meteor.

Supported Themes

We work hard to support virtually any theme on Shopify 🙌

We can even integrate with custom themes that you've built yourself. If you have any issues at all making our mega menus function or look great on your store's theme, please let us know!

Developer Documentation

Use this section to learn how to develop with Meteor. We provide several tools for you to control the way certain mega menus appear. If you have any ideas for a new development feature, please let us know!

Performance and Liquid intrusion

We have put a lot of time and effort into the performance and the maintainability of our Shopify apps. Meteor Mega Menus only loads a single lightweight JavaScript file and styles which are loaded in async. All files are loaded over a CDN, which are both versioned and cached. This means that the mega menus generally load before the page is even ready.

Manual Menu Attachment

By default, Meteor will attempt to automatically assign a menu to a link/button. In some cases, you may want to ignore that behavior and directly attach a menu to a link or button of your choice. To do this, you must assign a unique handle to the menu by clicking ‘attach manually’ in the ‘Menu placement’ section.

After you’ve given the mega menu a handle, you can simply set any anchor tag with the hash id to the handle you set. For example:

<a href="{{ link.url }}#your-menu-handle">{{ link.title }}</a>

Liquid Files

Meteor is very lightweight for Shopify stores. It only requires two snippets in the store’s theme: meteor-menu-data.liquid and meteor-menu.liquid. The asset meteor-menu-data.liquid is updated whenever menus are saved, and meteor-menu.liquid is only saved when switching themes.

Note: Do not edit these files, it will only end in your bitter disappointment (they get overwritten). If you’re looking to customize the app, you’ll want to take a look at the JavaScript API.

JavaScript API

Events

meteor:ready

When scripts are loaded and ready to be used. Our scripts are loaded async so be sure to define event listeners prior the including the meteor-menu.liquid snippet.

document.addEventListener('meteor:ready', function() {
  console.log(MeteorMenu);
});

meteor:show

When any mega menu is displayed. Event bubbles, so you can attach to document and get event.target to get the mega menus.

document.addEventListener('meteor:show', function(e) {
  var $menu = e.target;
  // Do any operations on element...
});

meteor:hide

When any mega menu is hidden. Event bubbles, so you can attach to document and get event.target to get the mega menus.

document.addEventListener('meteor:hide', function(e) {
  var $menu = e.target;
  // Do any operations on element...
});

meteor:beforeFit

Before a mega menu is fitted to the width of the viewport. Event bubbles, so you can attach to document and get event.target to get the mega menus.

document.addEventListener('meteor:beforeFit', function(e) {
  var $menu = e.target;
  // Do any operations on element...
});

meteor:afterFit

After a mega menu is fitted to the width of the viewport. Event bubbles, so you can attach to document and get event.target to get the mega menus.

document.addEventListener('meteor:afterFit', function(e) {
  var $menu = e.target;
  // Do any operations on element...
});

API

Meteor ships with a basic API to manage mega menus on the fly.

Global Object

MeteorMenu.api.getMenu( id )

Get an attached mega menu by the internal ID. The ID of a mega menu can be discovered in MeteorMenu.menus. Returns a Menu instance. Read below for available properies and methods.

MeteorMenu.api.realign

Align all mega menus based on the vertical/horizontal stack of items. Link lists that are detected as stacked will by default always show a mobile style menu regardless of width. Use this method if you change the arrangement of link lists dynamically. This gets called up any page load or resize.

MeteorMenu.api.fit

Fits mega menus within the viewport of the browser. There may be situations where Meteor isn’t aware of a layout change and this needs to be recalculated.

MeteorMenu.api.attach

Attaches all mega menus to links/buttons. Executed on any page load by default and 3 additional checks after page load. Use this method if you add a link/button after the page has loaded.

MeteorMenu.api.detach

Detaches all mega menus from links/buttons.

MeteorMenu.api.showAll

Force shows all mega menus and keeps them open. Helpful for styling / debugging.

MeteorMenu.api.hideAll

Force hides all mega menus.

MeteorMenu.api.debugMode

Enables debug mode for console logging. Pass false as the first parameter to disable.

The internal unique ID for that mega menu.

Show the most visibile mega menu element.

MeteorMenu.api.getMenu(1234).show();

Hide any visible mega menu elements.

MeteorMenu.api.getMenu(1234).hide();

Force show/hide a mega menu. The menu won’t be closed upon mouse action. Pass false to hide.

MeteorMenu.api.getMenu(1234).forceShow(true);

Removes all mega menu elements from the DOM.

The template being used to render the mega menu.

An array of button elements the mega menu is currently attached to.

An array of mega menu elements that have been rendered.

Data attached to mega menu, including information, links, and settings.

Custom CSS

You may want to change the look and feel of a certain menu template. You can add CSS anywhere in your theme, but we suggest adding it to the app settings under Settings > CSS Editor. In general, you can use an attribute selector for a certain mega menu template. For example:

.meteor-menu[data-meteor-template="tidal"] {
    border-color: 1px solid blue;
}

Due to the nature of injecting styles into Shopify themes, certain properties may need to be overridden via an !important flag. We do our best to keep mega menu styles the least invasive as possible, while still rendering the mega menus accurately.

Helpful CSS hooks

There are several CSS hooks to style elements. We normally resort to using data attributes on elements to avoid class name clashes. Here are a few to look for:

html[data-meteor-visible]

A helpful data attribute attached to the documentElement that indicates if a menu is being shown. This is useful if you want to do something only when Meteor opens a mega menu. Example:

html[data-meteor-visible] .header ul {
  /* Any custom styles you'd like to apply */
  margin-top: 0;
}

.meteor-menu

The class attached to every Meteor mega menu

[data-meteor-template]

The attribute attached to all mega menus with the corresponding template. Note this changes whenever a mega menu is transformed into a mobile menu to vertical. If you want to make customizations to a specific template, this is the best way to do it.

.meteor-menu[data-meteor-template="solar"] {
  /* Any custom styles you'd like to apply */
  opacity: 0.9;
}

[data-has-meteor-menu]

This is attached to link/button when it has a Meteor mega menu attached

.nav-link[data-has-meteor-menu="true"] &:after {
  /* Add dropdown arrow to menu buttons */
  content: "\025BE";
}

[data-object-id]

This is attached to a link/button with the link object ID (pulled from Shopify).

Dependencies

Meteor has no dependencies, not even jQuery. Everything that’s needed is bundled with the app 😎

Liquid Uninstall

Psst! Did you install Meteor on a duplicate theme? Simply delete the theme (unless you still need it, of course).

Automatic Uninstall

  1. Reinstall the app on your store (unless it’s already installed).

  2. Open the app admin and click the triple-dot dropdown menu in the top right corner. Select “Remove theme code” and then click the red confirm button.

Manual Uninstall

  1. Click the uninstall button from the Apps page in your Shopify admin. This will cancel any recurring subscriptions and remove the app from your store.

  2. Use the Shopify admin to open the theme code editor for the theme you had Meteor installed on. You can get to the code editor by going to Online Store > Themes > Actions > Edit Code.

  3. Open layout/theme.liquid.

  4. Find and remove {% include 'meteor-menu', load: 'head' %}, which will be within the head tag.

  5. Find and remove {% include 'meteor-menu', load: 'footer' %}, which will be just before the closing </body> tag at the end of the file. Note: This may not be found in layout/theme.liquid - depending on the version of Meteor that was used when the app was originally installed on the theme, the code for the 'footer' may not exist.

  6. Make sure to save your changes to the file after removing the code referenced above.

  7. Delete the following files from the theme:

  • snippets/meteor-menu.liquid

  • templates/list-collections.meteor.liquid

  • assets/meteor-menu.css

  • assets/meteor-menu.css

  • assets/verify-meteor-menu.js

You’re all done! Meteor’s code is now completley removed from your store.

Changelog

[4.3.1] 2019-10-10

  • Fixed a bug where custom-formatted product prices would show as plain text in Horizon

[4.3.0] 2019-09-30

  • New feature: Menu trash
    • Allows previously deleted menus to be restored
  • Billing update
    • Introducing multiple app plans/pricing tiers, including a free plan!
  • Improved UX for menu templates
  • Minor bug fixes

[4.2.2] 2019-09-11

  • Minor theme fixes

[4.2.0] 2019-06-17

  • New “Custom” settings that allow you to fine-tune your menus’ styles even more. Explore your customization settings and check them out, every template has at least one!
  • Minor bug fixes

[4.1.0] 2019-06-06

  • Improved user experience
    • Our menu content section of the app has now been broken down to individual steps, making the menu creation process simpler
    • Contextual error messages with actions help guide resolving of issues
  • Minor bug fixes

[4.0.0] 2019-05-22

  • Significant performance update! Further improvements have been made to ensure Meteor doesn’t slow down your store, no matter how many links you have.
  • Horizon fixed for Internet Explorer 11
  • Minor bug fixes

[3.8.3] 2019-05-16

  • Fixed some minor bugs with Horizon and Prism

[3.8.0] 2019-05-16

  • New template: Horizon
  • UX improvements for:
    • Smaller screens by overlaying the menu editor
    • Designating menu content/attachment
    • Helping guide menu creation process
  • Fixed menu flickering/resetting while editing
  • Minor speed improvements for storefront menu loading
  • Minor bug fixes

[3.7.0] 2019-05-10

  • Menu customization settings are now organized in drawers
  • Improved attachment and menu content designation experience
  • Fixed a bug where links with different URLs but same titles had trouble with attachment
  • Fixed some minor issues with Pinnacle
  • Fixed minor theme issues

[3.6.5] 2019-04-26

  • Fixed a minor bug

[3.6.4] 2019-02-06

  • Fixed visual Safari bug

[3.6.2] 2019-02-05

  • Added “Update” button to settings dropdown
  • Added animation options to Pinnacle
  • General bug fixes

[3.6.0] 2019-02-04

  • New menu template called Pinnacle
  • Added smart mouse tracking to Solar
  • Improved smart mouse tracking functionality
  • General bug fixes

[3.5.0] 2019-01-30

  • New three-tier menu template based on Amazon’s intuitive mega menus
  • Smart mouse tracking to ensure only intentional menu item changes
    • Implemented in Amazon and Riviera
  • New Fortress template settings
    • Columns per row
    • Image position
    • Content width
  • New Riviera template settings
    • Hide sub links
      • Stretches image over sub links area
  • General bug fixes

[3.4.0]

  • Bug fix for manual attachment not working with multiple menus
  • Template option for “Fortress” template for image link

[3.3.0] - 2018-10-03

  • Added duplicate menu feature

[3.2.0] - 2018-06-06

  • General bug fixes

[3.1.5] - 2018-05-21

  • Fixed issue with links with Meteor menus not navigating upon clicking

[3.1.4] - 2018-05-16

  • Fixed issue with menus detaching when link title changed

[3.1.2] - 2018-04-30

  • Fixed issue with menu interactions on tablet devices

[3.1.1] - 2018-04-26

  • Fixed issue with mobile menus and click events not working for some stores
  • Fixed issue with Internet Explorer not rendering menus

[3.1.0] - 2018-04-19

  • Improved stability of how menus are assigned to links
  • Added option for shops to provide CSS selectors for navigation
  • Added new development tools
  • Improved theme support

[3.0.3] - 2018-03-23

  • Fixed issue with headers using flexbox links

[3.0.2] - 2018-03-22

  • Fixed issue with menus not attaching properly

[3.0.1] - 2018-03-22

  • Improved embedded CSS loading to be asynchronous

[3.0.0] - 2018-03-08

  • Interface redesigned for easier menu building
  • Condensed theme assets to only require a single snippet file

[2.0.0] - 2018-02-07

  • Fixed animation issue with solar on initial hover

[1.4.0] - 2018-02-05

  • Added title clickable option to tidal

[1.2.2] - 2018-02-01

  • Fixed mobile issue for Supply theme on touch device

[1.2.1] - 2018-01-30

  • Added support for mmenu jQuery plugin

[1.1.8] - 2018-01-24

  • Fixed turbo and supply menu issues

[1.1.7] - 2018-01-23

  • Added new features to Riviera template

[1.0.0] - 2017-12-22

  • First Meteor release

How to upgrade from Bacon to Meteor

Upgrading from Bacon to Meteor? You're in the right place. Just follow the steps below and you'll be on your way to some brand new mega menus.

Option #1: Have us do it for you

We'll help you setup your new menus (for free!). Just reach out to us at support@heliumdev.com and we'll get you setup.

Option #2: Update the app yourself

1. Install the Meteor importer tool as a Google Chrome Extension to your Google Chrome browser.

2. Head to your Shopify admin and go to the Online Store > Navigation.

3. While in the Navigation, open the Meteor Chrome Extension from your toolbar and your Bacon Menus will show.

4. Select the menus you'd like imported and click "import selected menus." Refresh the page and your newly imported menus will appear in the Shopify navigation as independent menus.

5. Open the Meteor Mega Menu app in your app's panel (or go to baconmenu.herokuapp.com). If you haven't updated before, you should be redirected to the old Bacon Mega Menu panel. Follow the directions from the update banner and click "update on your own"

...and you're done! Now, it's time to start setting up your new Meteor Mega Menus.



Get Support

Stuck? Just hit that chat button in the bottom right corner or shoot us an email to support@heliumdev.com!