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

Store Design
,
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.

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 %}
4

Hi， @Jeannamj
You may currently have something like this in header.liquid or header-menu.liquid:

{% for link in linklists.main-menu.links %}
  <li>
    <a href="{{ link.url }}">{{ link.title }}</a>

    {% if link.links != blank %}
      <ul>
        {% for childlink in link.links %}
          <li>
            <a href="{{ childlink.url }}">{{ childlink.title }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}

Updated Code: Hide Empty Collection Links

Replace the child link loop with this logic:

{% for childlink in link.links %}
  {% assign child_collection = childlink.object %}

  {% if child_collection != blank and child_collection.products_count > 0 %}
    <li>
      <a href="{{ childlink.url }}">
        {{ childlink.title }}
      </a>
    </li>
  {% endif %}
{% endfor %}

If You Tell Me:

Your theme name (Dawn, Horizon, custom)
Where your menu code lives (header.liquid, header-group.liquid, etc.)

I can give you an exact drop-in snippet for your theme structure.