Creating a Custom Mega Menu in Shopify Without an App: A Step-by-Step Guide

Mega menus can be a great design component for an e-commerce site. They allow you to offer a large set of navigation links in one clean and organized panel. On Shopify stores, many store owners use third-party apps to add mega menus. However, you can create a stylish and functional mega menu yourself without needing to install any app, by customizing the theme’s code.

Learn – How to Set up Navigation Menu on Shopify?

Why Add a Mega Menu Without an App?

• No additional monthly costs: You won’t have an additional app monthly cost because you’ll build it with your theme.
• Lightweight and faster: Your Shopify store will not have additional apps which can save script space in your store and will not slow it down.
• Total control: You can customize the menu exactly how you want it to be.
• Easier maintenance: Having fewer dependencies can result in fewer compatibility issues.

How to Add a Basic Mega Menu in Shopify: Step-by-Step

For the purposes of this example, we will assume that you are on a Shopify theme built with a Liquid template and that you already have a navigation menu that you want to use for the mega menu.

Step 1: Create a Menu Structure

• In your Shopify Admin, go to Online Store > Navigation.
• Create or edit the menu you want to use as a mega menu.
• Add main menu items (e.g., “Men”, “Women”, “Accessories”) that you want to show on the top level of your new mega menu.
• For each of your main menu items, add the sub-menu items as nested items. These will appear in the columns within your mega menu.

Learn – How To Change The Display Order Of Menu Items In Shopify?

Step 2: Modify Your Theme’s Code

We’ll add code inside your theme’s header or navigation snippet files (usually header.liquid or navigation.liquid). If you are not comfortable editing theme code directly, duplicate your theme for safety.

{% raw %}
    {% for link in linklists.main-menu.links %}
        {{ link.title }}
        {% if link.links.size > 0 %}
              {% for sublink in link.links %}
                  {{ sublink.title }}
                  {% if sublink.links.size > 0 %}                    
                      {% for sublink2 in sublink.links %}                     
{{ sublink2.title }}
                      {% endfor %}
                  {% endif %}
              {% endfor %}
        {% endif %}
    {% endfor %}  
{% endraw %}

Step 3: Add CSS for Your Mega Menu

Add this CSS inside your theme’s stylesheet (often theme.css.liquid or directly in theme.scss.liquid) or inside a <style> tag to style and display the mega menu properly:

.site-nav ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu-item {
  position: relative;
  margin-right: 2rem;
}

.menu-item a {
  color: #222;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 8px;
  display: block;
}

.menu-item.has-submenu:hover > .mega-menu {
  display: block;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  padding: 1.5rem;
  width: 600px; /* Adjust width as needed */
  z-index: 1000;
}

.mega-menu-columns {
  display: flex;
  justify-content: space-between;
}

.mega-menu-column {
  flex-basis: 33%;
}

.mega-menu-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: block;
  color: #0070f3;
}

.mega-menu-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-column ul li a {
  font-weight: 400;
  color: #444;
  text-decoration: none;
  padding: 4px 0;
  display: block;
}

.mega-menu-column ul li a:hover {
  color: #0070f3;
}

Step 4: Preview and Test

• Save your code changes.
• Select any of the top level navigation items, which has submenus listed, within your Shopify store.
• The mega menu panel should now be available that will include columns with your sub navigation links.
• You can change your CSS or structure to whatever is appropriate, depending on your design choices.

Summary

By customizing your Shopify theme’s Liquid templates and CSS, you can add a viable mega menu to your shop and not have to depend on another app. Using a mega menu is lightweight form of navigation, is maintenance free, and gives you control over how you want your menus to look and the content they display.

Always remember to back up your theme before making any adjustments. With some code and design work, you can create an amazing shop navigation that improves usability and sales.