Shopify Pro Tip: How to Add a Second Navigation Bar to Your Store (Above the Fold!)

View original discussion by hamzaabbas on Shopify Community →

Hey everyone! It's your Shopify migration expert here, diving into another common question that pops up in our awesome community. Recently, a store owner, @hamzaabbas, reached out asking about how to add a second menu bar above their existing one on tridentproducts.co.uk. They wanted a separate set of pages and categories, distinct from their main navigation.

This is a fantastic question because, let's be honest, sometimes one menu just isn't enough to guide your customers effectively, especially if you have a wide range of products or specific informational pages you want to highlight without cluttering your main navigation. Our community jumped in with some great insights, and I'm here to break down the best approaches for you.

Why Bother With a Second Menu Bar?

Before we get into the 'how,' let's quickly touch on the 'why.' A secondary menu, often placed at the very top of your site, is perfect for:

  • Utility Links: Think 'Contact Us,' 'About Us,' 'FAQs,' 'Track Your Order.'
  • Account Information: 'My Account,' 'Wishlist,' 'Login/Register.'
  • Special Promotions: A quick link to a sale category or new arrivals.
  • Store Locators or Currency Selectors: If your theme doesn't handle these elsewhere.

It helps streamline your main navigation, making it cleaner and more focused on product discovery, while still keeping important, non-product-specific links easily accessible.

Step 1: The Foundation - Create Your New Menu in Shopify Admin

This is a crucial first step, and @Trii rightly highlighted it in the discussion. Before you even touch a line of code or dig into theme settings, you need to tell Shopify what links belong in this new menu.

How to Create Your Secondary Menu:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the "Add menu" button.
  3. Give your new menu a clear name, like "Top Bar Menu" or "Utility Navigation." This name isn't visible to customers, but it helps you identify it.
  4. Click "Add menu item" and start adding all the pages, collections, blogs, or external links you want in this secondary bar.
  5. Once you're done, hit "Save menu." Make a note of the menu's handle (it's usually the menu title in lowercase with hyphens, e.g., "top-bar-menu"), as you might need it later for code.

Step 2: Two Paths to Your Second Menu Bar

Now that your menu is ready, let's explore the two main ways to get it onto your storefront, as our community members @devcoders and @Trii pointed out:

Option A: The Theme's Built-in Secondary Menu Slot (The Easy Way!)

Many modern Shopify themes, especially those built on Dawn, actually have a dedicated slot for a secondary menu built right into the header section. This is always the first place you should check because it requires no coding!

How to Check Your Theme:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click on "Customize" next to your active theme.
  3. In the theme editor, navigate to the Header section (usually found in the left sidebar).
  4. Look for options like "Secondary menu," "Top bar menu," or something similar. If you find one, simply select the menu you created in Step 1 from the dropdown.
  5. If your theme has this, fantastic! Save your changes, and you're good to go.

If you don't see this option, don't worry! Most themes also have an "Announcement bar" section. While typically used for text, some allow you to add links or even a menu block. It's worth exploring if your theme's announcement bar can be customized to house your secondary navigation.

Option B: Custom Code for Full Control (When Your Theme Needs a Little Nudge)

If your theme doesn't offer a built-in slot or you want more specific control over styling and placement, it's time to dive into the code. This is where @topnewyork's excellent code snippet comes in handy, with a slight adjustment to ensure it pulls your *new* menu.

First, a critical warning: Always, always duplicate your theme before making any code changes. This gives you a safe rollback point if anything goes wrong. Go to Online Store > Themes > Actions > Duplicate.

Adding Your Custom Secondary Menu Bar:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click "Actions" > "Edit code" for your duplicated theme.
  3. In the Sections folder, open the announcement-bar.liquid file. This is a common place for top-most elements. Alternatively, you could look in header.liquid as @devcoders suggested, but placing it at the very top of announcement-bar.liquid will ensure it sits above everything else.
  4. Paste the following code snippet at the very top of the file, *before* any existing HTML (or before the schema tag if you want to follow @topnewyork's exact placement, though typically you'd want it above the main content of the section).
  5. Important: Replace your-secondary-menu-handle with the actual handle of the menu you created in Step 1 (e.g., top-bar-menu).



  
    
   {% for link in linklists.your-secondary-menu-handle.links %}
      
  • {{ link.title }}
    • 
    {% endfor %}
  1. Click "Save."
  2. Now, visit your online store to see your new menu bar! You'll notice the CSS included in the snippet provides some basic styling. You can tweak the background-color, padding, font-size, and color values in the