Adding a custom navigation menu to collection pages using metafields

Shopify Discussion
1

Hi everyone,

I came up with a solution for adding customer navigation menus to collections using metafields.

I wanted to be able to create a new navigation menu and apply it to individual collections without having to create new templates for each one and manually adding links which over time may need updating.

I eventually found the code on how to add a navigation menu to a page.

{% for link in linklists.highlight.links -%} (highlight in this case being the menu handle)
{{ link.title | link_to: link.url }}
{%- endfor %}

I then created a metafield for collections so now I can add the name of any navigation menu (the handle, if named Sidebar menu” would have the handle sidebar-menu) to a collection.

I then replaced the handle (in my case highlight) with the metafield inside static collection section so it now reads

{% for link in linklists[collection.metafields.custom.collection_menu.value].links -%}
{{ link.title | link_to: link.url }}
{%- endfor %}

Took me ages to figure out I had to place the metafield within . I’m sure someone can explain why but not me.

Of course it need styling so it looks good but the menu items load as links so all good and hopefully will improve linking between collections or info pages relevant.

If anyone has a better way of producing a menu bar inside a collection please share as interested in making the site as automated as possible with any future shopify updates.

1 Like
2

Hi,
Instead of metafields, you can just make use of collection handle
and use code like this

{% if template contains "collection" and linklists[collection.handle].links.size > 0 %}
{% for link in linklists[collection.handle].links -%}
{{ link.title | link_to: link.url }}
{%- endfor %}
{% else %}

{% for link in linklists.highlight.links -%} 
{{ link.title | link_to: link.url }}
{%- endfor %}

{% endif %}

and you have to create a navigation with collection handle for those you want separate navigation.
I hope, it helps!
Thanks!

1 Like
3

Thanks, but exactly where to place your code?