Re: Show a different navigation menu based on a condition - Focal Theme

Solved

Show a different navigation menu based on a condition - Focal Theme

quarfie_op
Tourist
7 1 3

My theme (Focal) is currently set to use the navigation menu "main-menu" in the header of every page.

 

I want to replace this with "main-menu-wholesale" when a specific condition is true:

 

customer.tags contains 'wholesale'

I've tried to follow the instructions at https://www.envision.io/blogs/ecommerce-pulse/80312001-how-to-add-a-wholesale-area-to-your-shopify-s... but the theme is a lot more complicated.

 

I see in header.liquid that there is a {% schema %} section that includes the element:

 

{
  "type": "link_list",
  "id": "navigation_menu",
  "label": "Menu",
  "default": "main-menu"
}

I would like to know where I can insert the conditional logic to override this, and how it would be structured.

Accepted Solution (1)
quarfie_op
Tourist
7 1 3

This is an accepted solution.

SOLVED!

 

Even though <p>~{{ section.settings.navigation_menu }}~</p> was outputting the menu handle as a string, it's actually an object.

 

Here's what I did to solve...

 

Towards the bottom of header.liquid I found

 

 

{
  "type": "link_list",
  "id": "navigation_menu",
  "label": "Menu",
  "default": "main-menu"
}

 

 

Earlier I tried duplicating this and changing the id, label & default, but it would not accept the new default. I realized that this doesn't matter because once I add the new object, I would be able to customize it in the theme editor. So this is what I added: 

 

 

{
  "type": "link_list",
  "id": "navigation_menu_wholesale",
  "label": "Menu Wholesale",
  "default": "main-menu"
}

 

 

Then over in the theme editor, I changed the value:

quarfie_op_0-1700058958457.png

Then near the top of header.liquid where I found {%- assign menu = section.settings.navigation_menu -%} I replaced it with:

 

 

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu_wholesale -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif -%}

 

 

 

View solution in original post

Replies 9 (9)

Guleria
Shopify Partner
3400 679 963

Check where this if is used or something related to it

 {{ sectiion.setting.navigation_menu }}

Once wrap it with condition

{% if customer.tags contains 'wholesale'  %}
 // Pick the exisitng code and change the menu name theme
{% else %}
 // Use existing code here
{% endif %}

 

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
quarfie_op
Tourist
7 1 3

So I found this line in header.liquid:

{%- assign menu = section.settings.navigation_menu -%}

Originally I tried adding this below it:

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = "main-menu-wholesale" -%}
{%- endif  -%}

But that gave me no menu for wholesale.

So then I tried changing it to:

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu_wholesale -%}
{%- endif -%}

and added to the schema section:

{
  "type": "link_list",
  "id": "navigation_menu_wholesale",
  "label": "Menu Wholesale",
  "default": "main-menu-wholesale"
}

but it would not let me save the file

Invalid schema: setting with id="navigiation_menu_wholesale" default is invalid

So I'm obviously still missing something...

Guleria
Shopify Partner
3400 679 963
{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = "main-menu-wholesale" -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif  -%}
- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
quarfie_op
Tourist
7 1 3

Thanks. I've tried that too. It just outputs nothing as soon as I assign the menu handle as a string.

 

To troubleshoot, I tried this...

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif  -%}

... I get the regular main-menu in both cases, as expected.

But as soon as I change "section.settings.navigation_menu" to "main-menu-wholesale" or even "main-menu", the entire menu disappears completely for customers having the wholesale tag.

I've even output the variable using...

<p>~{{ section.settings.navigation_menu }}~</p>

...to confirm that I see ~main-menu~

 

Why would I get a different result for the same value depending on whether it's referenced through a variable vs passed as a string?

 

quarfie_op
Tourist
7 1 3

This is an accepted solution.

SOLVED!

 

Even though <p>~{{ section.settings.navigation_menu }}~</p> was outputting the menu handle as a string, it's actually an object.

 

Here's what I did to solve...

 

Towards the bottom of header.liquid I found

 

 

{
  "type": "link_list",
  "id": "navigation_menu",
  "label": "Menu",
  "default": "main-menu"
}

 

 

Earlier I tried duplicating this and changing the id, label & default, but it would not accept the new default. I realized that this doesn't matter because once I add the new object, I would be able to customize it in the theme editor. So this is what I added: 

 

 

{
  "type": "link_list",
  "id": "navigation_menu_wholesale",
  "label": "Menu Wholesale",
  "default": "main-menu"
}

 

 

Then over in the theme editor, I changed the value:

quarfie_op_0-1700058958457.png

Then near the top of header.liquid where I found {%- assign menu = section.settings.navigation_menu -%} I replaced it with:

 

 

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu_wholesale -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif -%}

 

 

 

acarlin
Shopify Partner
2 0 0

Can you explain this fix for me? I'm stuck where you are, with it displaying the main menu regardless of if I'm logged in as wholesale or not, and like you it won't let me change the default to main-menu-wholesale.

acarlin
Shopify Partner
2 0 0

Nevermind - just figured it out. It's way too late for me to be working, ha.

Thanks for sharing your process in this post, it was super helpful!

dustdrops
Visitor
2 0 1

I am trying to do this on Dawn theme but for a specific link_list in the footer menu.  Any advice?

 

Smeelah
Navigator
358 1 99

I'm wondering if you got this working for the mobile menu? I have been using that tutorial you mentioned at www.envision.io/blogs/... but the switch doesn't happen on mobile. TIA:)