Mastering BigCommerce Category Display: Eliminate 'No Products' Messages and Enhance UX

View original discussion by Big Migration Expert on GitHub →

A common challenge for BigCommerce merchants, especially those with extensive product catalogs organized into parent and subcategories, is the appearance of the "There are no products listed under this category" message. This message typically appears on parent category pages when products are exclusively assigned to subcategories, leaving the parent category itself technically "empty." While functionally accurate, this can confuse shoppers and detract from a seamless browsing experience, potentially impacting conversion rates.

Community-Backed Solutions for BigCommerce Category Display

The BigCommerce community offers several practical solutions to address this display issue, ranging from simple configuration tweaks to more advanced theme customizations, catering to different levels of technical expertise.

1. The Built-In BigCommerce Setting: The Easiest Fix

For many merchants, the quickest and most effective solution involves leveraging a powerful, often overlooked, setting within the BigCommerce control panel. As advised by Tanner Brodhagen from Brod Solutions, BigCommerce provides a direct way to manage this behavior:

  • Navigate to Settings > Display > Category Settings.
  • Enable the option: "Show products from child categories if the current category is empty."

This setting is a game-changer as it instructs BigCommerce to automatically pull products from direct subcategories and display them on the parent category page if the parent itself has no products. This ensures that your customers always see relevant products, eliminating the "empty" message without requiring any code modifications and significantly improving UX.

2. CSS Customization: Hiding the Message Visually

If your goal is purely to hide the "no products" message without displaying child category products on the parent page (perhaps you prefer parent categories to serve as navigational hubs), CSS offers a flexible solution. Both Daniel Olvera and Jonathan Elder suggest using CSS:

  • Via Page Builder: For non-developers, BigCommerce's Page Builder allows you to inject custom CSS. Add a Page Builder block with custom style rules targeting the specific element containing the "no products" message.
  • Direct Theme File Editing: For developers, editing your Stencil theme's CSS files (e.g., within assets/scss/layout/_category.scss) provides a more robust solution. Identify the correct CSS selector for the message container using browser developer tools and apply display: none;.
  • Inline Style Snippet (Page Builder): Jonathan Elder specifically mentioned adding a Page Builder block with inline