Clean Up Your Shopify Navigation: Removing Product Counts in the Relay Theme

Hey everyone! As a Shopify migration expert and someone who spends a lot of time sifting through the amazing Shopify Community forums, I often come across those little frustrations that can really trip up new store owners (and even some seasoned pros!). One common design tweak that often comes up is how to keep your navigation clean and clutter-free. Recently, a thread caught my eye that perfectly illustrates this, specifically for those of you using the Relay theme.

It was titled something like, "[Relay Theme] How to remove product count from navigation menu?" and it sparked a great little discussion that I think many of you will find super helpful. Let's dive in!

The Navigation Nuisance: Product Counts

Our community member, ClayHutch, kicked off the discussion. They were just starting to build an online shop and ran into a common visual hiccup: their navigation menu, specifically a level 2 menu item like "Rompers," was displaying a small number – in this case, "1" – indicating the product count within that collection. While some themes offer this as a feature, it's not always the aesthetic people are going for. It can make your menu look busy, especially if you have many collections with varying product counts.

ClayHutch shared a screenshot, which really helped illustrate the problem:

As you can see, that little "1" next to "Rompers" is what we're talking about. ClayHutch had already tried a few common CSS snippets in their theme.css file, hoping to target and hide these numbers. They tried various selectors like .collection-count, .card__subtitle, and even broader ones like [class*="count"], but nothing seemed to work. This is a classic example of how different themes use different underlying HTML structures and class names, making a universal CSS fix tricky.

The Community Comes Through with a Simple Fix

While another member, Mustafa_Ali, rightly asked for more details like the website URL and a screenshot (always a good first step for debugging!), it was Maximus3 who swooped in with an elegant, concise solution. And this is exactly why the Shopify Community is such a goldmine – shared knowledge saves so much time!

Maximus3's advice was straightforward: you don't need to dig deep into your theme's core CSS files. Instead, you can leverage the built-in "Custom CSS" feature available right in your theme editor. The key insight was identifying the specific HTML element the Relay theme uses for these product counts: the tag.

Here's the simple CSS Maximus3 provided:

.sup {
  display: none;
}

This little snippet tells the browser to simply not display any element with the class .sup. In the Relay theme's case, those pesky product counts were wrapped in a tag that likely had a class of sup (or was being targeted by that general element selector), making this a perfect, non-invasive fix.

Maximus3 even provided a helpful visual showing the element being targeted:

How to Remove Product Counts in Your Relay Theme (Step-by-Step)

Ready to clean up your navigation? Here's how you can implement Maximus3's solution:

1. Log in to your Shopify admin.
2. Navigate to "Online Store" > "Themes."
3. Find your "Relay" theme. If it's your live theme, it will be listed under "Current theme." If you're experimenting, you might find it under "Theme library."
4. Click the "Customize" button. This will open the theme editor.
5. In the theme editor, locate the "Header" section. You'll usually find this in the left-hand sidebar. Click on it to expand its settings.
6. Scroll down within the Header settings until you find "Custom CSS." This is a powerful little box where you can add specific styles without modifying the theme's core files, making updates much safer!
7. Paste the following CSS code into the "Custom CSS" box:

   .sup {
     display: none;
   }
   

8. Click "Save" in the top right corner.

Maximus3 also provided a screenshot of where to paste this code, which is super helpful:

Once you've saved, head over to your live store and refresh the page. Those product counts should now be gone, giving you a much cleaner, more streamlined navigation menu!

Why This Matters for Your Store

While it might seem like a small detail, a clean and intuitive navigation is crucial for user experience. Cluttered menus can overwhelm visitors, making it harder for them to find what they're looking for. By removing extraneous information like product counts, you simplify the path to purchase and create a more professional, polished look for your brand.

ClayHutch's final post, a simple "Thank you, Maximus3!", confirmed that this solution hit the mark. It's a fantastic reminder that sometimes the most effective solutions are also the simplest, and often, the Shopify Community is the best place to find them. Don't hesitate to poke around those forums; you never know what gem you'll unearth that could save you hours of head-scratching!