How can I hide empty collections in my navigation menu?

Store Design
1

Hello,

I want to Hide empty collections in my navigation menu. I tried something like:

{% for collection in collections %}
   {% if collection.all_products_count == 0 %}
      .
      .   
      .
   {% endif %}
{% endfor %}

but the collections still show up, even if they contain no products.

Here is the complete code for the navigation bar:

{%- assign featured_links = section.settings.nav_featured_link | split: ', ' -%}
  
    

      

        {% render 'svg-x' %}
        

          {% for link in linklists[section.settings.menu_linklist].links %}
            {%- assign has_dropdown = false -%}
            {%- if link.links != blank -%}
              {%- assign has_dropdown = true -%}
            {%- endif -%}
            {%- assign use_columns = false -%}
            {%- if link.levels >= 2 -%}
              {%- assign use_columns = true -%}
            {%- else -%}
              {%- for block in section.blocks -%}
                {%- if block.settings.dropdown_link_title == link.title -%}
                  {%- assign use_columns = true -%}
                  {%- assign has_dropdown = true -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
            - {{- link.title -}}
              
                {% if has_dropdown %}
                  {% render 'icon-toggle-menu' %}
                {% endif %}

                {% if has_dropdown %}
                  {%- assign promo_count = 0 -%}
                  {%- capture menu_promotion_html -%}
                    {%- for block in section.blocks -%}
                      {%- if block.settings.dropdown_link_title == link.title -%}
                        {%- assign promo_count = promo_count | plus: 1 -%}
                      

                          {%- if block.settings.link_url != blank -%}
                          
                          {%- endif -%}
                        

                            {%- render 'responsive-image', image: block.settings.image -%}
                        

                          {%- if block.settings.title != blank -%}
                            {{ block.settings.title }}

                          {%- endif -%}
                          {%- if block.settings.link_url != blank -%}
                          
                          {%- endif -%}
                      

                      {%- endif -%}
                    {%- endfor -%}
                  {%- endcapture -%}
                  {%- assign column_count = promo_count | plus: link.links.size -%}

                    
     		                    
                  

                      {% for child_link in link.links %}
                      - {{- child_link.title -}}
                      
                            {% if child_link.links != blank %}
                              {% render 'icon-toggle-menu' %}
                            {% endif %}

                            {% if child_link.links != blank %}
                        

                          

                                  {% for child_child_link in child_link.links %}
                                  - {{ child_child_link.title }}
                            
                                  {% endfor %}
                          
                        

                            {% endif %}
                    

                      {% endfor %}

                      {%- if promo_count > 0 -%}
                        - {{ menu_promotion_html }}
                      
                      {%- endif -%}
                  
                

                {% endif %}
            
          {% endfor %}

While this is the part i am trying to change:

    
     		                    
                  

                    {% for child_link in link.links %}
                    - {{- child_link.title -}}
                      
                        {% if child_link.links != blank %}
                          {% render 'icon-toggle-menu' %}
                        {% endif %}

                        {% if child_link.links != blank %}
                        

                          

                              {% for child_child_link in child_link.links %}
                              - {{ child_child_link.title }}
                            
                              {% endfor %}
                          
                        

                        {% endif %}
                    

                    {% endfor %}

                    {%- if promo_count > 0 -%}
                      - {{ menu_promotion_html }}
                      
                    {%- endif -%}

I hope you can help me with this.

2

Hi @Alocard ,

Did you delete that collection in backend shopify ?

3

@oscprofessional

No, the collection is still there. There are just no products in it.

I just can’t write something like, in the theme file:

{{ collection.all_products_count }}

Because the editor doesn’t know which collection i am talking about.

4

Delete it .

shopify-admin-collections.png
shopify-admin-collections.png2818×1124 221 KB

5

@oscprofessional

I might put some products in that collection later tho. So i don’t really want to delete it. I just wanna hide it, if its empty, so its still there when i need to put products in it.

6

@Alocard ,

Okay,

remove thats collection in main navigation setting. it has option. check again

oscprofessional_0-1638432590184.jpeg
oscprofessional_0-1638432590184.jpeg1349×655 47.3 KB

7

@oscprofessional

Thank you for your answers, but I am really looking for a way, where I don’t have to change any settings in the admin. I am looking for a code that works.

8

Hi @Alocard ,

Your issue is solved or not still?

9

This may help you if you are still looking for an answer. He says “we should check for link type and then check for link object for product size.” https://community.shopify.com/c/shopify-design/debut-theme-hide-empty-collections-from-main-menu/m-p/519066#M132611

10

@TheThisThat

Thank you, i have already solved the problem :slightly_smiling_face:

11

Hey Question: What did you end up doing to solve this issue? Its becoming a problem for our store as well.

12

Hey @rwestcott ,
This is the relevant code for the navigation bar in my theme:


    {% for child_link in link.links %} 
    {% for collection in collections %} 
    {% if collection.url == child_link.url and collection.all_products_count != 0 %} 

    - {{- child_link.title -}}

I have marked the parts that I have inserted. This has solved my problem.
If that doesn’t help, feel free to share your code so I can take a closer look.
With kind regards
Alocard