Level Up Your Shopify Navigation: How to Add a Secondary Menu Bar

Hey there, fellow store owners! Your Shopify store’s navigation is the backbone of your customer experience, right? It’s how folks find what they’re looking for, discover new products, and ultimately, make a purchase. But sometimes, a single main menu just isn’t enough to neatly organize everything you want to offer or highlight.

That’s exactly what one of our community members, @hamzaabbas, ran into recently. They were looking to add “one more menu bar above the existing menu bar with different Pages and Categories Links” for their store, tridentproducts.co.uk. Here's a look at their current setup, where they wanted to add that extra menu:

It’s a super common request, and the community discussion that followed offered some really helpful insights. So, let’s unpack how you can add a secondary navigation menu to your Shopify store, drawing from the wisdom shared by our experts!

Why Consider a Second Menu Bar?

Before we dive into the 'how,' let's quickly touch on the 'why.' A second menu bar, often placed at the very top of your site (sometimes called a "utility bar" or "top bar"), is fantastic for:

• Utility Links: Think "Contact Us," "FAQs," "Track Order," "Wholesale," or "About Us" – essential pages that don't quite fit the main product-focused navigation.
• Specific Campaigns: Highlight a seasonal sale, a new collection, or a special announcement without cluttering your main categories.
• Legal & Policy Pages: Links to your Privacy Policy, Shipping Info, or Terms of Service can live here, keeping them accessible but out of the primary spotlight.

The Community's Take: Two Paths to a Second Menu

Our community experts, like @devcoders, quickly confirmed that adding a second menu is “Yes, this is possible.” They outlined two main approaches:

1. Utilize a theme’s built-in announcement/top bar area.
2. Add a completely new custom navigation bar via code, typically in header.liquid.

@Trii chimed in with a fantastic practical first step that aligns perfectly with the first approach, suggesting to “Create the second menu first in Content > Menus in your Shopify admin, then open Online Store > Themes > Customize and check your Header section.” This is often the simplest route, so let’s start there.

Method 1: The "No-Code" (or Low-Code) Theme Feature Approach

This is always my go-to recommendation first, as it leverages your theme’s existing capabilities and requires minimal to no code. Many modern Shopify themes, like Dawn, come with built-in slots for secondary menus or expandable top bars.

Step-by-Step: Check Your Theme Customizer

1. Create Your New Menu:
   • From your Shopify admin, go to Online Store > Navigation.
   • Click the Add menu button.
   • Give it a clear title, like "Top Utility Menu" or "Secondary Header." Make a note of its "handle" (usually a lowercase, hyphenated version of the title, e.g., top-utility-menu).
   • Add all the links you want in this new menu (e.g., About Us, Contact, FAQs, Track Order).
   • Save menu.
2. Check Your Theme Customizer:
   • Go to Online Store > Themes.
   • Next to your live theme, click Customize.
   • In the theme editor, look for your Header section in the left sidebar. Click on it.
   • Carefully scroll through the Header settings. Many themes will have options here for a "Secondary Menu," "Top Bar Menu," or a "Utility Navigation" slot. Some might even allow you to add a new "Block" to the header that can be assigned a menu.
   • If you find such a slot, simply select the new menu you created in Step 1 from the dropdown.
   • Save your changes and preview your store.

If your theme has this option, congratulations! You've just added a secondary menu without touching a single line of code. But what if your theme doesn't offer this flexibility, or you need more precise control over placement and styling?

Method 2: Diving into the Code for Custom Placement

When theme settings fall short, it's time to get a little technical. This approach gives you full control but requires caution. Always, always, duplicate your theme first before making any code changes!

Step-by-Step: Adding a Custom Menu via Code

1. Prepare Your Menu:
   • Just like in Method 1, you need to create your new menu in Shopify Admin first. Go to Online Store > Navigation > Add menu. Let's call it "Secondary Top Menu" for this example, which will give it a handle like secondary-top-menu. Add your desired links and save.
2. Access Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your current theme, click Actions > Edit code.
3. Locate the Right File:
   • The community suggested placing this in header.liquid or announcement-bar.liquid. @topnewyork provided a great snippet specifically for announcement-bar.liquid. This file is often rendered at the very top of your site, making it an ideal spot for a secondary menu.
   • In the "Sections" folder, find and open announcement-bar.liquid.
4. Insert the Code:
   • @topnewyork advised placing the code “before the schema tag.” Scroll down in the announcement-bar.liquid file until you see a line like {% schema %}. You'll insert the following code above that line.
   • Crucial Adjustment: Remember, @hamzaabbas wanted different links. The original code snippet used linklists.main-menu.links. We need to change this to reference your new menu's handle. If you named your menu "Secondary Top Menu," its handle is likely secondary-top-menu. So, change linklists.main-menu.links to linklists.secondary-top-menu.links.
   • Here's the modified code to paste:

   
   
     
   
      {% for link in linklists.secondary-top-menu.links %}
         
   {{ link.title }}
       {% endfor %}
     
   
   
   
   
   

5. Save and Test:
   • Click Save.
   • Visit your live store to see the new menu. Inspect it on different devices (desktop, mobile) to ensure it looks good and functions correctly.

Important Considerations for Your New Menu

• Mobile Responsiveness: Always check how your new menu appears on mobile devices. The provided CSS uses display: inline-flex; which is generally good, but you might need further media queries for smaller screens if your links get too cramped.
• Theme Updates: If you manually edit theme files, remember that future theme updates might overwrite your changes. It's a good practice to keep a record of your customizations.
• Performance: Adding more elements can slightly impact page load times. Keep your menu items concise and only add what's truly necessary.

Adding a second menu bar can significantly enhance your store's usability and organization, helping customers find exactly what they need faster. Whether you leverage your theme's built-in features or dive into the code, our community's shared wisdom gives you a clear path forward. Start with the simpler theme customizer method, and if that doesn't quite hit the mark, the code snippet from @topnewyork, with our small adjustment for your specific menu, is a powerful alternative. Happy customizing!