How to Override header-group.json based on page variable (Url/Template/etc)

Store Design
, ,

Topic summary

Goal: show different header navigation menus for corporate vs ecommerce pages in a Shopify (Dawn) theme.

Early attempt: duplicate header-group.json and conditionally render sections in theme.liquid based on template.name (e.g., product). Downsides: duplicated JSON doesn’t sync with theme customizer changes, requiring manual copy-paste.

Adopted approach:

  • Edit header.liquid schema to allow selecting two link_list menus (e.g., menu and menu2) in the customizer. “link_list” is a schema setting that lets a section reference a Shopify navigation menu; header-group.json stores these customizer settings.
  • If multiple link_list inputs are blocked (due to app blocks), remove the max_blocks line and the last blocks object to re-enable multiple link lists.
  • In header-dropdown-menu.liquid, create a variable (e.g., menuToLoad) based on template.name, then render links from menuToLoad instead of section.settings.menu.links. This worked on Dawn.

Optional robustness: add a third “control” menu containing pages that should use the corporate menu. Logic: if current page is in control menu, use menu2; otherwise, use menu1. This avoids expanding template checks.

Outcome: working solution with schema changes and conditional menu selection; images illustrate schema edits. Discussion concludes with improvements suggested; no unresolved disputes.

Summarized with AI on January 5. AI used: gpt-5.
2

Hey @JlambleyPPT ,

I wouldn’t amend the json file directly because that’s where the customizer options are saved. What I would do is

  1. Create 3 menus.
  • Corporate Menu
  • Shop Menu
  • Hidden menu that includes pages that should show corporate menu (or vice versa) It’s only hidden because it’s not shown on the frontend, there’s no special hide feature.

Let’s say hidden menu has pages that are corporate related

I would amend the schema inside header.liquid to add the option of selecting 2 menus in the customizer Shop Menu (menu_shop) and Corporate Menu (menu_corporate)

Then when rendering the menu I would do an if statement to check if current page is in the hidden menu, if it is, then variable menu = menu_corporate, else variable menu = menu_shop and then the menu rendering part will automatically take care of the rest.

You could also drop the 3 menu idea and just check if the current page is in corporate menu directly, but the idea of having the live menu’s and the control menu sometimes is nice, because then you have a place to do the “on/off” seperately, and then another to show on the frontend.