Page cover

Mega Menu

Mega Menu Setup Guide

A mega menu is a drop-down menu with multiple levels of nested navigation, perfect for stores with several categories and subcategories. It helps customers explore your site quickly, discover product offerings more easily, and improves the overall shopping experience.

Mega menus also give you space for images, banners, buttons, and rich content that can enhance your brand presentation.

When Should You Use a Mega Menu?

If your store contains:

  • Multiple product categories

  • Subcategories under each category

  • Visual content (like banners or promo images) Then a mega menu is the right solution for you.

Step 1: Create the Menu Structure

  1. Go to your Shopify Admin → Online Store → Navigation

  2. Click “Create menu” or choose an existing menu to edit

  1. Give your menu a name (e.g., “Main Menu”)

  2. Click “Add menu item”

  3. Add your top-level items (e.g., Shop, Collections, Blog, etc.)

  1. To create dropdowns, drag sub-items under a main item

  1. To create a mega menu, add a third level of sub-items

  • Example:

    • Shop

      • Men

        • T-Shirts

        • Hoodies

      • Women

        • Tops

        • Dresses

The menu item at the top (e.g., “Shop”) will trigger the mega menu when correctly configured.

Step 2: Connect the Menu to Your Theme

  1. Go to Online Store → Themes → Customize

  2. Open the Header section

  1. Find the setting to assign your Main Menu

  2. Save your changes Your basic menu is now live on your storefront.

How to Enable the Mega Menu Block

  1. Inside the Header section, click “Add block” and choose “Mega Menu”

  2. In the new Mega Menu block, configure the following:

🔧 Mega Menu Settings

Promotion Text

Enter the exact name of the menu item that should trigger the mega menu (e.g., "Shop"). This must match your navigation title exactly.

Promotion Label

Optional label that appears next to the title (e.g., “New”, “Sale”). You can also choose No Label.

🧩 Submenu Configuration

  • Number of Columns – Choose how many columns to display (2, 3, etc.)

  • Mega Menu Width – Set the custom width (e.g., 1130 for wide layouts)

  • Center Submenu Content – Centers the layout inside the dropdown

  • Full Width Submenu – Makes the mega menu stretch full width of screen

🖼️ Promotion Images

You can display up to 2 promotional images inside the mega menu:

Promotion Image Settings:

  • Promotion Image 1 / 2 – Upload your images

  • Promotion 1 / 2 Link – Add the URL where the image should lead

  • Open in New Tab – Enable if you want the image link to open in a new tab

  • Promotion Image Position – Choose Left Side or Right Side

  • Promotion Image Width – Adjust image size (e.g., 50 for half-width)

If you don’t want to show any image, simply set the Promotion Image Width to 0 — this removes the empty space where the image would appear.

🎯 Customizing Your Mega Menu

You can continue adjusting:

  • Columns

  • Image positions

  • Submenu layout

  • Link behavior …until the mega menu looks and works exactly the way you want.

Every store is different — feel free to experiment with these options to match your branding and product structure.

Need Help?

If your mega menu doesn’t display as expected, or you'd like help designing it, reach out to us at: 📩 team@materiathemes.com

We’re happy to help.

PreviousRecommended AppsNextStore Settings - Required

Last updated