Tired of Product Counts? How to Easily Hide Them in Your Shopify Relay Theme Navigation

Hey there, fellow store owners! As someone who spends a lot of time diving into the Shopify community forums, I often see common questions pop up that really highlight the little tweaks that can make a big difference in your store's appearance and user experience. Today, I want to share a fantastic, simple solution that came straight from the community, tackling a common design preference: cleaning up your navigation menu by removing those sometimes-unnecessary product counts.

Recently, a store owner named ClayHutch (who goes by G) started a thread asking for help with their Relay theme. They were just getting started building a shop for a family member and ran into a snag: the navigation menu was automatically displaying a product count next to their collection links. Specifically, they saw a "(1)" next to "Rompers," indicating one product in that collection. While helpful in some scenarios, for many, it can clutter a clean design.

ClayHutch had already done some smart troubleshooting, trying various CSS snippets in the theme.css file. They experimented with several lines of code like:

.collection-count, .card__subtitle, .unit-quantity, .collection-list__item-count { display: none !important; }

and even more specific attempts:

.menu-drawer__menu-item .count, .header__menu-item span:last-child:not(:first-child), .header__menu-item .collection-count, .mobile-facets__item .count { display: none !important; visibility: hidden !important; opacity: 0 !important; }

But despite their best efforts, these weren't quite hitting the mark. It's a common trap – sometimes finding the exact CSS class that controls a specific element can feel like hunting for a needle in a haystack, especially with theme-specific naming conventions.

This is where the power of the Shopify community really shines! Another helpful member, Mustafa_Ali, jumped in first to ask for a website URL and a screenshot, which is always a great first step to diagnose these visual issues. ClayHutch graciously provided the details, including this image showing exactly what they wanted to hide:

(See that little "1" next to "Rompers"? That's what we're talking about!)

Shortly after, Maximus3 swooped in with an incredibly simple and effective solution. Instead of digging deep into the theme's core CSS files (which can sometimes be overwritten during theme updates or lead to more complex issues), Maximus3 pointed ClayHutch to the theme editor's built-in "Custom CSS" feature. This is often the best place for small, targeted visual adjustments because it keeps your customizations separate and makes them easier to manage.

The magic code snippet was surprisingly concise:

.sup {
  display: none;
}

Maximus3 even included helpful screenshots to guide ClayHutch (and now you!) through the process.

Step-by-Step: How to Hide Product Counts in Your Relay Theme Navigation

If you're using the Relay theme and want to achieve a cleaner navigation menu by removing those product counts, here's exactly what you need to do:

1. Go to your Shopify Admin: From your dashboard, navigate to Online Store > Themes.
2. Access the Theme Editor: Find your active Relay theme, click on Customize to open the theme editor directly. (If you want to be extra safe, you can duplicate your theme first by clicking Actions > Duplicate.)
3. Navigate to the Header Section: In the theme editor, on the left sidebar, click on the Header section.
4. Find the Custom CSS Box: Scroll down within the Header section settings until you find a field labeled "Custom CSS".
5. Paste the Code: In this Custom CSS box, paste the following snippet:

   .sup {
     display: none;
   }
   

6. Save Your Changes: Click the Save button in the top right corner of the theme editor.

And just like that, those pesky product counts should disappear from your navigation menu! ClayHutch confirmed this worked perfectly, thanking Maximus3, and another user, david11330, chimed in saying they learned a lot from this simple solution too. It's a great example of how a small piece of CSS can target a very specific element (in this case, the .sup class, which likely stands for "superscript" given its common use for small, elevated text like counts) and clean up your store's aesthetic.

This approach is fantastic because it leverages the theme editor's built-in custom CSS feature, meaning you don't have to worry about digging through complex theme files or potentially breaking something during future theme updates. It's a clean, contained customization. So, if you've been wanting to streamline your navigation and give your Relay theme a slightly more minimalist feel, give this quick trick a try. It just goes to show that sometimes, the simplest solutions are the most effective, especially when shared by a collaborative community!