Dynamic Shopify Menus: How to Tailor Navigation with Page Metafields

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time digging through the community forums, and let me tell you, they're a goldmine of creative solutions. Recently, I stumbled upon a fantastic discussion that really resonated with a common challenge: how to display different menus on specific pages of your Shopify store, particularly using the popular Dawn theme.

Imagine this: you have a "Commercial" section on your website that needs a completely different navigation structure than your main retail pages. Or perhaps you're running a special campaign landing page and want a streamlined menu just for that. This isn't something Shopify offers out-of-the-box in a simple click, which is why our friend steveng9 brought this exact problem to the community.

The Challenge: Dynamic Menus with Metafields

steveng9 was trying to use a page metafield – a true/false field called page.metafields.custom.commercial_menu – to determine which menu should show up. If the metafield was 'true', they wanted an 'alternate menu' (which they'd named new-menu in the admin); otherwise, the default menu. They'd tried to implement conditional logic in various header snippets in Dawn 2.0, version 16.0, using code like this:

{% if page.metafields.custom.commercial_menu.value == 'true' %}
{% assign new_menu = linklists.new-menu.links %}
{% else %}
{% assign new_menu = section.settings.menu.links %}
{% endif %}

Sound familiar? It's a smart approach, but as often happens with custom code, a few subtle details can make all the difference. That's where the community stepped in with some brilliant refinements!

The Community's Solution: Pinpointing the Details

Two fantastic contributors, Maximus3 and Ploqo, jumped into the thread with crucial tips that really brought steveng9's vision to life. They highlighted a couple of key things:

1. Boolean vs. String: A true/false metafield is a boolean value. This means you should compare its value with true (without quotes) instead of the string 'true' (with quotes). This is a classic Liquid gotcha!
2. Scoping with template.name: To ensure this custom menu logic only applies to specific pages and doesn't accidentally hijack your product, collection, or homepage navigation, you need to add a condition: template.name == 'page'. This keeps things tidy.
3. Dawn Theme Snippets: The Dawn theme uses different snippets for various menu styles and layouts (desktop dropdown, desktop mega menu, mobile drawer). To make sure your custom menu appears consistently across all views, you need to apply the changes in all relevant files.
4. Linklist Handle Syntax: When referencing a linklist with a hyphenated handle (like new-menu), it's best practice to use bracket notation: linklists['new-menu'].links.

Ploqo, in particular, provided a super clear, step-by-step guide with screenshots, showing exactly how to implement this. It's a testament to how powerful our Shopify community is!

Step-by-Step Guide: Implementing Your Dynamic Menu in Dawn

Ready to get your hands dirty? Here's how you can implement this dynamic menu solution on your own Dawn theme store, pulling together the best insights from the community discussion:

1. Create Your Page Metafield

• Go to your Shopify Admin > Settings > Custom data.
• Under "Metafields," select Pages.
• Click Add definition.
• Give it a descriptive name, like "Commercial Menu" or "Alternate Menu."
• Set the Namespace and key (e.g., custom.commercial_menu).
• Choose Content type > Checkbox (this creates a true/false boolean field).
• Save your metafield definition.

2. Create Your Alternate Menu

• Go to your Shopify Admin > Online Store > Navigation.
• Click Add menu.
• Give it a title (e.g., "New Menu"). Make a note of its handle (it usually auto-generates from the title, like new-menu).
• Add the menu items you want for your alternate navigation.
• Save your menu.

3. Dive into Your Theme Code (Always Backup First!)

Before you edit any code, always duplicate your theme! This way, you have a safe version to revert to if anything goes wrong.

• Go to your Shopify Admin > Online Store > Themes.
• Find your active theme (or the duplicate you're working on) and click Actions > Edit code.

3a. Identify the Files to Edit

For the Dawn theme, you'll need to modify the following snippets to ensure your custom menu works across desktop and mobile views:

• snippets/header-dropdown-menu.liquid (for desktop dropdowns)
• snippets/header-mega-menu.liquid (for desktop mega menus)
• snippets/header-drawer.liquid (for mobile menu and desktop drawer layouts)

3b. Add the Conditional Logic

At the very top of each of the three files listed above, paste this Liquid code:

{%- if template.name == 'page' and page.metafields.custom.commercial_menu.value == true -%}
  {%- assign header_menu = linklists['new-menu'].links -%}
{%- else -%}
  {%- assign header_menu = section.settings.menu.links -%}
{%- endif -%}

Remember to:

• Replace 'new-menu' with the actual handle of your alternate menu.
• Replace page.metafields.custom.commercial_menu with the exact namespace and key of your boolean page metafield.

This code checks if the current template is a 'page' AND if your custom metafield is checked (true). If both are true, it assigns your alternate menu links to a variable called header_menu. Otherwise, it assigns the theme's default menu links.

3c. Update the Menu Loop

Now, you need to tell the theme to use your new header_menu variable instead of its default. Find the menu loop in each of those three files. It typically looks something like this:

{%- for link in section.settings.menu.links -%}

Change it to:

{%- for link in header_menu -%}

This simple change ensures that the menu displayed is the one you conditionally assigned.

4. Apply the Metafield to Your Pages

• Go to your Shopify Admin > Content > Pages.
• Open any page where you want the alternate menu to appear.
• Scroll down to the "Metafields" section. You'll see your new "Commercial Menu" (or whatever you named it) checkbox.
• Check the box for the pages where you want the alternate menu.
• Save the page.

5. Test Thoroughly!

Now, visit your live store! Check pages with the metafield ticked and pages without it. Ensure your default menu appears where it should, and your alternate menu appears on the correct pages. Test on both desktop and mobile devices to confirm everything looks good in all menu layouts.

This solution, born from a real community discussion, really showcases the power and flexibility of Shopify's Liquid templating language and metafields. It's a fantastic way to offer a more tailored browsing experience for your customers without needing a separate theme or complex app. A big shout-out to Ploqo and Maximus3 for their detailed contributions!

If you're just starting your journey with e-commerce and thinking about building your own online store, seeing these kinds of possibilities might inspire you. Shopify provides a robust platform that, with a little customization know-how (or help from the community!), can truly bring your unique business ideas to life. If you're ready to dive in, you can start building your Shopify store today and join this incredible ecosystem of merchants and experts.