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

[JlambleyPPT]

Hi there!

We're currently looking into moving our current site onto shopify but we've got a bit of an issue with the single Navigation Bar. See we have a "corporate facing" side and an "eccomerce" side, each of which has a different links present in their respective Nav's.

I've created two menu's in shopify to reflect this: "main-menu" (the default one that will be used for the shop) and "corporate-menu" (filled with more B2B oriented links, zero of which being products)

I noticed that the theme picks up what menu to display based on the header-group.json file, specifically using the property section.settings.menu

"menu": "corporate-menu",

Opening up the .json file I see this is currently set to "corporate-menu" and changes/updates based on whatever one I select within the theme customizer.

I'm just looking for a way for this exact property to change based on a variable of some kind.

The variable itself is less important as we'll probably go based on template but I'm at a loss for how to physically change the parameter itself.

Is there an easy way to implement this? I'd imagine this can be done within theme.liquid but I could easily be wrong.

Please let me know your thoughts if you have time, any help would be hugely appreciated. 

[ThePrimeWeb]

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.

[JlambleyPPT]

That seems like it would be more robust for others to edit going forward! I
In my experimenting I've gone ahead and achieved what I wanted this way:

First I just duplicated the header-group.json section and created a copy called header-group-c.json with the only difference being the menu property; with the original pointing to "main-menu" and the new header-group-c section pointing towards the "corporate-menu".

Then Inside theme.liquid I've added a simple if/else

    {% if template.name == 'product' %}
      {% sections 'header-group' %}
    {% else %}
      {% sections 'header-group-c' %}
    {% endif %}

Only problem is that the new json file won't automatically update based on theme changes and a manual copy-paste process will have to be done each time the customization changes. Not ideal.

Is there any other way you can think of? Really appreciate your feedback!

[ThePrimeWeb]

Honestly, I would just try the solution I said earlier. Since you only need the template product you don't need the whole 3 menu thing, just try the whole if template.name == 'product', render 'header-group' else render 'header-corporate'.

I don't really have all this setup on my store, so I can't really give you the whole code. But if you need help, maybe I can look into it with collaborator access or something

[JlambleyPPT]

Looking into this further I don't think your solution is possible as the "link_list" that is the menu can only be referenced once:

 

I have looked applying some code where the actual handle for the menu gets applied to grab links from but form what I can tell (at least with the dawn theme) this happens across multiple snippets (header-dropdown-menu / header-drawer / header-mega-menu).

There must be an easy way to bake this in without having to create a duplicate? 

[ThePrimeWeb]

You can @JlambleyPPT,

Just delete the max_blocks line and the last blocks object. Having app blocks available disables multiple link lists.

[JlambleyPPT · Accepted solution]

So just to summarize in case anyone else needs a fix for this, this is what I went with (courtesy of ThePrimeWeb)

First amend the schema to store the second link-list within the theme (Sections>Header.liquid)

Then add a second link list beneath the first one (I called it menu2)

    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "link_list",
      "id": "menu2",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },

 Now we can select two menu's in the theme so you can go ahead and assign that in the customizer.

The last step I did was to make a variable inside the the header-dropdown-menu that grabs a menu based on template.name.

(Snippets>Header-dropdown-menu.liquid)

Finally I amended the {%- for link in section.settings.menu.links %} to use my variable menuToLoad instead.

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {% if template.name == 'product' or template.name == 'collection' %}
      {% assign menuToLoad = section.settings.menu2.links %}
    {% else %}
      {% assign menuToLoad = section.settings.menu.links %}
    {% endif %}
    {%- for link in menuToLoad -%}

This was all using the dawn theme.

Overall it works but I am sure there is a more robust way to do this. 

[ThePrimeWeb]

There's always a more robust way to do everything. First do what works and then improve from there. If you try to find the most optimal solution from the beginning, you'll never solve anything.

I think this solution is more than acceptable because you still can amend menu's in the customizer. It's not all hard coded.

Only thing i would do it to add a third menu option and include all the pages that need the menu2 there, so that I don't need to extend this
"{% if template.name == 'product' or template.name == 'collection' %}" statement when more pages are to come.

Something like "if menu3 contains currentpage, then menu2, else menu1"

Then everything will be available in the customizer without any further code amendments.