How to hide shopify menu items if no products exist in the collection

I recently worked on a reasonably large shopify project where the potential categories (collections) counted approximately 190. We built the menu based on those collections, but the problem was that until we had products imported for those collections we didnt want to show the menu item.

Using the supply menu I edited the site-nav.liquid file in the snippets directory and added a line under each of the for loops that build the menu items and added a test to see if a. the time was based on a collection and if the number of products in that collection where over 0. This was done using an <%unlessĀ  %> tag – look at the bolded lines below.

<ul class=”site-nav” id=”AccessibleNav”>
{% unless linklists[section.settings.menu].links.first.url == ‘/’ %}
<li class=”large–hide”>
<a href=”/”>{{ ‘general.breadcrumbs.home’ | t }}</a>
</li>
{% endunless %}
{% for link in linklists[section.settings.menu].links %}
{% unless link.type == ‘collection_link’ and link.object.products_count == 0 %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li class=”site-nav–has-dropdown {% if link.active %}site-nav–active{% endif %}”
aria-haspopup=”true”>
<a href=”{{ link.url }}” class=”site-nav–link” data-meganav-type=”parent” aria-controls=”MenuParent-{{ parent_index}}”
aria-expanded=”false”
{% unless template.name == ‘index’ %}{% if link.active %}aria-current=”page”{% endif %}{% endunless%}>
{{ link.title | escape }} ({{ link.object.products_count }})
<span class=”icon icon-arrow-down” aria-hidden=”true”></span>
</a>
<ul id=”MenuParent-{{ parent_index }}”
class=”site-nav–dropdown {% if link.levels == 2 %}site-nav–has-grandchildren{% endif %}”
data-meganav-dropdown>
{% for childlink in link.links %}

{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
{% unless childlink.type == ‘collection_link’ and childlink.object.products_count == 0 %}
<li class=”site-nav–has-dropdown site-nav–has-dropdown-grandchild {% if childlink.active %}site-nav–active{%endif %}”
aria-haspopup=”true”>
<a href=”{{ childlink.url }}”
class=”site-nav–link”
aria-controls=”MenuChildren-{{ parent_index }}-{{ child_index }}”
data-meganav-type=”parent”
{% unless template.name == ‘index’ %}{% if childlink.active %}aria-current=”page”{% endif %}{% endunless%}
tabindex=”-1″>
({{ childlink.object.products_count }})
{{ childlink.title | escape }}
<span class=”icon icon-arrow-down” aria-hidden=”true”></span>
</a>
<ul id=”MenuChildren-{{ parent_index }}-{{ child_index }}”
class=”site-nav–dropdown-grandchild”
data-meganav-dropdown>
{% for grandchildlink in childlink.links %}
<li{% if grandchildlink.active %} class=”site-nav–active”{% endif %}>
<a href=”{{ grandchildlink.url }}”
class=”site-nav–link”
data-meganav-type=”child”
{% unless template.name == ‘index’ %}{% if grandchildlink.active %}aria-current=”page”{% endif %}
{% endunlessĀ  %}
tabindex=”-1″>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% endunless %}

{% else %}
{% unless childlink.type == ‘collection_link’ and childlink.object.products_count == 0 %}
<li{% if childlink.active %} class=”site-nav–active”{% endif %}>
<a href=”{{ childlink.url }}”
class=”site-nav–link”
data-meganav-type=”child”
{% if childlink.active %}aria-current=”page”{% endif %}
tabindex=”-1″>
{{ childlink.title | escape }} ({{ childlink.object.products_count }})
</a>
</li>
{% endunless %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li{% if link.active %} class=”site-nav–active”{% endif %}>
<a href=”{{ link.url }}”
class=”site-nav–link”
data-meganav-type=”child”
{% unless template.name == ‘index’ %}{% if link.active %}aria-current=”page”{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endunless %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class=”customer-navlink large–hide”><a href=”/account”>{{ ‘layout.customer.view_account’ | t }}</a></li>
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.log_out’ | t | customer_logout_link }}</li>
{% else %}
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.sign_in’ | t | customer_login_link }}</li>
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.create_account’ | t | customer_register_link }}</li>
{% endif %}
{% endif %}
</ul>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>