Mega menus help organize large navigation menus into a wider, multi-column layout, making it easier for customers to browse product categories, collections, pages, and featured links from your store’s header.
Before you begin
Before adding a mega menu in Grid, create your nested menu in Shopify admin > Content > Menus. Mega menus rely on dropdown menu items, so the top-level menu item must have links nested underneath it.
In the Grid theme, mega menus are created by first building a nested menu in Shopify’s Navigation settings, then connecting that menu to the theme’s header settings in the theme editor. Grid is listed by Shopify as supporting a multi-column menu feature.
Add a mega menu in Grid
After creating your nested menu in Shopify, connect it to a Mega menu block in the Grid theme editor.
- From your Shopify admin, go to Online Store > Themes.
- Find your Grid theme, then select Customize.
- Open the Header section.
- Select an existing Mega menu block, or select + Add Mega Menu.
- In the Mega item field, enter the exact name of the top-level menu item.
- Select Save.
- Preview your storefront to confirm the mega menu opens correctly.
Use the Header settings to add mega menu, for your header navigation. Add more by selecting (+) Add Mega Menu.
Click the toggle beside Header, then one of the preloaded Mega menu blocks to customize it.
Connect the mega menu to a menu item
The Mega item field connects the mega menu block to a top-level menu item in your header navigation. Enter the exact name of the menu item you want to display as a mega menu.
The text entered in the Mega item field must match the top-level menu item exactly, including spelling, spacing, and capitalization. For example, if your navigation item is Shop All, enter Shop All, not Shop.
To create additional mega menus, add a new Mega menu block for each top-level menu item. Each block should use a different menu item name.
Please note: Mega menus may display differently on mobile. On smaller screens, Grid may show the same navigation links in a compact mobile menu layout instead of the full desktop mega menu format.
After saving your changes, preview your storefront on desktop and mobile to confirm the mega menu displays correctly and is easy for customers to browse.