Make mega menu show only collection that consist of products

Make mega menu show only collection that consist of products

In header-mega-menu.liquid and header-drawer.liquid, add the followings:


Idea

 {%- if childlink.object and childlink.object.products_count == 0 -%}

                      {%- continue -%}

                    {%- endif -%}

and 


Idea

 {%- if grandchildlink.object and grandchildlink.object.products_count == 0 -%}

                              {%- continue -%}

                            {%- endif -%}


 

It should looks as below;
Idea

 {%- for childlink in link.links -%}

                    {%- if childlink.object and childlink.object.products_count == 0 -%}

                      {%- continue -%}

                    {%- endif -%}

                    <li>

                      <a

                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"

                        href="{{ childlink.url }}"

                        class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"

                        {% if childlink.current %}

                          aria-current="page"

                        {% endif %}

                      >

                        {{ childlink.title | escape }}

                      </a>

                      {%- if childlink.links != blank -%}

                        <ul class="list-unstyled" role="list">

                          {%- for grandchildlink in childlink.links -%}

                            {%- if grandchildlink.object and grandchildlink.object.products_count == 0 -%}

                              {%- continue -%}

                            {%- endif -%}

                            <li>

                              <a

                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"

                                href="{{ grandchildlink.url }}"

                                class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"

                                {% if grandchildlink.current %}

                                  aria-current="page"

                                {% endif %}

                              >

                                {{ grandchildlink.title | escape }}

                              </a>

                            </li>

                          {%- endfor -%}

                        </ul>

                      {%- endif -%}



    • Related Articles

    • Make Mega Menu Second Child Horizontal

      In the header, add in custom css as below: @media screen and (min-width: 990px) { .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; } #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ...

    • Hide menu link in mega menu when product counts = 0

      In header-mega-menu.liquid, search {%- for childlink in link.links -%} Add the following below: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} Then, search {%- for grandchildlink in childlink.links ...

    • Hide products in all collection

      Add this code in main-collection-product-grid.liquid: {% for product in collection.products %} {% unless product.metafields.seo.hidden.value == 1 %} {% render 'product-card', product: product %} {% endunless %} {% endfor %}

    • Make mega menu list scrollable (overflow)

      At the header section, add the following css .mega-menu { max-height: 70vh; overflow-y: auto; }

    • Hide mega menu links that contain 0 product

      Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...