28th November 2016

Hiding Categories in BigCommerce

This article updates our previous 5 minute masterclass article “Hiding Categories in BigCommerce with jQuery“.

One of the most popular pages on our website is an article on how to hide categories in BigCommerce. Our article provides a method for hiding categories using jQuery to filter out categories matching specific text strings. It’s now possible to achieve the same thing without relying on Javascript.

To hide categories, all we need to do now is create a top level category, hide it, and then place visible categories inside it as subcategories. These can then be linked to and are visible to your website visitors. Hiding the top level category means that these new categories won’t appear in the main navigation.

This is what you’ll end up seeing in your control panel:
Hidden category view in BigCommerce control panel

Step by step guide

Step 1 of 5: Head over to Products > Product Categories in your BigCommerce control panel. In the category view, click “Create a Category”.
Create a BigCommerce category

Step 2 of 5: In the category creation screen, create a name for your hidden category. Call it something to help you recognise it as your hidden category in the back-end. Remember this page won’t get indexed by search engines as it is hidden. Choose “No Parent Category” as the Parent Category option so that it behaves as a top level category. Save and Exit.
BigCommerce create category screen

Step 3 of 5: Back in the main product category list, locate the category you just added, and click its check mark in the “Visible in Menu” column, to hide it.
Bigcommerce category visibility

Step 4 of 5: Now to create the visible category – click the options switch on the new hidden category you just created, and click “New Sub Category”. Create your new promotional category on the next screen, and click “Save and Exit”.
Create new subcategory

Step 5 of 5: Make sure the new subcategory is set to visible. You can now assign products into this new category and link your customers to this area in email or PPC campaigns without your main website traffic seeing the category in the main navigation.
Visible and hidden categories in the BigCommerce control panel

Optional steps

An issue that arises from hiding the parent category is that despite being hidden from the navigation, it appears in the breadcrumb trail on the visible subcategory and product pages:
BigCommerce hidden categoy visible in the breadcrumbs

Unfortunately this is a link, so if it gets clicked on, the visitor is taken to a 404 not found page. We can get around this with some CSS.

The following instructions are only guidelines, and require a more in-depth knowledge of the BigCommerce templating system.

Step 1 of 4: Duplicate the category.html and product.html layouts, and save them as _hiddenCategory.html and _hiddenProduct.html in the main template directory.

Step 2 0f 4: Edit your new layout files, and assign an identifiable class to the opening <body> tag, i.e. <body class=”hidden-page”>
Add a hidden body class

Step 3 of 4: We’ll use some CSS3 to select the second <li> in our breadcrumb trail. Add the following to your custom.css file:
.hidden-page .Breadcrumb li:nth-child(2) { display: none; }

Step 4 of 4: Assign the custom templates to your hidden category and products. To do this for the category page, edit the subcategory in the control panel and select the new template from the dropdown list in the “Template Layout File” section. You’ll be able to assign custom product templates in the product edit screen under the “Other Details” tab.
Choose a custom template file

Result:
Result of CSS mods

This is an easier method than the one described in our previous 5 minute masterclass. Remember if you need any assistance to set up hidden categories on your BigCommerce store, please get in touch with us for a no obligation quote.