The top-level navigation menus are what will actually show on the storefront, replacing your theme's native navigation bar. Each item added here will have its own menu links and desktop template defined later on.

If you have already built out your navigation menu in the Shopify admin, you can import your menu into the app to help you get started!

Click 'import menu from Shopify' and enter your Shopify menu handle. If you are not sure what your menu handle is, you can look in your Shopify Navigation settings.

Click 'Add menu item' if you want to start from scratch or add a new item to your existing menu. Clicking the 'Link' field will then allow you to search for or select a Shopify resource for things such as collections, products, or pages; you can also type in an external URL to direct the menu item to another site.

Once you have some menus, you can click the pencil icon to update the title or link, or click 'Manage' to edit the sub-items and design of the menu.

Use the Menu editor panel on the left-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 need help deciding, try clicking 'Preview templates' to view an example image and feature highlights for each template.

If you’re looking to include images within your menus, you might consider using Amazon, Riviera, Fortress, Prism, Pinnacle, Horizon, or the new Stardust template. 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 'Continue’ button to proceed.

This step allows you to control the content of the mega menu. If you already have some links in your menu, you will see them here. Otherwise, there are two options to choose from: ‘Manually add’ or ‘Import navigation menu from Shopify’.

Once you have menu links, you can drag and drop each item to reorder or nest it. The menu builder supports nesting items up to 3 tiers deep. However please note that the number of tiers actually displayed varies based on the menu template being used.
​

Clicking the pencil icon for an item will allow you to update the title and link, upload an image, or delete the link.

If you are using a Shopify collection or product, the menu should automatically use the associated primary image, but you are welcome to upload your own to override this or for other resources such as pages.

Once you have some content, you can proceed to the customization settings. 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 are using, you will have a wide range of customization options to choose from. There are separate sections for the different settings, 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.

Make sure to customize your mobile menus as well! Unlike our desktop menus, the mobile styles are applied globally across your entire mobile menu, no need to do separate customization for each menu item.
​

The Stacked and Drawer templates are text only, while Image grid will display images for each menu link. You can interact with the preview window on the right to get a better idea of how each template works.

Once you're finished designing your menus or making changes, be sure to click 'Save' in the top right of your screen.

If you are ready to install the menus onto your storefront, check out our installation guide here: