Debut Theme - Hide Empty Collections from Main Menu

Solved
New Member
2 0 1

I'm new to Shopify and still getting my bearings. Any assistance will be appreciated.

 

We are trying to hide Collections from the Main Menu that do not have products yet. Once products are added, we want to show the menu item. We are using the Debut theme. We believe that the site-nav.liquid code needs to be altered.

 

Here is my code. What needs to be changed?

 

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}

    {% comment %}
      Check if third-level nav exists on each parent link.
    {% endcomment %}
    {%- assign three_level_nav = false -%}
    {% if link.links != blank %}
      {% if link.levels == 2 %}
        {%- assign three_level_nav = true -%}
      {% endif %}
    {% endif %}

    {% if link.links != blank %}
      <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
          <span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
        </button>

        <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
          {% if three_level_nav %}
            <div class="site-nav__childlist">
              <ul class="site-nav__childlist-grid">
                {% if link.links != blank %}
                  {% for childlink in link.links %}
                    <li class="site-nav__childlist-item">
                      <a href="{{ childlink.url }}"
                        class="site-nav__link site-nav__child-link site-nav__child-link--parent"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>
                      </a>

                      {% if childlink.links != blank %}
                        <ul>
                        {% for grandchildlink in childlink.links %}
                          <li>
                            <a href="{{ grandchildlink.url }}"
                            class="site-nav__link site-nav__child-link"
                            {% if grandchildlink.current %} aria-current="page"{% endif %}
                          >
                              <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                        </ul>
                      {% endif %}

                    </li>
                  {% endfor %}
                {% endif %}
              </ul>
            </div>

          {% else %}
            <ul>
              {% for childlink in link.links %}
                <li>
                  <a href="{{ childlink.url }}"
                  class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
                  {% if childlink.current %} aria-current="page"{% endif %}
                >
                    <span class="site-nav__label">{{ childlink.title | escape }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </li>
    {% else %}
      <li {% if link.active %} class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}"
          class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
          {% if link.current %} aria-current="page"{% endif %}
        >
          <span class="site-nav__label">{{ link.title | escape }}</span>
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
0 Likes

Success.

Shopify Partner
455 80 98

@becauze 

 

The solution is the following way, we should check for link type and then check for link object for product size.

{% unless link.type == 'collection_link' and link.object.products.size <  1 %}

we are excluding the empty collections.
{% endunless %}

And here is the updated version of your site-nav.liquid file, please try it.

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}

    {% comment %}
      Check if third-level nav exists on each parent link.
    {% endcomment %}
    {%- assign three_level_nav = false -%}
    {% if link.links != blank %}
      {% if link.levels == 2 %}
        {%- assign three_level_nav = true -%}
      {% endif %}
    {% endif %}

    {% if link.links != blank %}
    {% unless link.type == 'collection_link' and link.object.products.size <  1 %}

      <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
          <span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
        </button>

        <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
          {% if three_level_nav %}
            <div class="site-nav__childlist">
              <ul class="site-nav__childlist-grid">
                {% if link.links != blank %}
                  {% for childlink in link.links %}
                  {% unless childlink.type == 'collection_link' and childlink.object.products.size <  1 %}
                  	
                  
                    <li class="site-nav__childlist-item">
                      <a href="{{ childlink.url }}"
                        class="site-nav__link site-nav__child-link site-nav__child-link--parent"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>
                      </a>

                      {% if childlink.links != blank %}
                        <ul>
                        {% for grandchildlink in childlink.links %}
                        {% unless grandchildlink.type == 'collection_link' and grandchildlink.object.products.size <  1 %}

                          <li>
                            <a href="{{ grandchildlink.url }}"
                            class="site-nav__link site-nav__child-link"
                            {% if grandchildlink.current %} aria-current="page"{% endif %}
                          >
                              <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                          {% endunless %}
                        {% endfor %}
                        </ul>
                      {% endif %}

                    </li>
                    {% endunless %}
                  {% endfor %}
                {% endif %}
              </ul>
            </div>

          {% else %}
            <ul>
              {% for childlink in link.links %}
              	{% unless childlink.type == 'collection_link' and childlink.object.products.size <  1 %}

                <li>
                  <a href="{{ childlink.url }}"
                  class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
                  {% if childlink.current %} aria-current="page"{% endif %}
                >
                    <span class="site-nav__label">{{ childlink.title | escape }}</span>
                  </a>
                </li>
                {% endunless %}
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </li>
      {% endunless %}
    {% else %}
    {% unless link.type == 'collection_link' and link.object.products.size <  1 %}

      <li {% if link.active %} class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}"
          class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
          {% if link.current %} aria-current="page"{% endif %}
        >
          <span class="site-nav__label">{{ link.title | escape }}</span>
        </a>
      </li>
      	{% endunless %}
    {% endif %}
  {% endfor %}
</ul>
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
2 0 1

That helped so much! Thank you!

 

Just to add some additional information, the same technique was applied to the header.liquid file to apply the same logic to the mobile version.

1 Like
Shopify Partner
20 0 2

Hi,

 

Can I ask what you did to the Header to hide the collection links in the mobile menu?

 

Thanks

0 Likes
Highlighted
Excursionist
13 2 2

I want to make sure I understand what the original question was.  I may need this functionality as well. 

 

Sometimes our stock falls to 0 and will never be replaced exactly, because of the one-of-a-kind nature of our products.  Sometimes that empties the collection, and I want the collection to be hidden at that point.  I can do it manually but prefer the machine to do it for me.   When another item gets loaded in that collection, the collection should unhide.  Is that the original question?

 

I'm not even going to pretend I understand the first thing about this code. But I copied sarhov's answer and pasted it into my site-nav.liquid file and saved it.  It seemed to have no effect, the empty collection was still visible.  Did I misunderstand what the solution meant? 

 

And, do you have any suggestions about how to troubleshoot why it is not working?

 

Thanks in advance

Ed K

 

0 Likes