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 | modulo: links_before_wrap %}

            <li

              {% if break_after_modulo == 0 and should_break_columns %}

                style="break-after: column;"

              {% endif %}

            >

              <a

                href="{{ childLink.url }}"

                class="mega-menu__link"

              >

                <span class="mega-menu__link-title">{{- childLink.title -}}</span>

              </a>

            </li>

      {% endif %}{% endif %}

          {% endfor %}

• Related Articles

• 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 ...

• Make mega menu list scrollable (overflow)

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

• Hide variants that is out of stock

  Add the following in variant-main-picker.liquid {%- for product_option_value in product_option.values -%} {% # hide variants = 0 # %} {% if product_option_value.available == false %} {% continue %} {% endif %} {% # End hide variants = 0 # %} {% if ...

• Make mega menu show only collection that consist of products

  In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...

• 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) ...