To set up a mega menu in Empire, first create a nested dropdown menu in Shopify admin > Content > Menus. Then, open the theme editor, go to Header, add or open a Mega menu block, choose a mega menu style, and enter the matching top-level menu item name in the Mega menu trigger field.
Before you begin
Before connecting a mega menu block in Empire, create your menu structure in Shopify first. Mega menus rely on nested menu items, so the top-level menu item must have dropdown links added underneath it.
Setting up a Mega menu (also known as a mega-nav, mega navigation, etc.) for the Empire theme takes place in the Content > Menus settings and theme editor.
Use Menus in the admin to create a dropdown menu, then connect a mega menu block.
Connect a mega menu block
In the theme editor (Customize), click the toggle beside Header in the left sidebar. Click one of the two preloaded Mega menu blocks to open its settings. Add more by selecting (+) Add block.
You have three style options for the mega menu. You can either choose Mega menu, Mega menu with sidebar or Multi-column single menu.
Mega Menu:
is a large, customizable dropdown menu that appears when you hover over or click a top-level navigation item. Unlike a standard dropdown, it displays multiple columns of links and can include images.
Include images, text, and links
Use the optional Custom image 1 and Custom image 2 to include images within the mega menu.
Click Select image to locate and apply the image.
Use the Text and Link fields to add copy and link your customers to specific pages.
Adjust the Position and Size dropdowns to control the position and size of the images in the mega navigation.
Mega menu with sidebar:
is a large, advanced dropdown menu that appears when you interact with a top-level navigation item. It includes:
-
A sidebar displaying primary subcategories or sections.
-
A main content area that updates dynamically to show related links, images, or featured products based on the selected sidebar item.
This menu type helps organize complex store catalogs, improves user navigation, and enhances the visual presentation of collections and promotions.
After adding the mega menu trigger, choose the submenu layout you want to use.
- Text columns
- Product image grid
- Collection image grid
Multi-column single menu:
is a navigation layout where a single menu (usually a top-level item in your store’s main navigation) expands into a multi-column dropdown when hovered over or clicked.
Adding a mega menu trigger:
After you pick which style to use, you can choose from your menu items with the nested dropdown and add its title to the Mega menu trigger. For example, if Shop by Room is the menu item, then enter Shop by Room into the provided field
The Mega menu trigger must match the top-level menu item exactly, including spelling, spacing, and capitalization. For example, if the menu item is Shop by Room, enter Shop by Room in the trigger field.
Once the trigger is added, Empire will display the nested menu items connected to that top-level menu item as subcategories in the mega menu.
The images shown in the collection image grid come from the collection images added in Shopify.
| Mega menu style | Best for |
|---|---|
| Mega menu | Standard multi-column menus with optional images, text, and links |
| Mega menu with sidebar | Larger catalogs with many categories or subcategories |
| Multi-column single menu | Simple multi-column dropdowns for one main menu item |
Empire mega menus are created by combining Shopify’s nested menu system with Empire’s Mega menu block in the theme editor. Start by building your dropdown menu in Content > Menus, then open the Header section in the theme editor and connect that menu using one of Empire’s mega menu styles.
For the mega menu to display correctly, make sure the Mega menu trigger matches the top-level menu item exactly. After saving your changes, preview your storefront on both desktop and mobile to confirm the menu is displaying as expected.
This feature is limited to letters included in U.S. Standard QWERTY Keyboards. The platform is unable to recognize characters and symbols from other alphabets or scripts, such as Cyrillic or Kanji. Confirm you are using standard characters from the English alphabet for the best results.
Share your experience with Empire
Your feedback is crucial! Help make Empire better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Empire?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!