BigCommerce Category Pages: Hiding the 'No Products' Message and Enhancing User Experience

Addressing the 'No Products Listed Under This Category' Message on BigCommerce

A common challenge for BigCommerce store owners, particularly those with intricate category structures involving multiple sub-levels, is the default display of the message "There are no products listed under this category." While seemingly innocuous, this message can lead to significant confusion for clients and negatively impact the user experience, especially when parent categories are intended to guide users to subcategories rather than display products directly. This community insight explores a practical solution and a best practice approach to manage this issue, as discussed by BigCommerce users and experts.

The Problem: Client Confusion and Cluttered Category Pages

The original post by JohnMichael Slusser highlights a prevalent pain point: the repetitive appearance of the "no products" message across numerous category pages. For stores utilizing extensive sub and sub-sub categories, this message can appear on almost every parent category page that doesn't directly contain products but serves as a navigational hub. This not only creates an unpolished look but also misleads customers into thinking there are no products available, even when they exist within nested subcategories.

Solution 1: Hiding the Message Through Theme File Modification

The most direct way to remove the message is by editing your BigCommerce theme files. This method requires access to your store's theme code and a basic understanding of HTML commenting.

Step-by-Step Guide:

1. Navigate to Storefront > Themes in your BigCommerce admin panel.
2. Click on Advanced > Edit Theme Files for your active theme.
3. In the theme editor, go to Templates > Pages > Category.html.
4. Scroll down towards the bottom of the file to locate the specific HTML paragraph tag containing the "no products" text. It typically looks something like this:

   There are no products listed under this category.

5. To hide this message, you need to comment out the entire paragraph tag. This means wrapping it with HTML comment tags (). The modified code will look like this:

   As clarified in the forum thread, you do not need to put anything *between* the

   tags; simply add the comment delimiters around the existing tag and its content.

6. Save your changes.

This method effectively removes the visual display of the message without deleting the underlying code, making it easy to revert if needed.

Solution 2: Enhancing User Experience by Displaying Subcategory Products

While hiding the message is a quick fix, a more robust and user-friendly approach suggested by BigCommerce partner Danielle Mead is to configure your store to display products from subcategories directly on the parent category pages. This eliminates the "no products" message by ensuring parent categories are never truly empty and provides a more seamless browsing experience for your customers.

Step-by-Step Guide:

1. Go to Settings > Display in your BigCommerce admin panel.
2. Locate the Category Settings section.
3. Choose the option to show products from subcategories in the parent category. The exact wording may vary slightly depending on your BigCommerce version and theme, but the intent is clear.
4. Save your changes.

This configuration automatically populates parent category pages with products from their immediate subcategories, ensuring that customers always see relevant products, even if they land on a high-level category page.

Key Takeaways for BigCommerce Merchants and Developers

• User Experience First: Even small UI elements like a default message can significantly impact how customers perceive your store. Prioritizing clarity and ease of navigation is crucial.
• Leverage Theme Customization: BigCommerce's Stencil theme framework allows for considerable customization. Simple HTML/CSS tweaks can resolve specific display issues.
• Understand Store Settings: Before diving into code, always explore BigCommerce's built-in display settings. Often, a configuration change can provide a more elegant and maintainable solution than a code override.
• Community Support: The BigCommerce community and certified partners are invaluable resources for troubleshooting and best practices.

By implementing either of these solutions, BigCommerce store owners can create a cleaner, more intuitive browsing experience, reducing client confusion and enhancing overall site usability.