Multipurpose theme documentation
Multipurpose Fashion Theme
Header Mega Menu
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Header > Mega Menu
Overview
A mega menu is a large, multi-column dropdown that can show many links, images, and promos at once. It’s ideal for stores with many collections or categories. This theme supports mega menus through built-in blocks (Column Menu, Tree Menu, Product Menu, Banner Menu, etc.) or via third-party apps. This guide covers setup, block types, and customization for merchants, theme store visitors, and theme reviewers.
Mega Menu vs. Standard Drop-Down
| Feature | Standard drop-down | Mega menu |
|---|---|---|
| Layout | Single column list | Multi-column grid |
| Content | Text links only | Links, images, promos, featured products |
| Width | Narrow, follows parent | Wide, often full-width |
| Use case | Few sub-items | Many categories, collections |
| Mobile | Accordion or nested list | Drawer or simplified layout |
📷 Image placeholder: Add a screenshot comparing a standard drop-down and a mega menu side by side.
Built-in Mega Menu Blocks
This theme includes several blocks that create mega menu content when their label matches a navigation menu item.
Block types
| Block | Description | Best for |
|---|---|---|
| Tree Menu | Hierarchical menu matching your nav structure | Deep category trees |
| Product Menu | Dropdown with link list and optional "View all" | Product-focused categories |
| Column Menu | Multiple columns with links, collection images, promos | Large category grids |
| Tabbed Menu | Tabbed sub-menus with promotional content | Multiple sub-categories with promos |
| Banner Menu | Dropdown with image banners and links | Visual promotions, campaigns |
| Mega Menu Category | Used with mega menu drawer; icon, links, collection, promo | Mobile drawer layout |
Critical rule: label must match
The block Label must exactly match the title of the corresponding navigation menu item. If the nav item is "Shop", the block label must be "Shop". Mismatched labels prevent the mega menu from appearing.
📷 Image placeholder: Add a screenshot of the Header section with a Column Menu block, showing the Label field and its match to a nav item.
Setting Up a Column Menu (Example)
A Column Menu is a common choice for multi-column mega menus.
Step 1: Create the navigation structure
- Go to Online Store > Navigation.
- Add a parent menu item (e.g. "Shop") with the exact name you’ll use for the block.
- Add child items (collections, pages) as needed. The block can override or complement this structure.
Step 2: Add the Column Menu block
- In Theme Customizer, open the Header section.
- Click Add block.
- Choose Column Menu (or equivalent).
- Set Label to exactly match the nav item (e.g. "Shop").
Step 3: Configure columns and content
- Add columns and assign links, collections, or custom URLs.
- Optionally add collection images or promo images per column.
- Adjust column count and link styling.
- Save.
Step 4: Enable mega menu drawer (optional)
If using the two-panel mega menu drawer on mobile:
- Enable Enable mega menu drawer in Header section settings.
- Add Mega Menu Category blocks; their labels must match nav items.
- Configure icon, links, featured collection, and promo per block.
📷 Image placeholder: Add a screenshot of a fully configured Column Menu mega menu on the storefront.
Tree Menu for Hierarchical Navigation
A Tree Menu displays your navigation hierarchy in a structured format.
- Add a Tree Menu block in the Header section.
- Set Label to match the parent nav item.
- The block reads the menu structure from Shopify Navigation; no extra configuration needed.
- Optionally customize typography, spacing, or link style.
Useful when you want the mega menu to reflect your exact nav hierarchy.
Product Menu and Featured Products
The Product Menu block shows a link list plus optional featured products.
- Add a Product Menu block.
- Set Label to match the nav item.
- Add links (collections, pages).
- Enable "View all" link if desired.
- Optionally feature specific products in the dropdown.
Third-Party Mega Menu Apps
If you need more flexibility or the theme’s blocks don’t cover your use case, consider an app.
Popular options
| App | Features |
|---|---|
| Mega Menu by Buddha Themes | Drag-and-drop, multiple styles, collections, images |
| Turbo Theme (if applicable) | Built-in mega menu enhancements |
| Other Shopify mega menu apps | Varies by app |
Setup with an app
- Install the app from the Shopify App Store.
- Follow the app’s setup wizard to create menus.
- The app may add a section or integrate with the header.
- Configure columns, images, and styling in the app dashboard.
- Some apps replace the default header menu; others augment it.
📷 Image placeholder: Add a screenshot of a third-party mega menu app configuration or a store using an app-based mega menu.
Mobile Mega Menu (Drawer)
On mobile, mega menus often appear in a drawer or slide-out panel.
- Mega menu drawer: A two-panel layout: main items on the left, mega content on the right when an item is selected.
- Enable mega menu drawer: Toggle in Header section settings.
- Mega Menu Category blocks: Define content for each drawer item; label must match nav item.
Configure icons, links, featured collection, and promo per Mega Menu Category block.
📷 Image placeholder: Add a screenshot of the mega menu drawer on mobile with main items and expanded content.
For merchants
- Start with one or two mega menus (e.g. "Shop", "Brands"); add more as needed.
- Use collection images to make categories easier to recognize.
- Avoid overcrowding—limit columns and links per dropdown for readability.
- Test on mobile: the drawer layout may differ from desktop.
Common mistakes
| Mistake | Fix |
|---|---|
| Block label doesn’t match nav item | Set block Label to exactly match the menu item title |
| Mega menu not showing | Check label match; ensure block is added and saved |
| Too many mega menu blocks | Use 2–4 for key categories; simplify the rest |
| No white logo with overlay | Add white logo in Logo block when using overlay header |
| Mobile drawer empty | Add Mega Menu Category blocks with matching labels |