Categories: Ecommerce

How to create multilevel mega menu in BigCommerce

You might already know how important mega menu is for your online store, as it give shopper broader view of your categories. Not to mention, this is being adopted by popular shopping websites such as Amazon, Ebay and many more. You can do this yourself if you have some knowledge about bigcommerce web design.  When you have huge amount of categories and their sub-categories to offer, it might be best to add multi levels in your mega menu, so your shoppers can drill down any sub categories with ease of use and reach to what they are looking for. You can either have any BigCommerce development services like us to do it for you, or follow these simple steps to do it yourself.

To create Multilevel Mega menu in your Bigcommerce template yourself follow these steps.

Before going ahead with these changes, download the theme backup first, obviously just to be safe. To do this go to your admin panel, go to design and click on download theme.

1. Add Categories

Login to your admin section and add categories like this, so when the multilevel mega menu is implemented you will see the items in it. If your BigCommerce store already has categories and subcategories like this, you can ignore this.

2. Add JavaScript

Add this below javascript in your HtmlHead.html You will find this file under your BigCommerce admin section in Design > Edit Html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
$( document ).ready(function() { $('.SideCategoryListFlyout ul.sf-menu > li').each(function (i, li) {
  
$( "ul.sf-menu > li > ul > li" ).addClass( "level1" );
$( "ul.sf-menu > li > ul > li > ul > li" ).addClass( "level2" );
$( "ul.sf-menu > li > ul > li > ul > li > ul > li" ).addClass( "level3" );
$( "ul.sf-menu > li > ul > li > ul > li > ul > li > ul > li" ).addClass( "level4" );
  
var lis = $(li).find('li.level1');
  
for (var i = 0; i < lis.length; i += 9) {
lis.slice(i, i + 9).wrapAll("
  
<div class='li_group'></div>
");
}
var $product = $(li);
if ($product.find('ul li.level1').length <= 9) { $(this).addClass('col1'); } else { if ($product.find('ul li.level1').length > 18) {
$(this).addClass('col3');
} else {
$(this).addClass('col2');
}
}
});
});
</script>

3. Replace navigation code with mega menu

Now go to Header.html and replace the following code

1
2
3
4
<div id="HeaderLower">
          %%Panel.SideCategoryList%%
          %%Panel.PagesMenu%%
      </div>

with the code below.

1
2
3
4
5
6
<div class="PageMenu">
        <div id="HeaderLower">
            %%Panel.SideCategoryList%%
            %%Panel.PagesMenu%%
        </div>
     </div>

4. Add CSS in style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.sf-vertical, .sf-vertical li{
width:auto; }
  
.col1 .li_group, .col2 .li_group, .col3 .li_group{
display: block;
float: left;
width: 227px ; }
  
.sf-menu li.level1 > ul, .sf-menu li.level2 > ul,
.sf-menu li.level3 > ul, .sf-menu li.level4 > ul{
position: absolute ;
width: 230px ;
box-shadow: 0 0 7px #ccc; }
  
.PageMenu .sf-menu li ul{
z-index: 150 ; }
  
.PageMenu .sf-menu ul > li > ul > li{
position: relative ;
z-index: 9999 ; }
  
.PageMenu .sf-menu > ul > div.li_group > li{
position: relative ;
z-index: 99; }
  
.PageMenu li ul ul{
left: 155px ;
margin-left: 0;
top: 0 ;
width: 230px ;
border-left:0px none; }
  
.col1 ul{
width: 227px ; }
  
.col2 ul{
width: 454px ; }
  
.col3 ul{
width: 681px ; }

5. Remove width:auto;

Remove width:auto; from below classes from style.css

1
2
3
#SideCategoryList ul, #SideCategoryList .sf-menu ul
 #SideCategoryList li,
 #SideCategoryList .sf-menu li

6. See multilevel mega menu in action

Need Help?

We’re certified BigCommerce design services and can help you with anything you need. Contact us here.

Jaimin Gohel

Leave a Comment
Share
Published by
Jaimin Gohel
Tags: BigCommerce
10 years ago

Recent Posts

B2B Boom: How BigCommerce Streamlines Wholesale Operations

BigCommerce is not just another excellent solution for eCommerce wholesale in the B2B space. As…

5 months ago

Understanding and Leveraging Shopify’s AI for Business Growth

Success in the fast transforming world of e-commerce depends on staying ahead of the curve.…

5 months ago

Headless CMS for Content-Driven Commerce: Elevate Your Magento Store’s Brand Story

In eCommerce, the concept of "headless commerce" is gaining traction. But don't disregard it because…

5 months ago

Building High-Performance E-commerce Stores with React

Welcome to "Designing a React E-Commerce App for Digital Products," the first instalment of our…

5 months ago

Headless Commerce Vs. Traditional Ecommerce: A Developer’s Perspective

The two main options available to eCommerce organisations today for their technology architecture are headless…

5 months ago

Which company uses node js for web development?

Node.js has revolutionized digital innovation since its 2009 founding. Node.js popularity has soared as more…

9 months ago