Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to add custom header for specific pages?

Solved

How to add custom header for specific pages?

youngjack777
Visitor
2 0 0

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. 

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2139 616 512

This is an accepted solution.

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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2139 616 512

This is an accepted solution.

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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
youngjack777
Visitor
2 0 0

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!

businessseller
Visitor
1 0 0

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