Building a Custom Mega Menu With Icons, Categories, and Sub-Menu Items (Shopify Tutorial)

Building a Custom Mega Menu With Icons, Categories, and Sub-Menu Items (Shopify Tutorial)

A mega menu improves navigation and user experience by displaying multiple categories, icons, and sub-links in a structured layout. This guide shows you how to build a fully custom mega menu in Shopify using Liquid, CSS, and optionally metafields for easy content management.

What You’ll Learn

  • Create a mega menu wrapper in your header file.
  • Add multi-column categories and sub-menu lists.
  • Insert icons using images, SVGs, or Unicode.
  • Style and animate the mega menu with clean CSS.
  • Trigger the mega menu on hover or click.

Step 1: Edit Your Shopify Header File

Go to Online Store → Themes → Edit Code and open:

sections/header.liquid

Find the navigation markup and locate where your main menu loops. Insert the mega menu markup inside the item that should trigger it (usually “Shop”).


{% if link.title == 'Shop' %}

Collections

Apparel

Accessories


{% endif %}

Step 2: Add CSS for the Mega Menu Layout

Open:

assets/base.css or theme.css


/* Mega Menu Container */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  padding: 30px 40px;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  z-index: 999;
}

/* Show on hover */
li:hover .mega-menu {
  display: grid;
}

/* Columns */
.mega-menu-column h3 {
  font-weight: 600;
  margin-bottom: 12px;
}

.mega-menu-column ul li {
  margin-bottom: 8px;
}

.mega-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}

Step 3: Add Icons (Optional)

You can use:

  • SVG files in your assets folder (recommended)
  • PNG icons
  • Line icons via Unicode

Upload icons in Settings → Files or use the store’s assets folder.

Step 4: Optional — Make It Click-to-Open on Mobile

Add this small JavaScript snippet in your theme’s global.js:


document.querySelectorAll('.menu-item-has-mega').forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('open');
  });
});

Step 5: Add Accessibility Improvements

For keyboard navigation, add:


.mega-menu:focus-within {
  display: grid;
}

Done! Your Custom Mega Menu Is Ready

You now have a multi-column, icon-enhanced mega menu that looks professional and makes navigating your Shopify store easier and more engaging.

Back to blog

Leave a comment