Hello, I am a new Shopify user. I want to hide menu items from showing in the navigation if there are no products in the corresponding collections. I am using Horizon theme. How do I do that? Thank you.
-
Go to Online Store → Themes → Edit code
-
Open your menu file (usually one of):
-
snippets/header-menu.liquid -
snippets/navigation.liquid -
snippets/mobile-menu.liquid
-
-
Find the menu loop:
{% for link in linklist.links %}
- Add this line directly under it:
{% if link.type == 'collection_link' and link.object.all_products_count == 0 %}{% continue %}{% en
Hello Emmy61, thank you for your prompt reply!
I have looked for those files, and only one of them exists in Horizon theme: header-menu.liquid.
However, I was not able to find the menu loop that you mentioned within that file. BTW, I installed MegaMenu app, if that helps.
Alright, is there anything else you need help with?
Correction: I installed MegaMenu app but I have not activated it so it is still using the original Shopify menu for Horizon theme. I still need help hiding menu items for collections that have zero products.
Then for which situations, be specific dont make others guess.
No point in working this out for horizon if your then gonna discard that and just gonna use an app.
Provide a publicly accessible urls for OTHERs to see what you are working with in it’s final state that wont change.
Or your just asking others to help build on quicksand.
And that’s even before considering that some apps will force display navigation/elements without a way to hide them.
you can hide menu items automatically, but Horizon doesn’t have this built in, you need a small code tweak. The idea is to check if the collection has products, and if it’s empty, hide that menu link.
In your theme code, find where your navigation links are rendered (usually header.liquid or a navigation snippet), and wrap the link with something like:
{% if link.type == 'collection_link' and link.object.all_products_count > 0 %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
This makes the menu item show only if the collection has products. If the collection is empty, the link simply won’t appear in the menu.
Hello. I tried using your method in my header-menu.liquid and it hid most of my main menu. I am not sure why. Please look at the screenshots I took below:
Before I added your code:
After I added your code:
Here is the original liquid code for the menu:
{% liquid
assign block_settings = block.settings
assign menu_content_type = block_settings.menu_style | default: ‘text’
assign image_border_radius = block_settings.image_border_radius
assign color_scheme_classes = ‘’
assign color_scheme_setting_id = ‘color_scheme_’ | append: section.settings.menu_row
assign current_color_scheme = block_settings.color_scheme
assign parent_color_scheme = section.settings[color_scheme_setting_id]
if parent_color_scheme.id != current_color_scheme.id
assign color_scheme_classes = ' color-' | append: current_color_scheme
endif
# Check if header and menu colors match. This is used to apply different padding styles in css
if parent_color_scheme.settings.background.rgb == current_color_scheme.settings.background.rgb
assign color_scheme_classes = color_scheme_classes | append: ' color-scheme-matches-parent'
endif
if block_settings.menu_style == ‘featured_collections’
assign ratio = block_settings.featured_collections_aspect_ratio
elsif block_settings.menu_style == ‘featured_products’
assign ratio = block_settings.featured_products_aspect_ratio
endif
%}
{% capture children %}
{% for link in block_settings.menu.links %}
<li
role="presentation"
class="menu-list__list-item"
on:focus="/activate"
on:blur="/deactivate"
on:pointerenter="/activate"
on:pointerleave="/deactivate"
>
<a
href="{{ link.url }}"
data-skip-node-update="true"
class="menu-list__link{% if link.active %} menu-list__link--active{% endif %}"
{%- if link.links != blank -%}
aria-controls="submenu-{{ forloop.index }}"
aria-haspopup="true"
aria-expanded="false"
{%- endif -%}
ref="menuitem"
>
<span class="menu-list__link-title">{{- link.title -}}</span>
</a>
{%- if link.links != blank -%}
<div class="menu-list__submenu{{ color_scheme_classes }}" ref="submenu\[\]">
<div
id="submenu-{{ forloop.index }}"
class="menu-list__submenu-inner"
style="{% render 'submenu-font-styles', settings: block_settings %}"
>
{% assign list_id = 'MegaMenuList-' | append: forloop.index %}
{% render 'mega-menu',
section: section,
parent_link: link,
id: list_id,
menu_content_type: menu_content_type,
content_aspect_ratio: ratio,
image_border_radius: image_border_radius
%}
</div>
</div>
{%- endif -%}
</li>
{% endfor %}
<liclass="menu-list__list-item"
role="presentation"
slot="more"
on:focus="/activate"
on:blur="/deactivate"
on:pointerenter="/activate"
on:pointerleave="/deactivate"
<button role="menuitem" class="button menu-list__link button-unstyled">
<span class="menu-list__link-title">{{ 'actions.more' | t }}</span>
</button>
{% endcapture %}
<divclass="menu-list"
style="{% render 'menu-font-styles', settings: block_settings %}"
{% assign class = 'overflow-menu' | append: color_scheme_classes %}
{% render 'overflow-list', class: class, ref: 'overflowMenu', children: children, minimum-items: 2, defer: true %}