{"id":13049,"date":"2025-05-06T11:15:39","date_gmt":"2025-05-06T05:45:39","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=13049"},"modified":"2025-06-16T12:53:50","modified_gmt":"2025-06-16T07:23:50","slug":"shopify-navigation-menu-code","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/shopify-navigation-menu-code\/","title":{"rendered":"How to Use Shopify Navigation Menu Code?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A navigation menu makes it easy for shoppers to access important store pages quickly.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With Shopify&#8217;s default menu options, such as the Main Menu and Footer Menu, your customization becomes limited.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, I will show you how to use Shopify navigation menu code to go beyond the default settings.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Navigation Menus in Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The navigation menu contains links to important pages of your store, which you want your shoppers to discover instantly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can add the navigation menu wherever needed, but they are placed in the store&#8217;s header and footer.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Within the Shopify admin dashboard, you can edit, delete, or make changes in the main menu (header) and the footer.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is placed at the bottom of your site with essential store details and other helpful links. Besides these, you can add different menu options like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Drop-down menus<\/li>\n\n\n\n<li>Vertical sidebar navigation menu<\/li>\n\n\n\n<li><a href=\"https:\/\/meetanshi.com\/blog\/add-a-mega-menu-to-shopify\/\" data-type=\"link\" data-id=\"https:\/\/meetanshi.com\/blog\/add-a-mega-menu-to-shopify\/\">Mega menu<\/a><\/li>\n\n\n\n<li>&amp; more<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">But you won&#8217;t find direct settings for these in your Shopify admin if the theme doesn&#8217;t support these menu types.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will need to add a liquid code to your theme.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Liquid Code Snippet to Display a Navigation Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Shopify, you can create menus (list of links) to add to the header or footer. Here is a liquid code to add menus with the key &#8220;main menu.&#8221;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% for link in linklists['main-menu'].links %}\n  &lt;li class=\"header__menu-item list-menu__item\">\n    &lt;a href=\"{{ link.url }}\" class=\"header__menu-item header__menu-item--top link\">\n      {{ link.title }}\n    &lt;\/a>\n    {% if link.links.size > 0 %}\n      &lt;div class=\"header__submenu dropdown\">\n        &lt;ul class=\"list-menu list-menu--inline\">\n          {% for child_link in link.links %}\n            &lt;li class=\"header__menu-item list-menu__item\">\n              &lt;a href=\"{{ child_link.url }}\" class=\"header__menu-item link\">\n                {{ child_link.title }}\n              &lt;\/a>\n            &lt;\/li>\n          {% endfor %}\n        &lt;\/ul>\n      &lt;\/div>\n    {% endif %}\n  &lt;\/li>\n{% endfor %}\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Shopify Navigation Menu Code in Header?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This code helps you to display a multi-level navigation menu. Like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1674\" height=\"742\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1.png\" alt=\"Shopify Multi Level Navigation Header Menu Code\" class=\"wp-image-13276\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1.png 1674w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-250x111.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-700x310.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-768x340.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-1536x681.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-403x179.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-964x427.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Shopify-Multi-Level-Navigation-Header-Menu-Code-1-120x53.png 120w\" sizes=\"auto, (max-width: 1674px) 100vw, 1674px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You will need to add this code in the header.liquid file.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Head to <strong>Online Store &gt; Themes &gt; Customize<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, add a custom liquid section to the header (where you want the menu) and use the code provided before.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1048\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header.png\" alt=\"Add a Custom Liquid Section to the Header\" class=\"wp-image-13274\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header.png 1999w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-250x131.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-700x367.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-768x403.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-1536x805.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-403x211.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-964x505.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-a-Custom-Liquid-Section-to-the-Header-120x63.png 120w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Do not forget to replace the menu name (i.e. main-menu) in the code as per your store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of Customizing Navigation Menu Code in Shopify<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><br><\/strong>Now, let us see some advanced ways to add customization to your navigation menu.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example 1: Hide a Certain Menu Item for Guest Customers<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can use this to loop in Shopify Liquid code to hide certain links in the navigation menu. For example, here\u2019s code syntax only displays the &#8220;Account&#8221; link for logged-in customers, hiding the menu item like &#8220;Account&#8221; for non-logged-in customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Code:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% for link in linklists['main-menu'].links %}\n  {% unless link.title == 'Account' and customer == nil %}\n    &lt;li class=\"header__menu-item list-menu__item\">\n      &lt;a href=\"{{ link.url }}\" class=\"header__menu-item link\">\n        {{ link.title }}\n      &lt;\/a>\n    &lt;\/li>\n  {% endunless %}\n{% endfor %}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Result:<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example 2: Display a Different Menu by Customer Tag<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you want to display certain elements in the navigation menu only to customers that are tagged \u201cVIP\u201d. For this, you can add conditions in the Shopify Liquid code for this. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% if customer.tags contains 'VIP' %}\n  {% assign menu = linklists['vip-menu'] %}\n{% else %}\n  {% assign menu = linklists['main-menu'] %}\n{% endif %}\n{% for link in menu.links %}\n  &lt;li class=\"header__menu-item list-menu__item\">\n    &lt;a href=\"{{ link.url }}\" class=\"header__menu-item link\">\n      {{ link.title }}\n    &lt;\/a>\n  &lt;\/li>\n{% endfor %}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example 3: Highlight Certain Items in Menu Using CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In case you want to highlight certain items in the Shopify Navigation Menu, you can apply CSS rules. For example, the following CSS code changes the color of the \u201csale\u201d collection:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.header__menu-item a[href=\"\/collections\/sale\"] {\n  color: #ff0000;\n  font-weight: bold;\n}\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices to Follow<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Keep these points in mind while adding or editing menu in Shopify:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add important, relevant links at the top<\/li>\n\n\n\n<li>View the navigation through a mobile device to check responsiveness<\/li>\n\n\n\n<li>Refresh the navigation during the sale season or during the addition of a new collection<\/li>\n\n\n\n<li>Use relevant anchor for the link<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Get Help with Shopify Theme Customization<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Customizing your Shopify theme makes your store more accessible without making more changes in the core file or building your store from scratch.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our Shopify experts can help you add elements like navigation menus, improve SEO, structure your store layout, and more without damaging your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Shopify Theme Customization Service<\/span>\r\n<p>Let our Shopify experts create a custom theme to boost and elevate your customer experience.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/shopify-theme-customization-service.html\" target=\"_blank\" class=\"btn-primary\">Learn More<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/shopify-theme-customization-service.png\" alt=\"Shopify Theme Customization Service\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A navigation menu makes it easy for shoppers to access important store pages quickly.&nbsp; With Shopify&#8217;s default menu options, such as the Main Menu and&#8230;<\/p>\n","protected":false},"author":5,"featured_media":13095,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-13049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/13049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=13049"}],"version-history":[{"count":7,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/13049\/revisions"}],"predecessor-version":[{"id":16863,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/13049\/revisions\/16863"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/13095"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=13049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=13049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=13049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}