How to display a new Header Menu when customer with a specific tag logs in

[KR3]

Hi there. I run a membership-type structure on my store. I am looking to have different header menu display when any customer with a specific tag (read3-user) logs in.   

I have been doing this successfully in Debut for four years but with the upgrade to Shopify 2.0 and Dawn theme I can't work out what code is needed... I am also unsure if it needs to go somewhere specific for mobile display as well as desktop display.

Ideally this alternate header menu would display regardless of what page template is selected.  I have mega menu selected on my site if that is relevant. 🙂

If anyone can help me I've be so grateful. 

[Moeed]

Hey @KR3 

This type of work is possible but is pretty complex as well the same time and it will require some custom coding in your theme files at multiple places so if you're not familiar with coding then I would highly recommend you to hire a Shopify developer who can help you out with that in performing the task smoothly. Feel free to let me know if you want me to help you out and I would be more than happy to give you a helping hand.

Best Regards,

Moeed

[rajweb]

Hey @KR3 ,

To set up a different header menu for customers with the "read3-user" tag in the Dawn theme, you'll need to modify the theme's code to detect the customer tag and conditionally render the appropriate menu:

Follow These Steps:

1, Online Store 

2. Themes 

3. Edit Code

4. Create Alternate Menu Code:

-Open header.liquid (usually located under  Srctions).

-Locate the code that renders your header menu. In Dawn, it often uses navigation.liquid or another snippet to load the menu. 

5. Add Conditional Logic for Customer Tag:

-Insert a condition to check if the logged-in customer has the read3-user  tag.

-Here's an example of what the code might look like:

liquid:

{% if customer and customer.tags contains 'read3-user' %}
  <!-- Display alternate menu for 'read3-user' customers -->
  {% render 'alternate-menu' %}
{% else %}
  <!-- Default menu for other customers -->
  {% render 'main-menu' %}
{% endif %}

6. Create the Alternate Menu:

-If you don’t already have an alternate menu snippet (e.g., alternate-menu.liquid), create a new snippet with the desired menu structure.

7. Ensure Compatibility with Mobile and Mega Menus:

-Dawn handles mobile and desktop headers separately, so ensure that your condition covers both.

-Test on both mobile and desktop views to confirm the alternate menu displays as expected.

8. Test Across Templates:

Since you want this header to display universally, placing this in the header.liquid will apply it site-wide.

After implementing, check by logging in as a tagged customer on mobile and desktop to confirm the alternate menu appears correctly. Let me know if you’d like further customization on this setup!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[KR3]

Rajweb, thank you for this. I found a different solution yesterday. It required code to be added in all three Dawn menu styles so it may be a little different to yours. I will save your explanation to test if the one I have doesn't work for some reason.  Thanks again. 

[rajweb]

@KR3 ,

Great to hear that you found a solution! It sounds like the thread you came across provided some valuable insights for your issue. If you run into any more problems or need further assistance with your store, don’t hesitate to reach out again—I’m always happy to help! If you found my replies helpful, I’d really appreciate it if you could like them and mark them as the solution. Your support goes a long way in helping my profile—thank you!