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

    • Setting up collections or grouping your products

      You can group your products into collections to make it easier for customers to find them by category. You can create two types of collections, an automated or manual collection. After you create a collection, it can be displayed on your online store ...

    • 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 %}

    • Selling digital products

      Along with physical goods, you can also sell digital goods on your Shopify store. Digital goods are often available to the customer immediately after they make their purchase. Some common digital products are online services and downloadable files, ...