Hide collection with 0 products in mega menu list

Hide collection with 0 products in mega menu list

In mega-menu-list.liquid, add the followings:

{% for childLink in link.links %}
Notes
{% if childLink.object.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 wrap-text">{{- childLink.title -}}</span>
</a>
</li>

Notes{% endif %}

{% endfor %}


In header-drawer.liquid, line 401:

{%- for grandchildlink in childlink.links -%}
Notes
{% if grandchildlink.object.products_count > 0 %}

<li
class="menu-drawer__list-item"
style="--menu-drawer-animation-index: {{ forloop.index }};"
>
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="menu-drawer__menu-item menu-drawer__menu-item--child focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{% if render_link_image %}
{% render 'link-featured-image',
link: grandchildlink,
class: 'menu-drawer__link-image',
sizes: 'auto, 400px'
%}
{% endif %}
<span class="menu-drawer__menu-item-text wrap-text">
{{- grandchildlink.title | escape -}}
</span>
</a>
</li>
Notes{% endif %}

{%- endfor -%}
    • Related Articles

    • 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 | ...
    • 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 == ...
    • Hide collection card with 0 product in collection list

      In collectionlist.liquid, add {% capture list_items %} {% for collection in section_collections limit: max_items %} {% if collection.products_count > 0 %} <div class="resource-list__item"> {% content_for 'block', type: '_collection-card', id: ...
    • 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; }