Shopify Developer Guide – How to output a menu in a Shopify theme
All Shopify developers will need to output a menu on a store at some point. There are a number of places we typically output a Shopify menu on a theme, for example: main menu, footer links and collection sidebar.
Here I’m going to show you how to output a menu in a Shopify theme so that you can display it on the store front. Like all custom theme development – you’ll need to be comfortable editing liquid files within your Shopify store in order to do this. If you aren’t then you should hire a Shopify expert developer.
The first thing you should do is create the menu you wish to output in your Shopify store. For information on how to do this please refer to Shopify’s documentation.
Here our menu has a handle of “main-menu” which we will use in the code below to output the menu. Your menu can be called whatever you want – just copy the handle and replace the “main-menu” below.
{% for link in linklists.main-menu.links %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
This would output the menu on the store front in raw format with no markup. Just add some basic HTML (e.g. ul and li) and CSS to style it and you’re good to go.
Contact us to hire a Shopify expert or Shopify developer.
