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 for menu content, and separate menus can use up to 3 sub-tiers for menu content.
Three-tier Menu Setup
The "Solar" and "Amazon" templates are the only three-tier menu templates available, so definitely take advantage of them if you have a large amount of links to display in a single menu! The key with using a three-tier menu in Meteor is to create a separate navigation menu in Shopify that contains three tiers of menu items (links).
Step 1. Go to your main navigation menu in Shopify and add a menu item to attach your Meteor menu to. (in our example, we named our new menu item "Example")
Step 2. After saving your main navigation menu, head back to "Navigation" and click "Add Menu". In this brand new menu, start adding your three levels of links. See the screenshot below for an example of what this three-tier menu would look like!
Step 3. After your new navigation menu has been saved, we can head on over to the Meteor app and add a new mega menu. Select the "Solar" or "Amazon" template, then attach to the appropriate menus. In our example, for the Main navigation menu we are attaching to "Main menu" and for the Menu link we are attaching to "Example". See the screenshot below:
Step 4. Next, you'll need to choose where to pull your sub items from! In this example our sub items are under "3 Tier Mega Menu" so we have to choose "Use a separate menu" to pull those in. The below screenshot shows our sub item selection:
After all that is finished, it's on to the fun part of styling!
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 level mega menus with Meteor.
Step 1. Choose the navigation menu item that the mega menu will be attached to. If you haven't already, it's time to create your two tiers of links within that navigation item. See the screenshot below for an example, in which we have a menu item called "Plants". "Plants" contains the two tiers of links which are called "Leaves" and "Lovely Flowers" and have corresponding links underneath each.
Step 2. 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 to the appropriate menus. In our example, for the Main navigation menu we are attaching to "Main menu" and for the Menu link we are attaching "Plants". See the screenshot below:
Step 3. After you press 'Continue', you must then choose where to pull your sub items from! In this example our sub items are under "Plants" so we have to choose 'Use sub items under Plants' to pull those in. The screenshot below shows our sub item selection:
Questions or Concerns?
Please reach out to our support team via chat or email if you need any assistance! 😊