❗ Important: Set up up your navigation menus in Shopify first
You'll need to make sure you have set up your navigation menus using the Navigation settings in Shopify before you can start adding & editing mega menus using Meteor. If you need help setting up your navigation menus, please see this help article.
We've built Meteor to make mega menu creation as quick and easy as possible. The video above shows a quick walk-through of the process involved when creating a mega menu in the app, and if you'd like more guidance you can follow the steps below:
Steps for creating a mega menu in Meteor
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 get a prompt that asks you to select a theme so Meteor knows where to install its code. We always suggest installing Meteor on an unpublished theme first, this way you can test out the app's mega menus on the storefront before installing Meteor on your store's live theme.
To select a theme, simply choose the desired theme from the dropdown and click the ‘Choose theme’ button:
Note: If you have already selected a theme in the app and you wish to change which theme is being used by Meteor, then you can use the 'Theme' setting that shows in the app's header:
3. Add a new mega menu
Once you have selected your desired theme, 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. Control mega menu placement
This step allows you to control where you want to display the mega menu on your storefront. 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 navigation:
If your store's navbar is using a menu other than “Main menu”, then 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. Choose mega 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 the selected menu item:
Alternatively, 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 styling
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. 🎉 Success! Now you can view the mega menu on the storefront
Once the mega menu has been saved and published, you can click the ‘Preview’ button from the app header to open up a new tab in your browser. The new mega menu should be showing underneath the link you selected during Step 5:
Need more menus?
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 save time when creating a new mega menu with the same design.
Have questions or need help?
Click the chat bubble at the bottom right of this page or drop us an email.