According to new research shared on Fobes.com, you are more likely to lose customers if your website navigation is not effective enough [1]. Imagine that you own a big Shopify store with 1000 products in 25 different categories and your store uses a drop-down menu. A web visitor may find it difficult to navigate the choice of the product unless he accidentally reaches it. If this matches your context, why don’t you try a mega menu? It will greatly influence the user experience (UX) and the web-usability. Unlike a regular menu, a mega menu can show all products grouped into categories. It can also include product images and links to product pages.
This article will define the mega menu and suggest contexts to use or not use it. In addition, you’ll find ways to organize a mega menu and how you should add it to a Shopify Store.
Table of Contents
What exactly is a mega menu?
“Mega menu” is a term used for an expandable menu that displays several choices in a two-dimensional drop-down layout. The big idea of a mega menu is to help shoppers browse easily. In particular, a mega menu gives visitors faster access to specific pages of a store that have a large number of categories, collections, niches through clicking, tapping, or hovering.
Some of the most typical features of a mega menu include the following:
- A multi-level menu is divided into groups of navigation options by blocks or columns.
- Everything is visible at once — no scrolling.
- Hovering, clicking, or tapping reveals menu options.
- Images can be added to improve their visibility.
Here are two styles of the layout of a mega menu from the Showtime store, which sells merchandise of TV series. Each menu will appear when hovering over its title.
You might see the mega menu on a lot of popular websites. However, don’t rush to add one. A mega menu might not be appropriate for every store. Let’s see in the following scenarios whether your store needs a mega menu.
When to use Shopify mega menu?
Given below are some instances when a mega menu is proved to be highly beneficial to your website. Let’s check them out.
Maintain availability for different customer segments
It’s a fact that selling various products and categories means serving many groups of consumers with different demands. Consequently, their browsing behaviors will differ and are often based on their own needs. According to the findings of Clutch.co, almost everyone (94%) said that easy navigation is the most valuable key website feature [2].
You can serve them all on a multi-level mega menu. It helps shoppers understand all categories immediately and easily find what they want. For example, the Swiss Knife shop has categories such as Shop By Size, Shop By Use, Collections, etc. Anyone looking for a camping knife can visit its product page in a few seconds with one click.
When a drop-down menu would be so long
Many categories, subcategories and products will lead to a complex web structure. In these cases, 1 or several drop-down menus including too many options are not user-friendly. According to a study, drop-down menus are annoying because they are difficult to navigate and scroll through [3].
In comparison, mega menus enhance users’ experience due to their well-organized structure [4]. When viewing a drop-down menu, users often find it hard to make a visual comparison between all the choices. Many drop-down menus are so long that users have to scroll down to view more, which means the top selections are hidden. A mega menu, on the other hand, can display all categories at once without scrolling.
However, “less is more”. Putting too much content in a mega menu can make shoppers overwhelmed and neuter its purpose. Do you think that the 1800 PetMeds store in the below screenshot has a complex menu?
When you want to emphasize on menu visual
Researchers found that 94 % of users like to pay attention to the look and feel of a website before navigating it, signifying the importance of visuals in designing. This number is shared by the founder of CXL on its website [5]. It once emphasized the importance of being visually appealing. That’s the reason almost all Shopify stores include product images or related images on their mega menu. Below is an example of Mary Maxim.
When not to use Shopify mega menu?
The previous section tells that a mega menu is a powerful tool for Shopify stores. However, it isn’t the solution for all stores. Avoid using use a mega menu when:
There are lots of links on your homepage
The aim of a mega menu is to organize your sitemap then help shoppers navigate through provided links. But if your homepage is a page full of links to many subpages, your site doesn’t need a mega menu to repeat this job. One of the typical cases for this is websites providing public services and information.
Let’s see an example of the Canada Government site, which has lots of links on its homepage:
In this case, a left-hand navigation menu, which can be expanded to see lower levels, maybe more convenient.
This is also a good example of not using a mega menu in a context where users would not be expecting it. For example, mega menus are less popular in public sector websites than in retail.
But will a retail store be interesting if it just has lots of links on the homepage? Well, it might only be appropriate for the public sector.
However, this can also be applied to websites that exclusively provide content such as information, academic research, or case studies. Harvard Business Review can be considered as an example. And of course, they usually come with subscription plans if you want to read their exclusive content.
You want to funnel shoppers to a specific page
Sometimes, your website will be designed to map a marketing funnel. For example, motivating shoppers to sign up to your email list, directing them to the landing pages, or guiding them to follow the desired user path.
For example, Hana’s homepage is minimal and oriented towards the collection page with a strong call to action. This store uses a one-level menu, which shows menu items on the header. Yet, a mega menu may create a more complex customer journey on your website in this or similar cases.
The user watches your website on a small screen (such as mobiles)
When designing a mega menu, it is essential to take notice of differently sized screens. For example, producing a mega menu for a mobile screen is difficult. Because a mega menu needs a large space to show its content, including many columns and rows, images, etc… If you want a mega menu for the mobile version, keep it simple.
You may ask, if not a mega menu for mobile screens, then what?
Use a burger menu. This type of menu is hidden and stays so until a user taps on the menu icon. If you’re wondering why it’s called a burger menu, keep reading. The reason lies in its shape; it has three vertical lines and resembles a hamburger. Let’s see the burger menu of Novo Watch for the mobile version.
How to organize an efficient mega menu?
Now, let’s break down how to organize content for a mega menu.
Defining Menu Sections
The content of the mega menu needs to be balanced between exhaustiveness and convenience. Because it should reach every category or collection while being easy to follow and not overwhelming. A good mega menu’s content should reflect the structure of the website as well as the needs of the customer. Here are some ideas for separating and naming sections.
Based on the product catalogue of the marketplace
This is the most common way for Shopify stores. Here is an example of Soko Glam. The menu breaks down into main categories and subcategories. This type will be most useful for customers who have a clear idea of what they want.
Display each category of a mega menu one at a time
A website can include many main categories in a mega menu. Store owners often put them side by side in the header bar. As the whole menu’s content is large, it’s recommended to display only one category’s content when hovering over its title. Let’s take a look at Soko Glam as an example. Each category has its own mega menu, and it only displays the content of the selected category when hovering over or clicking on it. Visitors will only see one menu at once.
Grouping Menu Sections
Sections of the menu should be grouped based on the users’ view. Common groups are best sellers, new arrivals, brands, women or men. However, you should avoid adding too many items within a section in each menu. It will take shoppers more time to scan while browsing. In addition, you should use descriptive labels for the titles of the menu items. As a result, users will immediately understand your idea.
For example, the interface of Allbirds is simple and neat. There are 5 mega menus with descriptive labels: men, women, new arrivals, sustainability. As you can see in the screenshot, in the Women menu, sections are put in columns with items below.
Use Visuals / Images and Icons
As mentioned above, visualization contributes a lot to buyers’ interest in your store. Moreover, a product image can help them quickly imagine what your product looks like. Not only product images, but you can also use related images for your products. For example, the Showtime store uses images related to the TV series to sell merchandise.
How to add a mega menu?
After exploring the mega menu, do you want to add one to your store? There are several options, but you should consider your needs to determine the most efficient path.
Use Shopify Apps
Installing a Shopify app is the easiest way to have a mega menu. There are lots of mega menu apps in the Shopify app store. However, to choose the right app, make sure you understand it completely. I would recommend the top 3 apps, which have received positive reviews from Shopify users.
Buddha Mega Menu
The Buddha Mega Menu app by Zero Carbon SRL is the most popular mega menu app in the Shopify app market, with a total of 975 views and a rating of 4.8/5 (counted for the first half of 2021). This app is intuitive and easy to use. This app allows you to quickly create a mega menu on the app’s dashboard, then preview it on multiple devices and activate your store when everything is ready. Depending on needs, users can easily create 4 types of menus:
- Tree: Unlimited levels of submenus.
- Simple: One simple drop-down.
- Tabbed: Multiple categories with subcategories.
- Contact: Easily use the contact form.
Pros
- Create any menu you’d like, with a few simple selections.
- Provides a contact menu (only in the paid version).
- Provides a countdown feature to boost sales.
- Intuitive and easy to use, with the help of instruction videos.
- Compatible with all Shopify themes.
Cons
- Does not allow users to edit the Menus or sub-menus style.
- Does not provide text alignment.
- Only the Tree menus are available in the Free version.
Mega Menu
The second nominee is the Mega menu app by Globo. Globo Mega Menu is a user-friendly, fully customizable, and highly responsive app for Shopify. Therefore, you can create a desirable menu while it remains a powerful setting for designing highly inventive menus. This app is well-liked by users, with 319 reviews and a 4.8 average rating.
Pros
- Strong customizability, with options to edit colors, images, fonts, etc.
- Provides many template options, from Tree (dropdown), Mega, Tabs & 1 special menu.
- Provides badges, text alignment, contact form & Google Maps.
- Allows users to see both mobile and desktop versions while editing.
Cons
- Watermark in the free version.
- The majority of features are only available in the most expensive plan.
Smart Mega Menu and Navigation
Last but not least, consider Qikify’s Smart Mega menu and Navigation because it is the most cost-effective option. You have the option of signing up for a free-forever, basic, or premium plan for $0, $3.99, or $7.00 per month, respectively. This app allows you to create a multi-level menu with templates and no coding skills are required. It is only incompatible with the Narrative & Pop Shopify theme.
Pros
- Provides many template options, from tree (simple), mega to tabs. All these templates are shown with clear examples.
- Provides text alignment & price comparison.
- Options to hide headers or sub-headers on mobile and/or desktop versions.
- Allows users to adjust column width in any sub-heading and allows them to open links in a new tab.
Cons
- Watermark in the free version.
- Not compatible with all Shopify themes (Narrative & Pop).
- Tab menus only available in the paid plans.
Without apps
If your Shopify store has already installed many apps, it’s recommended to add a mega menu without an app. This is because running many apps will affect your website performance. Here are 2 ways that you can consider:
Edit code
This is an advanced method because it requires technical skills. Follow this tutorial if you’re ready to experiment with coding. Note that you should duplicate your Shopify theme. Otherwise, if errors occur, your store website may suffer. Shopify allows you to hold up to 20 themes at once, so you can keep a record of the updates and changes.
Outsourcing your Shopify tasks
Even though you are a business owner, you don’t need to handle all jobs by hand. The meme for today is “You have the same 24 hours in a day as Beyoncé”. This implies that Beyoncé spends her 24 hours doing what only she can do well. In other words, you should focus on the core competence such as optimizing conversion rate, enhancing store performance, planning sales strategy, etc. In fact, if you are not familiar with coding in the Shopify polar system, you may take much time to edit while the outcome is not as expected.
Here are some typical benefits of outsourcing:
- Fully customized for your own business: Your brand, business goals and objectives are unique. Hiring Shopify experts will be easier to reflect your uniqueness than ready-made products such as apps.
- Ensure professional quality of outcomes: With professional working experiences, Shopify experts will provide a high-quality outcome.
- Effective cost: Since you hire Shopify experts to add a mega menu for your store, it will be yours forever. You only pay once instead of charging each month, year. Totally, it is a saved option.
- Efficient performance: Time is golden. Higher productivity will raise your competitiveness in the market.
If this is the first time you have hired Shopify experts, here is a guide. Since outsourcing creates a big demand in the eCommerce market, you can easily hire Shopify experts through platforms such as Upwork and Fiverr or the Shopify experts’ market. However, if you have no prior experience with outsourcing, you should start with a Shopify agency. Because an agency has built an effective working process. They will quickly understand your business through their various experiences. You’ll find them quickly on B2B platforms, which are Clutch, 99firms, Goodfirms, Platpick, CrunchBase, CrowdReviews.
As a Shopify certified partner, HappyPoints can assist you in handling Shopify tasks and projects. Let’s start with a few clicks to add a Shopify mega menu.
Final thoughts
Above all, there are several ways to help you reach your desired goal. The best thing about the Shopify mega menu is that you can set up many mega menus at once easily. We hope you can now decide and be ready for your own mega menu.
And if you also want your online store to be more perfect and complete, this Shopify theme customization guide will help.
If you are still struggling to choose the best options for your store, we are willing to give you a hand for free consulting.
References
[2] https://clutch.co/web-designers/resources/top-6-website-features-people-value
[3] https://www.nngroup.com/articles/does-user-annoyance-matter/
[4] https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/
