Welcome to Shopify Theme Basics! Here at Fluorescent, we’re Shopify theme experts. In this series, we’re sharing our knowledge with you. This is our first installment and is focused on mega menus in Shopify - what they are, and how to set one up. Let’s dive in!

What is a mega menu?

A mega menu is a way of organizing links in your header to make it easy for customers to navigate your store.

Mega menus replace standard dropdowns, which reveal nested menus one at a time when hovered over. For customers, this can be time-consuming, like walking down every aisle of a store to find what they want.

Mega menus display submenus in a single dropdown, organized in multiple columns with a clear visual hierarchy. Similar to a store map or directory, mega menus can give customers an overview of your store’s collections, products, and pages.

Mega menus are sometimes called mega navigation, or mega nav. These are two names for the same thing. “Mega menu” is the standard term, whereas “navigation” more commonly refers to the header navigation as a whole.

What types of Shopify stores should use a mega menu?

Mega menus are ideal for large catalog stores. If your store has many collections and subcollections, or sells products from multiple vendors, mega menus will make browsing your catalog easier and more efficient.

But mega menus can be useful for any type of store that wants to simplify their header navigation, avoid cluttered links, or create clear pathways for customers to find the product they want.

Are there any best practices I should know about when I set up my mega menu?

Yes! To make the most of a mega menu, you should think carefully about how your products are organized.

Before setting up a mega menu, it’s important to determine the main categories and subcategories of your catalog, and then create collections based on your product taxonomy.

When creating your nested menu, consider starting with the most general categories for the top-level links, then move down to the next subcategories for the other levels.

For example, use the top-level link for a general category of products, such as “Footwear.” Then use the second-level links for main collections, which may be grouped according to different styles, brands, or other subcategories, like “Sneakers,” “Heels,” and “Loafers.” Finally, the third level can be links to specific subcollections or products, like “Stilettos,” “Pumps,” and “Platforms.”

How do I create a mega menu for my Shopify store?

Mega menus display nested links from your header’s main menu. You will need to add three levels of nested links. From your Shopify admin, go to Content > Menus to edit your main menu.

To start, add a top-level link that will appear in the header and reveal the mega menu when clicked or hovered over. Add more links and use the drag-and-drop handles to nest them under each other. The second-level links will be column headings in the mega menu, and the third-level links will be listed below the second-level links.

Learn more about nested menus on Shopify. 

After setting up your main menu, you need to enable the mega menu in your theme editor. In most themes, you can add a mega menu block under the Header section, then enter the exact name of the top-level link to connect your nested menu.

From there, you can customize the style of the mega menu. Depending on your theme, mega menus may have multiple layouts, such as 2-column or 4-column. Your theme may also include special features like promotional blocks (more on those below).

Remember to refer to your theme’s documentation for specific instructions about their mega menu feature.

Does every theme come with an option for a mega menu?

Mega menus are a common feature in almost all premium themes. Shopify’s free theme Dawn does not include a mega menu, and some themes that specialize in single-product or small-catalog may not include them.

In the Shopify Theme Store, you can filter themes by selecting “Mega menu” under Features.

How do mega menus work on mobile devices?

On mobile, mega menus often display as multi-tiered menus. A wide mega menu with multiple columns doesn’t work as well on smaller screens, so they will adapt to provide the best user experience for mobile devices.

How do promotional blocks work in a mega menu?

Some themes, like Stiletto and Eclipse, can display promotional features within the mega menu alongside the links. Promotional blocks can include custom images, text, and a link or button. They’re useful for featuring products, collections, or current sales.

Can you show me some examples of mega menus?

Tricker's, a shoe company based in England, has a beautiful Shopify site that showcases an elegant mega menu. It's built on our theme Stiletto.

Our demo stores for Cornerstone, Eclipse, and Stiletto all feature mega menus - for some examples, check out Flair, Coastal, or Organic.

For examples of navigation that combines mega menus and traditional drop downs, take a look at our demo shops Vogue and Journey.

That’s everything you need to know about mega menus! Check back for more Shopify Theme Basics coming soon.

How else can we help?

At Fluorescent, we love building relationships with our customers! We’re here to support your business and help you grow.

If you are…

…already using one of our themes and need some assistance, head over to our documentation.

…looking for a theme with a mega menu, check out our themes Eclipse, Stiletto, and Cornerstone.

…an agency or freelancer, read about our partner program and how it can help grow your business.