Custom Code to Hide Empty Collections on Navigation Bar on Stiletto Theme

Store Design
,

Topic summary

Main issue: A store owner using the Stiletto theme wants to hide empty collections from the Clothing dropdown in the navigation bar. The aim is for submenus like “Dresses,” “Bottoms,” and “Tops” to appear only when those collections contain at least one product.

Requested help: Guidance or custom code (likely theme Liquid and/or CSS) to conditionally display collection links based on product availability. “Collections” are grouped sets of products; the user wants the menu to reflect only non-empty collections.

Status/outcome: No solutions or code examples have been provided yet. The request remains open with no confirmed approach, decisions, or action items recorded.

Summarized with AI on December 11. AI used: gpt-5.
1

I am hoping someone can help me with the custom code needed to hide empty collections on my navigation bar. Under Clothing I have a drop down menu with dresses, bottoms, tops…etc. and I only want these collection titles to appear on the drop down menu if there is a product available. Any help will be greatly appreciated. Thanks for your time and consideration.

1 Like
2

Hi @Jeannamj

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Hi @Jeannamj ,
You can hide empty collections in your navigation by adding a simple condition in your theme code. Shopify lets you check how many products a collection has, so we just use that to decide whether it should show.

If you’re editing a dropdown menu that’s hard-coded in your theme (not using the Online Store > Navigation settings), you can wrap your links like this:

{% if collection.all_products_count > 0 %}
  <li>
    <a href="{{ collection.url }}">{{ collection.title }}</a>
  </li>
{% endif %}

If your dropdown loops through multiple collections, it would look like:

{% for collection in collections %}
  {% if collection.all_products_count > 0 %}
    <li><a href="{{ collection.url }}">{{ collection.title }}</a></li>
  {% endif %}
{% endfor %}