Loading...

How To Display Subcategories In A Custom Header

Simona C. Published on 18 August, 2014

Do you have a Bigcommerce store with many categories and you need a header menu different than the side panel one?

To create this I will keep the side panel as is and work with the header instead. By default the header can contain pages, pages and categories, or just categories. I tried a theme which has pages only so I needed to add the sub-categories there. To do that, I went under Design->Edit HTML/CSS->Header.html. Inside that panel, I added a variable with a div around it like this:


<div id="NewSubCat">%%GLOBAL_SubCategoryList%%</div>

The code, can be added under: %%Panel.PagesMenu%% for example. Here is a screenshot:

That %%GLOBAL_SubCategoryList%% contains the child categories of the current category. You will need to hide some of the categories in case you have too many. For this tutorial, I found a way to hide the level 2 categories, and display just the level 3 ones. The following CSS code does just that:


#NewSubCat ul{padding:0 !important; margin:0 !important; display:inline-block; margin: 0 5px;}
#NewSubCat ul:before{ display:none;}
#NewSubCat li { padding:0; margin:0; display:inline-block;}
#NewSubCat li ul{ position: relative; width:auto; padding:0 10px;}
#NewSubCat ul li a{ display: none;}
#NewSubCat ul li ul { background: transparent;}
#NewSubCat a:hover{ color: #000; }
#NewSubCat ul li ul li{ margin: 0 5px;}

I added that code to custom.css under Design->Edit HTML/CSS, like below:

And after that, I checked to see if that custom.css is appearing inside HTMLHead.html panel. In case you do not have it there yet, add this code:


<link href="%%ASSET_Styles/custom.css%%" type="text/css" rel="stylesheet" />

to HTMLHead.html under Design->Edit HTML/CSS. Here is how it will appear:

After making these changes, check your store front by browsing to a category page. You should see a side panel with subcategories, while the menu will show the third level of categories from the store, like here:

Here's the structure of the categories in the control panel:

And as you can see there, the code works even if there are more subcategories under different parents.

I hope this helps creating the different header menu you were looking for.

Simona C. Published on 18 August, 2014