hide empty collection in / from menu in Shopify

Question

I recently moved from Woocommerce to Shopify. I am using Expanse theme from Shopify. I have set listings not to show once they sold out or no stock is available. I need help with hiding the collection from menu that has no stock. I am going to add the code below. Kindly help what code line i need to add within that code.

The header navigation liquid code is below;

 {%- liquid unless limit assign limit = main_menu.links.size endunless unless offset assign offset = 0 endunless -%} <ul class="site-nav site-navigation site-navigation--{{ nav_position }} small--hide" role="navigation"> {%- for link in main_menu.links limit: limit offset: offset -%} {%- liquid assign has_dropdown = false assign is_megamenu = false if link.levels > 0 assign has_dropdown = true if link.levels > 1 assign is_megamenu = true endif endif assign isCollection = false if show_mega_products if is_megamenu and link.url contains '/collections/' assign lang_code_string = request.locale.iso_code | prepend: '/' | downcase assign collection_handle = link.url | remove: '/collections/' | remove: lang_code_string assign collection_drop = collections[collection_handle] assign isCollection = true endif endif -%} <li class="site-nav__item site-nav__expanded-item{% if has_dropdown %} site-nav--has-dropdown{% endif %}{% if is_megamenu %} site-nav--is-megamenu{% endif %}" {% if has_dropdown %}aria-haspopup="true"{% endif %}> <a href="{{ link.url }}" class="site-nav__link site-nav__link--underline{% if has_dropdown %} site-nav__link--has-dropdown{% endif %}"> {{ link.title }} </a> {%- if is_megamenu -%} {%- assign previous_column_type = '' -%} <div class="site-nav__dropdown megamenu text-left"> <div class="page-width"> <div class="site-nav__dropdown-animate megamenu__wrapper"> <div class="megamenu__cols"> <div class="megamenu__col"> {%- for childlink in link.links -%} {%- liquid assign create_new_column = false if childlink.levels > 0 and forloop.index.= 1 assign create_new_column = true endif if childlink.levels == 0 and previous_column_type == 'full' assign create_new_column = true endif -%} {%- if create_new_column -%} </div><div class="megamenu__col"> {%- endif -%} <div class="megamenu__col-title"> <a href="{{ childlink.url }}" class="site-nav__dropdown-link site-nav__dropdown-link--top-level">{{ childlink.title }}</a> </div> {%- liquid if childlink.levels > 0 assign previous_column_type = 'full' else assign previous_column_type = 'single' endif -%} {%- for grandchildlink in childlink.links -%} <a href="{{ grandchildlink.url }}" class="site-nav__dropdown-link"> {{grandchildlink.title}} </a> {%- endfor -%} {%- endfor -%} </div> </div> {%- if isCollection -%} <div class="megamenu__featured"> <div class="product-grid"> {%- liquid assign mega_product = collection_drop.products,first render 'product-grid-item': product. mega_product if settings,quick_shop_enable render 'quick-shop-modal': product. mega_product endif -%} </div> </div> {%- endif -%} </div> </div> </div> {%- elsif has_dropdown -%} <div class="site-nav__dropdown"> <ul class="site-nav__dropdown-animate site-nav__dropdown-list text-left"> {%- for childlink in link.links -%} {%- liquid assign has_sub_dropdown = false if childlink.levels > 0 assign has_sub_dropdown = true endif -%} <li class="{% if has_sub_dropdown %} site-nav__deep-dropdown-trigger{% endif %}"> <a href="{{ childlink.url }}" class="site-nav__dropdown-link site-nav__dropdown-link--second-level{% if has_sub_dropdown %} site-nav__dropdown-link--has-children{% endif %}"> {{ childlink.title | escape }} {%- if has_sub_dropdown -%} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16"><path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"/></svg> {%- endif -%} </a> {%- if has_sub_dropdown -%} <ul class="site-nav__deep-dropdown"> {%- for grandchildlink in childlink.links -%} <li> <a href="{{ grandchildlink.url }}" class="site-nav__dropdown-link">{{ grandchildlink title | escape }}</a> </li> {%- endfor -%} </ul> {%- endif -%} </li> {%- endfor -%} </ul> </div> {%- endif -%} </li> {%- endfor -%} </ul>

Answer 1

Here is a way to check if a link object is a collection and if it contains or not available products (which I understand is your question) (not tested):

{% if link.type == 'collection_link' %}
    {% assign c_products = link.object.products | where: "available" %}
    {% if c_products.size > 0 %}
        Display the link
    {% endif %}
{% endif %}

Explanations:

First, I check if the current link is a link to a collection by checking type value.

If it is, I define an array of available products contained by the collection (accessing it via link.object) whith a filter. The where filter is here to keep only available products in the array.

Then I check if the array size, then I know whether collection contains available products or not.

HTH

Useful documentation:

• Link object: https://shopify.dev/api/liquid/objects#link
• Where filter (arrays): https://shopify.github.io/liquid/filters/where/
• Size filter (arrays): https://shopify.github.io/liquid/filters/size/