How to add custom header for specific pages?

Store Design
, , ,
1

I already made two different menu bars, and I would like the second one to appear only on the product page and the first one on all the other pages. You probably already know that if you change the menu bar being used via the gui editor, it makes it appear not only on the page you want, but an all the pages.

It’s a lot that I’ve been trying to figure out how to make the second menu bar appear only on that one page, but so far I didn’t find the answer yet.

As of right now I’ve managed to make the two working menus on different .json files, and I found the place on the theme.liquid file where the .json file for the menu is called.

its all working until I add conditionals! I’ve tried everything but I cannot understand what I’m doing wrong: here’s the code section inside theme.liquid for what I want to do:

{%- if page.handle == 'multifunctional-liquid-shoe-brush-household-press' -%}
      {% sections 'header-group-2' %}
      {% else %}
      {% sections 'header-group' %}
    {%- endif -%}

Basically if I leave only {% sections ‘header-group’ %} or {% sections 'header-group-2} it works as intended, so I guess that the place where the code is located and the menus calling is correct. It’s just the if condition that doesn’t seem to work, because the menu I select still shows on all the website.

2

Hey @youngjack777 ,

Do you want that menu on a one product page or all the product pages?

If you need that in all product pages then do this.

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

Thank you so much, it finally works! I have a one product store so it doesn’t make a difference to have the second menu on all products.

Honestly don’t know what i was doing wrong, but much appreciated!

4

Hey I’m not to familiar with css, where exactly do you put that code?

5

Hello @ThePrimeWeb

Can you also help me please?

I want to add a header for a specific page: https://diversusoficial.com/pages/diversus-foundation
I want the header from this page to be like this example: https://kinnectfoundation.org/

What can i do to achieve this?

Best regards and thank you in advance.