How To Hide Empty Collections In Nested Navigation (Avenue Theme 2.0)

Hi, We have several collections as sub menus in the nested navigation, which may or may not have products in them or change over time. We want the navigation not to show those sub menu’s which have 0 products (also an option to hide if product is available, but inventory is 0)

Although a similar issue has been addressed here (https://community.shopify.com/c/shopify-design/how-to-hide-empty-collections-in-nested-navigation-minimal-theme/m-p/559130#M141418). It is for another theme and Avenue 2.0 does not have the site-nav.liquid file mentioned, and seems to need a custom solution.

Hi @amitv ,

Can you send me the code of header.liquid file. I will check and guide you in detail.

Hi, thank you for your consideration. Please find the header.liquid file below

{%- liquid
assign published_locales = false
assign enabled_currencies = false
if shop.published_locales.size > 1 and section.settings.enable_locales
for locale in shop.published_locales
if locale.name == request.locale.name
capture locale_name
echo locale.iso_code | upcase
endcapture
endif
endfor
assign published_locales = true
endif
if shop.enabled_currencies.size > 1 and section.settings.enable_multiple_currencies
assign enabled_currencies = true
endif
-%}

{% unless request.page_type == 'gift_card' %} {% if section.blocks != blank %}
    {% for block in section.blocks limit: 1 %}
  • {% if block.settings.info_bullets != blank %}{{ block.settings.info_bullets }}{% else %}

    {{ 'homepage.onboarding.promo_no_title' | t }}

    {% endif %}
  • {% endfor %} {% if section.blocks.size > 1 %}
  • {% for block in section.blocks offset: 1 %} {% if block.settings.info_bullets != blank %}{{ block.settings.info_bullets }}{% else %}

    {{ 'homepage.onboarding.promo_no_title' | t }}

    {% endif %}
    {% endfor %}
  • {% endif %}
{% endif %}
{% else %}
  •  
{% endunless %}

    {% if shop.customer_accounts_enabled and customer %}

    {{ ‘layout.customer.greeting’ | t }} {{ customer.first_name }}{{ ‘layout.customer.account’ | t }}{{ ‘layout.customer.log_out’ | t }}

    {% endif %}

    {% if enabled_currencies or published_locales and locale_name != blank%}
    {% form ‘localization’, id: “localization_form-header”, class: “currency-selector” %}

    {% if published_locales and locale_name != blank %}

    {% endif %}

    {% if enabled_currencies %}

    {% endif %}

    {% endform %}
    {% endif %}

    {% for link in linklists[section.settings.menu].links %}

    {%- liquid
    capture cycleIndex
    echo link.handle | append: ‘-’ | append: forloop.index
    endcapture
    assign sub_links = false
    assign sub_sub_links = false
    for sub_link in link.links
    if link.links.size > 2
    assign sub_links = true
    endif
    for sub_sub_link in sub_link.links
    assign sub_sub_links = true
    endfor
    endfor
    -%}

  • {{ link.title }}

    {%- liquid
    assign has_image = false
    assign link_collection = false
    if link.type == ‘collection_link’ or link.type == ‘catalog_link’
    assign link_collection = true
    assign link_handle = link.url | split: ‘/’ | last | url_decode
    assign collection = collections[link_handle]
    capture imgID
    echo collection.handle | append: ‘-’ | append: forloop.index
    endcapture
    assign id = imgID
    if section.settings.use_image
    if section.settings.use_product_image or collection.image == blank
    assign img_src=collection.products.first.featured_media.preview_image
    else
    assign img_src=collection.image
    endif
    if img_src
    assign has_image = true
    endif
    endif
    endif
    -%}

    {% if link.links != blank %}

    {%- liquid
    if sub_links and sub_sub_links
    assign use_image = true
    else
    assign use_image = false
    endif
    -%}

      {% if has_image and use_image %}
    • {%- liquid capture alt if img_src.alt != blank echo img_src.alt else echo link.title endif endcapture render 'image.load', img_src: img_src, size: 480, id: id, alt: alt -%}
    • {% endif %} {% for sub_link in link.links %}
    • {{ sub_link.title }} {% if sub_link.links != blank %} {% endif %}
    • {% endfor %}
    {% endif %}
  • {% endfor %}

{% if request.page_type == ‘index’ or request.page_type == ‘page’ %}

{% endif %}

{% if request.page_type == ‘index’ %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}

{% endif %}

.logo { width:{{ section.settings.logo_max_width }}px; } .header-navigation nav .responsiveMenu > li > a { font-size: {{ section.settings.menu_size }}px; } {% if section.settings.use_sticky %} #shopify-section-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 9999; } {% endif %} .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:hover > a, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:hover summary, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:hover > span.icon, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:hover.account:before, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li.hover > a, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li.hover summary, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li.hover > span.icon, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li.hover.account:before, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus > a, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus summary, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus > span.icon, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus.account:before, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus-within > a, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus-within summary, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus-within > span.icon, .header-toolbar .header-customerbar.customer_color_scheme .customer-links li:focus-within.account:before { {% if settings.customer_font_color == '#ffffff' %} background: {{ settings.customer_font_color }}; color: {{ settings.customer_background_color }}; {% else %} background: var(--white); border-color: {{ settings.customer_font_color }}; color: {{ settings.customer_hover_font_color }}; {% endif %} }

{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “header”,
“content”: “Customer Bar”
},
{
“type”: “select”,
“id”: “cart_icon”,
“label”: “Cart icon”,
“default”: “bag”,
“options”: [
{
“value”: “bag”,
“label”: “Bag”
},
{
“value”: “cart”,
“label”: “Cart”
}
]
},
{
“type”: “checkbox”,
“id”: “dropdown_enable”,
“label”: “Enable cart dropdown”,
“default”: true,
“info”: “Cart dropdown will automatically open when adding products to cart”
},
{
“type”: “checkbox”,
“id”: “include_checkout_button”,
“label”: “Show cart dropdown checkout button”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_locales”,
“label”: “Show language selector”,
“default”: true,
“info”: “To add a language, go to your language settings.
},
{
“type”: “checkbox”,
“id”: “enable_multiple_currencies”,
“label”: “Show currency selector”,
“default”: true,
“info”: “To add a currency, go to your currency settings.
},
{
“type”: “checkbox”,
“id”: “include_customerbar_border”,
“label”: “Show border”,
“default”: false
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 40,
“max”: 250,
“step”: 10,
“unit”: “px”,
“label”: “Max logo width”,
“default”: 130
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“label”: “Menu”,
“id”: “menu”,
“default”: “main-menu”
},
{
“type”: “range”,
“id”: “menu_size”,
“min”: 14,
“max”: 22,
“step”: 2,
“unit”: “px”,
“label”: “Link size”,
“default”: 14
},
{
“type”: “select”,
“id”: “menu_alignment”,
“label”: “Position”,
“default”: “right”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
]
},
{
“type”: “checkbox”,
“id”: “use_sticky”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “use_image”,
“label”: “Show image”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “use_product_image”,
“label”: “Show first product image”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “include_bar_border”,
“label”: “Show border”,
“default”: true
}
],
“blocks”: [
{
“type”: “info_bullets”,
“name”: “Promotion”,
“limit”: 2,
“settings”: [
{
“type”: “richtext”,
“label”: “Text”,
“id”: “info_bullets”,
“default”: “

Add a promotion or highlight specials


}
]
}
],
“default”: {
“blocks”: [
{
“type”: “info_bullets”
},
{
“type”: “info_bullets”
}
]
}
}
{% endschema %}

Hi @amitv ,

First, follow the instructions in step 1 and step 2, then instead of going to site-nav.liquid file in step 3, go to header.liquid file.

Please change code header.liquid file:

{%- liquid
assign published_locales = false
assign enabled_currencies = false
if shop.published_locales.size > 1 and section.settings.enable_locales
for locale in shop.published_locales
if locale.name == request.locale.name
capture locale_name
echo locale.iso_code | upcase
endcapture
endif
endfor
assign published_locales = true
endif
if shop.enabled_currencies.size > 1 and section.settings.enable_multiple_currencies
assign enabled_currencies = true
endif
-%}

{% if request.page_type == 'index' or request.page_type == 'page' %}

{% endif %}

{% if request.page_type == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}

{% endif %}

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Customer Bar"
},
{
"type": "select",
"id": "cart_icon",
"label": "Cart icon",
"default": "bag",
"options": [
{
"value": "bag",
"label": "Bag"
},
{
"value": "cart",
"label": "Cart"
}
]
},
{
"type": "checkbox",
"id": "dropdown_enable",
"label": "Enable cart dropdown",
"default": true,
"info": "Cart dropdown will automatically open when adding products to cart"
},
{
"type": "checkbox",
"id": "include_checkout_button",
"label": "Show cart dropdown checkout button",
"default": true
},
{
"type": "checkbox",
"id": "enable_locales",
"label": "Show language selector",
"default": true,
"info": "To add a language, go to your [language settings.](\/admin\/settings\/languages)"
},
{
"type": "checkbox",
"id": "enable_multiple_currencies",
"label": "Show currency selector",
"default": true,
"info": "To add a currency, go to your [currency settings.](\/admin\/settings\/payments)"
},
{
"type": "checkbox",
"id": "include_customerbar_border",
"label": "Show border",
"default": false
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image"
},
{
"type": "range",
"id": "logo_max_width",
"min": 40,
"max": 250,
"step": 10,
"unit": "px",
"label": "Max logo width",
"default": 130
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"label": "Menu",
"id": "menu",
"default": "main-menu"
},
{
"type": "range",
"id": "menu_size",
"min": 14,
"max": 22,
"step": 2,
"unit": "px",
"label": "Link size",
"default": 14
},
{
"type": "select",
"id": "menu_alignment",
"label": "Position",
"default": "right",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "use_sticky",
"label": "Enable sticky header",
"default": true
},
{
"type": "checkbox",
"id": "use_image",
"label": "Show image",
"default": true
},
{
"type": "checkbox",
"id": "use_product_image",
"label": "Show first product image",
"default": true
},
{
"type": "checkbox",
"id": "include_bar_border",
"label": "Show border",
"default": true
}
],
"blocks": [
{
"type": "info_bullets",
"name": "Promotion",
"limit": 2,
"settings": [
{
"type": "richtext",
"label": "Text",
"id": "info_bullets",
"default": "

Add a promotion or highlight specials

"
}
]
}
],
"default": {
"blocks": [
{
"type": "info_bullets"
},
{
"type": "info_bullets"
}
]
}
}
{% endschema %}

Hope it helps!

Hi, Thank you for the same. However, unfortunately, this solution only worked partially

For example, we have a parent collection in the navigation for Flowers, if we put a sub collection of Red in it without any products, then that sub collection does not show and this solution seems to work.

However, if Under Flowers, we put a Sub collection called Fresh Cut Flowers and under that we have different colour sub menu’s, including Red (with no products), then the collection for Red does show.

Hence, it works for Parent Menu->Sub Menu, but not for Parent Menu->Sub Menu->Sub-Sub Menu

Hi @amitv ,

Please change code:

{%- liquid
assign published_locales = false
assign enabled_currencies = false
if shop.published_locales.size > 1 and section.settings.enable_locales
for locale in shop.published_locales
if locale.name == request.locale.name
capture locale_name
echo locale.iso_code | upcase
endcapture
endif
endfor
assign published_locales = true
endif
if shop.enabled_currencies.size > 1 and section.settings.enable_multiple_currencies
assign enabled_currencies = true
endif
-%}

{% if request.page_type == 'index' or request.page_type == 'page' %}

{% endif %}

{% if request.page_type == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}

{% endif %}

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Customer Bar"
},
{
"type": "select",
"id": "cart_icon",
"label": "Cart icon",
"default": "bag",
"options": [
{
"value": "bag",
"label": "Bag"
},
{
"value": "cart",
"label": "Cart"
}
]
},
{
"type": "checkbox",
"id": "dropdown_enable",
"label": "Enable cart dropdown",
"default": true,
"info": "Cart dropdown will automatically open when adding products to cart"
},
{
"type": "checkbox",
"id": "include_checkout_button",
"label": "Show cart dropdown checkout button",
"default": true
},
{
"type": "checkbox",
"id": "enable_locales",
"label": "Show language selector",
"default": true,
"info": "To add a language, go to your [language settings.](\/admin\/settings\/languages)"
},
{
"type": "checkbox",
"id": "enable_multiple_currencies",
"label": "Show currency selector",
"default": true,
"info": "To add a currency, go to your [currency settings.](\/admin\/settings\/payments)"
},
{
"type": "checkbox",
"id": "include_customerbar_border",
"label": "Show border",
"default": false
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image"
},
{
"type": "range",
"id": "logo_max_width",
"min": 40,
"max": 250,
"step": 10,
"unit": "px",
"label": "Max logo width",
"default": 130
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"label": "Menu",
"id": "menu",
"default": "main-menu"
},
{
"type": "range",
"id": "menu_size",
"min": 14,
"max": 22,
"step": 2,
"unit": "px",
"label": "Link size",
"default": 14
},
{
"type": "select",
"id": "menu_alignment",
"label": "Position",
"default": "right",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "use_sticky",
"label": "Enable sticky header",
"default": true
},
{
"type": "checkbox",
"id": "use_image",
"label": "Show image",
"default": true
},
{
"type": "checkbox",
"id": "use_product_image",
"label": "Show first product image",
"default": true
},
{
"type": "checkbox",
"id": "include_bar_border",
"label": "Show border",
"default": true
}
],
"blocks": [
{
"type": "info_bullets",
"name": "Promotion",
"limit": 2,
"settings": [
{
"type": "richtext",
"label": "Text",
"id": "info_bullets",
"default": "

Add a promotion or highlight specials

"
}
]
}
],
"default": {
"blocks": [
{
"type": "info_bullets"
},
{
"type": "info_bullets"
}
]
}
}
{% endschema %}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

Hi, Thank you for the quick solution. It worked. Very much appreciate the assistance. Request also for the following -

  1. Could you direct us to the changes made in the liquid file for future reference? If there are future theme updates, it would help to know to incorporate the same at that time.

  2. Currently, this solution hides the sub collections and the sub-sub’s if all the products in that collection are listed as 0 inventory, as opposed to having 0 products in a collection. Is it possible to show those collections which have 1 or some products (regardless of their inventory level being 0 or 1, etc) ?

  3. There may be some products which may have status as ‘continue’ in order to continue selling regardless of inventory. How does it impact the navigation then?

  4. Another issue we faced is that in the Avenue 2.0 theme, there is a collection tile on top on the collections page, Hence, once we click on a parent menu which has 3 sub menu’s of which, lets say, 1 doesn’t show in the navigation due to 0 inventory, then on the collection page atleast, the tile shows up. How do hide that as well?

  5. Is it possible to make all these and/or other changes in separate smaller files in the theme, rather than the header.liquid file, or does that slow the site down?

Hi @amitv ,

First, please mark it as a solution for me.

Then, You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

https://community.shopify.com/c/shopify-design/supplementary-queries-for-how-to-hide-empty-collections-in/td-p/1486123

1 Like