Skip to main content

Add & Setup Mega Menu for BigCommerce

Last updated: May 25 2021

Written and researched by experts at Avada Learn more about our methodology

Menus are critical for customers to navigate eCommerce websites strategically and effectively. A well-designed menu can persuade people to continue their search on your site. The Mega Menus capability provides more information about the sections and tabs featured on your website’s menu.

BigCommerce’s default menu is quite simplistic in design and falls short of the standards set by major eCommerce enterprises. However, Mega Menu is ideal for any eCommerce website that is seeing a decline in client engagement. The rich Mega Menu is a full-width expanding menu that directs the consumer to the desired section.

This post is a detailed instruction of How to Add & Set up Mega Menu for BigCommerce that we would like to offer store owners who are interested in building a Mega Menu for their BigCommerce store.

What is the BigCommerce Mega Menu

BigCommerce Mega Menu

The success of your eCommerce business is directly related to how simple it is for users to locate things. And the Mega Menu is the first step in accomplishing that goal. They are more likely to make purchases if they can rapidly access information, and you can also promote any category/products or display any marketing message there.

Mega Menu — Menu with many columns. Apart from the basic Bigcommerce menu, you may also utilize our enlarged menu. With Mega Menu, you can effortlessly add graphic banners, video clips, paragraph text, and static blocks to your menu. This results in a menu that is rich, visually appealing, and extremely handy. Additionally, your menu can have numerous columns with dropdowns, which you may organize to fit your store’s layout.

How to Add & Set up Mega Menu for BigCommerce

When you have a large number of categories and subcategories to offer, it may be ideal to have many levels in your Mega Menu. SSo that buyers can easily dig down into any subcategories and find what they’re searching for. You may either hire a BigCommerce development service, to accomplish it for you, or you may follow these simple steps.

Note: Before proceeding with these modifications, download a backup of the theme first, just to be safe. To do so, navigate to your administrator panel, click on design, and then click on download theme.

Step 1: Go to Product. Select Product Categories.

Product Categories

Step 2: Create New Sub Categories.

New Sub Categories

Step 3: Fill in the Category Details. Then click on Save & Exit, or Save & Add other.

Category Details

After adding a new subcategory, you can see it in the Product Categories tab by clicking on the (+) sign to the left of the Main Categories. See new sub Categories Product Sub Categories

Repeat those steps for more subcategories. CAPTION

Step 4: Add new product

Click on the (…) sign next to the sub category, choose Product. Add New Product

Select Add. Add

Fill in the list of Product Details. Choose the right Category and Subcategory for the product as you wish. Click on Save when finished. Basic Information

Step 5: Congratulations. You’re successfully set up your BigCommerce Mega Menu.

BigCommerce Mega Menu

Examples of BigCommerce Mega Menus

When surfing websites, the majority of people nowadays prefer to browse and click as little as possible. Utilizing Mega Menus is an excellent approach to minimize scrolling and clicking while still displaying a large number of links.

The more categories or pages on a site, the more Mega Menus are recommended. An excellent illustration of this is eCommerce retailers that provide a diverse selection of items. For instance, www.lightexports.com employs Mega Menus for each of the top navigation’s dropdowns. You may get an idea of the length of a standard 1-Dimensional list (list straight down) by looking at the image below.

Light Exports

Some websites feature a fixed header, allowing users to access the top navigation without having to scroll back to the top. There are more brands visible, and the list is only a quarter of the height of the plain list. Another example of how Mega Menus may be used:

Mega Menu

Problems and Questions

1. How to create a Brands Category in the mega menu?

In some cases, when you have a Mega Menu, you want to add a Brands subcategory to our main ‘Shop By’ category so that customers may choose from various brands. You may prefer to get this information directly from the Brand’s web page to manually change it all the time. In order to do that, you should set up a separate web page for each Brand and redirect it to the brand page.

2. How can I let the client upload an image and reference it in the theme code?

If you want to allow customers to customize some of the storefront images, or notably a couple of banners inside of the Mega Menu, you’d put this in the theme files:

image link

3. How to have the image be the only item in the left column of the mega menu?

In order to set the image in the Mega Menu to be the only item in the left column, you will have to use a div tag to separate the image from the menu.

Conclusion

In short, customers’ experiences on eCommerce websites are simply enhanced with the Mega Menu capability, from which customers know what to anticipate from various areas before they click any links and have a clear notion of what to expect in terms of items. This feature helps clients get to the sites they want to go to, making shopping more efficient for them and increasing conversions.

After reading through our guide of How to Add & Set up Mega Menu for BigCommerce, we hope you are now able to create your own BigCommerce Mega Menu to increase conversions and keep customers coming back and make websites as easy to navigate as possible.

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.