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 menus, hit that chat box on the bottom right 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 menus, don’t panic. These docs will guide you through the menu setup, so that you have the tools you need to build top-notch mega menus. 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:

As you build your 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.

All 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 these menus in Meteor.

Each menu created in Meteor should link to one of your main menu items (or with the items used in your header’s menu). The following example shows the main menu in the Shopify navigation:

In Meteor, you would create individual menus for Womens, Mens & Clearance as shown:

Duplicate Your Theme

Before building the menus, we first recommend duplicating your live 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 > Online Store

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

  3. We also recommend renaming this duplicate theme with the keyword ‘Meteor’ so that you can 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 your 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.

Menu tiers

When you set up your menu data from within your Shopify admin, you’ll want to decide beforehand how many tier levels you require. 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 use the link data from that menu specifically. If you need more than 2 sub items, you’ll want to use this method. Example:

Main menu:

  • Mens
  • Womens
  • Children

Mens menu:

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

Womens menu:

  • New
    • ..
      • ..

Children menu:

  • Toys
    • ..
      • ..

Activate a separate menu by clicking on “use a separate menu” under the “Menu items” sections:

When using a single navigation menu:

A maximum of 2 total sub-tiers possible. Usually used with your “Main Menu”, use single menu to manage all your menu data in one place. For example, if your header uses the “Main Menu” list, simply drag and drop menu items to create sub lists. Meteor will inherit these menu items depending on the link you choose for menu placement. 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

Activate a single menu by clicking on “use items from…” under the “Menu items” sections:

Adding Menus in Meteor

Now that you have your menus setup in your Shopify navigation, you can start adding & editing these menus in the app:

  1. From your Shopify admin > Apps > open the Meteor Mega Menus app and click ‘Create Mega Menu’

  2. Store Navigation. Choose a menu template you like and click “select template.” If you haven’t set up your menus in your Shopify navigation, we suggest doing that now before proceeding. To do so, click “Edit Navigation” and this will open your navigation in a separate tab.

  3. Menu Placement. Choose which navigation item the menu will show under. By default, Meteor will pull navigation items from your main menu. But, you can always change which menu is used if your theme is using a different header menu.

  4. Once you’re happy with your menu content, click “continue” to start customizing the menu. Each template will have unique customization options, so feel free to explore these a bit to find styles that match your theme.

  5. After making any changes, be sure to click “save.” Or, you can click “publish” if you’re ready to see your menus live.

  6. Repeat steps 1 - 5 for building any additional menus

Templates & Editing

This last step allows you to explore menu templates & editor styles, including a variety of ways to customize your menus. Ultimately, this is the most crucial step in terms of styling your menus. You have the freedom to style to your personal preference, making sure the menus integrate beautifully with your theme.

Template Section

  • Choose your template. Explore different templates and preview them by scrolling down to the end of the page. Be sure to click SAVE when you’ve decided on a template.

  • If you’re looking to include images within your menus, you might consider using Riviera, Fortress or Prism. Of course, each one displays images differently; so be sure to browse each template to find one that fits your store’s unique style.

Editor Section

  • Each template has its own set of configurable preferences, so take some time to explore these options.

  • Action & Animation are global preferences that you will see within each template editor. These options allow you to control how customers interact and open the menu.

Success! 🎉

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

1) Go to your Online Store > find your theme > Actions > Preview

OR

2) In the Meteor app > Click the "Preview" button at the top left-hand corner

Great work! Well that was a piece of cake. 🍰

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 you’re viewing the same theme Meteor has set in the top left corner.

First, check that you are view the correct theme that the app is using. Clicking the “Preview Menu” button is always a good way to open up the correct theme.

Second, there may be an issue with how the menus are being created for your button. In some cases, you may need to manually assign your menu to the correct button. You can read more about this in our developer documentation on this page.

Since menus are assigned dynamically, it’s important that each link in your navigation (e.g. main-menu) must contain unique URLs and menu items. For example, if you have two buttons with different titles but the same URL, you must make them unique. Example:

Incorrect:

"Shop" -> "/shop"
"Clothing" -> "/shop"

Correct:

"Shop" -> "/shop"
"Clothing" -> "/clothing"

If you must have the same URLs for different buttons, just add a trailing #something-unqie.

Your theme may be affecting menu styles. Please contact us if you’re have this issue.

You’ll want to adjust the vertical offset of your menus.

Open Meteor > at the top right-hand corner select the three dots > Settings > General

Here you can adjust the vertical offsets for either desktop or mobile. Positive pixels move the menus down, negative pixels move the menu up.

The mobile breakpoint may need to be adjusted. Open Meteor > at the top right-hand corner select the three dots > Settings > General (screenshot)

Here you can adjust the mobile breakpoint. By default (or empty mobile breakpoint), this value is being set depending on your theme. This may need to be adjusted depending on your theme’s unique navigation.

The z-index may need to be adjusted. Open Meteor > at the top right-hand corner select the three dots > Settings (screenshot) > Advanced > Menu Layering. Adjust the value higher to see if this solves the layering issue. Sometimes, themes set this layering on the navigation itself, which will require a theme update. Just let us know if this is an issue for your theme and we’ll take a look.

FAQ

What is Meteor?

Meteor Mega Menu is a Shopify app for adding fully-customizable drop down Mega Menus to your online store. The app is easy to navigate, responsive and lightweight–so it won’t slow down your store. Meteor Mega Menu includes five beautifully-designed menu templates, along with custom options for each menu template.

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.

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 themes in 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 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. All menus in the app will be linked with your store’s navigation menus. So, this means when you add a new menu, you’ll be asked to choose from a menu you’ve already created in your navigation. From here, you can choose menu templates & editor options to customize the way it looks. If you want to make changes to the contents of a menu, you’ll do so in the Shopify navigation.

Can I customize the mobile menus?

You can change mobile background & text colors within Settings. If you’d like any other basic styles adjusted, drop us an email and we’ll do our best to help out.

How do I delete a menu?

In the Meteor Mega Menu app, find the menu you want to delete. Click ‘Manage Menu’ > Edit > scroll all the way down > ‘Delete Mega Menu’

Known Theme Issues and Fixes

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

Supported Themes

We work hard to support any theme on Shopify 🙌We can even integrate with custom themes you built yourself. If you have any issues at all making our menus function or look great on your theme, please let us know.


Developer Documentation

Learn how to develop with Meteor. We provide several tools for you to control the way certain menus appear. If you’d like to see a development feature available, let us know!

Performance and Liquid intrusion

We really care about the performance and the maintainability of our Shopify apps. We only load a single lightweight JavaScript file and styles which are loaded in async. All files are loaded over a CDN, versioned and cached. This means that the menu generally loads before the page is even ready.

Manual Menu Attachment

By default, Meteor will attempt to automatically assign a menu to a button. In some cases, you may want to ignore that behavior and directly attach a menu to a button. To do this, you must assign a handle to the menu by clicking “attach manually” in the edit menu section.

After you’ve given the 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: 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. 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 menu is displayed. Event bubbles, so you can attach to document and get event.target to get the menus.

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

meteor:hide

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

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

meteor:beforeFit

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

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

meteor:afterFit

After a menu is fitted to the width of the viewport. Event bubbles, so you can attach to document and get event.target to get the 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 menus on the fly.

Global Object

MeteorMenu.api.getMenu( id )

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

MeteorMenu.api.realign

Align all 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.attach

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

MeteorMenu.api.detach

Detaches all menus from buttons.

MeteorMenu.api.showAll

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

MeteorMenu.api.hideAll

Force hides all menus.

MeteorMenu.api.debugMode

Enables debug mode for console logging.

The internal unique ID for that menu.

Show the most visibile menu element.

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

Hide any visible menu elements.

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

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

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

Removes all menu elements from the DOM.

The template being used to render the menu.

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

An array of menu elements that have been rendered.

Data attached to 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 “Settings > CSS Editor”. In general, you can use an attribute selector for a certain 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 styles as less invasive as possible while still rendering 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 menu. Example:

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

.meteor-menu

Class attached to every meteor menu

[data-meteor-template]

Attribute attached to all menus with the corresponding template. Note this changes whenever a 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]

Attached to button when a button has a meteor menu attached

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

[data-object-id]

Attached to a button with the link object’s ID 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 (unless already installed).

  2. Open the app, click the triple-dot dropdown menu in the top right. Click “Uninstall” and confirm.

Manual Uninstall

  1. Click the uninstall button from your Shopify admin. This will cancel any recurring subscriptions.

  2. Open the theme code editor for the theme you had Meteor installed on under Online Store > Themes > Actions > Edit Code.

  3. Open layout/theme.liquid.

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

  5. Find {% include 'meteor-menu', load: 'footer' %}, which will be just before the closing </body> tag at the end of the page.

  6. Save the file.

  7. Delete snippets/meteor-menu.liquid.

Changelog

[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: Meteor Importer Tool

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.

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.

Select the menus you'd like imported and click "import selected menus." Refresh the page and your newly imported menus will appear.

4. 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!