{"id":5821,"date":"2025-01-15T05:38:43","date_gmt":"2025-01-15T05:38:43","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=5821"},"modified":"2025-10-03T10:53:14","modified_gmt":"2025-10-03T05:23:14","slug":"add-a-mega-menu-to-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-a-mega-menu-to-shopify\/","title":{"rendered":"How to Add a Mega Menu to Shopify? Without an App"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A mega menu simplifies navigation for your shoppers, making it easy to navigate to their preferred page from the header.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a mega menu in Shopify is easy.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, I will show you how to add a mega menu to Shopify using a simple code. You don&#8217;t need advanced technical skills for this; just follow the steps below.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add a Mega Menu to Shopify via Code&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Head to the Header Section&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Login to your Shopify dashboard and navigate to <strong>Online Store &gt; Themes &gt; Customize.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/01\/Head-to-the-Header-Section-.png\" alt=\"Head to the Header Section\" class=\"wp-image-151964\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add Shopify Mega Menu Code&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then, from the header, hide the existing header section (to remove the navigation bar).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And <strong>click Add section &gt; Custom Liquid<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/01\/Add-Shopify-Mega-Menu-Code.png\" alt=\"Add Shopify Mega Menu Code\" class=\"wp-image-151963\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, add this Shopify mega menu liquid code to create your mega menu.&nbsp;<\/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=\"\">&lt;!-- Mega Menu -->\n&lt;style>\n  \/* Mega Menu Styles *\/\n  .mega-menu {\n    display: flex;\n    background: #fff;\n    padding: 10px 20px;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .menu {\n    list-style: none;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  .menu-item {\n    position: relative;\n    margin: 0 15px;\n  }\n\n  .menu-item > a {\n    text-decoration: none;\n    font-weight: bold;\n    color: #333;\n    padding: 10px 15px;\n    display: inline-block;\n  }\n\n  .menu-item:hover > a {\n    color: #007bff;\n  }\n\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    background: #fff;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    padding: 20px;\n    z-index: 1000;\n    width: 200px;\n  }\n\n  .menu-item:hover .dropdown {\n    display: block;\n  }\n\n  .dropdown-menu {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .dropdown-item {\n    margin-bottom: 10px;\n  }\n\n  .dropdown-item > a {\n    text-decoration: none;\n    color: #333;\n    font-weight: normal;\n  }\n\n  .dropdown-item > a:hover {\n    color: #007bff;\n  }\n\n  .sub-dropdown-menu {\n    list-style: none;\n    padding: 10px;\n    margin-top: 10px;\n    background: #f9f9f9;\n  }\n\n  .sub-dropdown-menu li {\n    margin-bottom: 5px;\n  }\n\n  .sub-dropdown-menu a {\n    text-decoration: none;\n    color: #555;\n  }\n\n  .sub-dropdown-menu a:hover {\n    color: #007bff;\n  }\n\n  @media (max-width: 768px) {\n    .mega-menu {\n      flex-direction: column;\n    }\n\n    .menu {\n      flex-direction: column;\n    }\n\n    .dropdown {\n      position: static;\n      display: none;\n    }\n\n    .menu-item:hover .dropdown {\n      display: block;\n    }\n  }\n&lt;\/style>\n\n&lt;nav class=\"mega-menu\">\n  &lt;ul class=\"menu\">\n    {% for link in linklists.main-menu.links %}\n      &lt;li class=\"menu-item\">\n        &lt;a href=\"{{ link.url }}\">{{ link.title }}&lt;\/a>\n        {% if link.links.size > 0 %}\n          &lt;div class=\"dropdown\">\n            &lt;ul class=\"dropdown-menu\">\n              {% for sublink in link.links %}\n                &lt;li class=\"dropdown-item\">\n                  &lt;a href=\"{{ sublink.url }}\">{{ sublink.title }}&lt;\/a>\n                  {% if sublink.links.size > 0 %}\n                    &lt;ul class=\"sub-dropdown-menu\">\n                      {% for sub_sublink in sublink.links %}\n                        &lt;li>&lt;a href=\"{{ sub_sublink.url }}\">{{ sub_sublink.title }}&lt;\/a>&lt;\/li>\n                      {% endfor %}\n                    &lt;\/ul>\n                  {% endif %}\n                &lt;\/li>\n              {% endfor %}\n            &lt;\/ul>\n          &lt;\/div>\n        {% endif %}\n      &lt;\/li>\n    {% endfor %}\n  &lt;\/ul>\n&lt;\/nav>\n\n&lt;script>\n  \/\/ JavaScript for hover functionality (optional for enhanced behavior)\n  document.querySelectorAll('.menu-item').forEach(item => {\n    item.addEventListener('mouseover', () => {\n      const dropdown = item.querySelector('.dropdown');\n      if (dropdown) dropdown.style.display = 'block';\n    });\n\n    item.addEventListener('mouseout', () => {\n      const dropdown = item.querySelector('.dropdown');\n      if (dropdown) dropdown.style.display = 'none';\n    });\n  });\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can modify the style and mega menu elements as per your requirements.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Save &amp; Preview the Changes&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Save<\/strong> and finish this process.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preview the store to see if the mega menu looks as expected. Your mega menu should look like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/01\/Save-Preview-the-Changes.png\" alt=\"Save Preview the Changes\" class=\"wp-image-151965\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">And it&#8217;s done.&nbsp; \ud83c\udf89<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With these 3 simple steps, you have added a mega menu to Shopify. Try it yourself, and eliminate deep scrolling for your shoppers.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the mega menu is not showing as expected:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Double-check the code (if you have not missed any part)<\/li>\n\n\n\n<li>Check if it is pasted in the correct place\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Need Shopify Support?&nbsp;&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mega menus are an easy way for shoppers to head to their interesting sections in your store. Like if shoppers would like to understand your <a href=\"https:\/\/meetanshi.com\/blog\/create-a-shopify-timeline\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify store timeline<\/a>, they can easily navigate to the about us page from the header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In case you aren&#8217;t sure to do this task; our Shopify experts are here to take over and create the needed mega menus for your Shopify without any error or damaging any core functionalities.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Support and Maintenance Services<\/span>\r\n<p>Get support from our experts for all your Shopify needs.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/shopify-support-and-maintenance-services.html\" target=\"_blank\" class=\"btn-primary\">Contact Us<\/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-support-and-maintenance-services.png\" alt=\"Shopify Support and Maintenance Services\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A mega menu simplifies navigation for your shoppers, making it easy to navigate to their preferred page from the header.&nbsp; Adding a mega menu in&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-5821","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5821","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=5821"}],"version-history":[{"count":11,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5821\/revisions"}],"predecessor-version":[{"id":23034,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5821\/revisions\/23034"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=5821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=5821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=5821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}