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.

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 😎

Changelog

[4.4.1] 2020-11-19

  • Fixed small issue with installer not updating template file

[4.4.0] 2020-11-18

  • Added customization settings for font-weight and font-size to all templates
  • Minor theme fixes
  • Minor bug fixes and UI improvements

[4.3.4] 2020-05-15

  • Minor bug fixes and UI improvements

[4.3.3] 2020-04-15

  • Minor bug fixes

[4.3.2] 2019-11-15

  • Minor bug fixes

[4.3.1] 2019-10-10

  • Fixed a bug where custom-formatted product prices would show as plain text in Horizon
  • Rebuilt the in-app color picker! Includes a much better UI and automated color swatches using theme settings

[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

Get Support

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