Debut Theme - Hide Empty Collections from Main Menu

Solved
Highlighted
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
322 52 59

@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 drop a direct 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