Overview

When you set up your navigation menus in the Shopify admin, you’ll want to decide beforehand how many levels of links (aka tiers) you want to use for your mega menus.

Due to the limitations within Shopify, single navigation menus have a maximum of 2 sub-tiers for menu content, and separate navigation menus can use up to 3 sub-tiers for menu content.

Three-tier Menu Setup

The app's Solar and Amazon templates are the only three-tier menu templates available, so definitely take advantage of them if you have a large number of links to display in a single menu!

The key to using a three-tier menu in Meteor is to create a separate navigation menu in Shopify that contains three tiers of menu items (links). See the steps below for details on how to set up three-tier mega menus with Meteor:

Step 1 - Add a menu item in Shopify

If you haven't already done so, go to your main navigation menu in Shopify (Online Store > Navigation) and add a menu item that you wish to use for the mega menu attachment in Meteor.

As you'll see in the screenshot below, we've added a new menu item for "Example" to the navigation menu named "Main menu":

Step 2 - Create a separate navigation menu in Shopify

After saving your main navigation menu, head back to Online Store > Navigation in the Shopify admin and click Add Menu. In this brand new menu, start adding your three levels of links by creating nested menu items. Here's a quick video that shows how to nest menu items using the navigation settings in Shopify:

See the screenshot below for an example of what a three-tier menu would look like:

Step 3 - Add and attach a mega menu in Meteor

After your new navigation menu has been saved in Shopify, we can head on over to the Meteor app and add a new mega menu. Make sure to select either the Solar or Amazon template (both of these templates support 3 tiers of sub-links), and then attach the mega menu to the appropriate menu and link from Step 1.

In the screenshot below, you'll notice that we've selected "Main menu" for the 'Main navigation menu', and we've selected "Example" for the 'Menu link':

Step 4 - Assign content to the mega menu

Next, you'll need to choose which sub-items you'd like to use for the mega menu's content.

In this example, all of our sub-items are inside of a navigation menu named "3 Tier Mega Menu" which was created during Step 2, so we've enabled the option for 'Use a separate menu' to select this specific navigation menu. See the screenshot below:

Once you're finished with the mega menu content, you're welcome to continue on to the fun part: editing the customization settings for the mega menu to adjust the styling to your liking 😎

Two-tier Menu Setup

You have a lot of templates at your disposal if your navigation only requires two levels of links! Let's walk through how to set up two-tier mega menus with Meteor.

Step 1 - Navigation menu in Shopify

If you haven't already, it's time to create your two tiers of links within your store's navigation menu. This is done by creating nested links using the navigation settings in the Shopify admin. You're welcome to refer to this video if you need some guidance.

In this example, we've added a new menu item for "Plants" to the navigation menu named "Main menu". "Plants" contains nested links for "Leaves" and "Lovely Flowers", and both of these links have their own corresponding nested links. See the screenshot below:

Step 2 - Add and attach a mega menu in Meteor

After saving these new two-tier links to your navigation, we can head on over to the Meteor app and add a new mega menu. Select your two-tier template of choice, then attach it to the appropriate menu and link from Step 1.

In the screenshot below, you'll notice that we've selected "Main menu" for the 'Main navigation menu', and we've selected "Plants" for the 'Menu link':

Step 3 - Assign content to the mega menu

After you press 'Continue', you must then choose where to pull your sub-items from for the mega menu content.

In this example, all of our sub-items are under "Plants", so we've enabled the option for 'Use sub items under Plants' to pull in the proper content. See the screenshot below:

Once you're finished with the mega menu content, you're welcome to continue on to the fun part: editing the customization settings for the mega menu to adjust the styling to your liking 😎


Questions or concerns?

Please reach out to our Support team via chat or email if you need any assistance! 😊

Did this answer your question?