(HELP!!!) How to make my two different headers show on different pages

[premisesdist]

I have a differently designed index page, in which my header is different to the one i want for my product pages ect. i have been working on this for a very long time. I have duplicated my header.liquid file and made a header2.liquid file, in which i want to show on every page but my index page. The problem i have is, I cannot seem to find a way to show the different headers on different pages. I reference 'header' in a {% if template.name == 'index'%} {% sections 'header'%} code (screenshot attached), but it does not show the contents of the 'header.liquid' file, although, it shows it when i use 'header-group' instead of it. This is a problem, as when i use 'header2', it does not show the header2.liquid file, which i need to have. Anyone have a fix for this, or a different word i can use in the {% sections 'header'%} part? THANKYOU!

[webwondersco]

@premisesdist Hope you are doing well.

Could you please share your store URL? if it is password protected please share the password as well.

[premisesdist]

www.premisesdist.com

only the front page is up right now as the others dont work.

[EG7]

I am also having this same problem. I want a button in my nav on my homepage to have an anchor link down to a certain area on the homepage, but now my other pages won't be able to access the content page from that button. I have everything coded where I need it but cannot use a a different header on the homepage and another across the rest of the pages. Please help. 

[Vinsinfo]

@premisesdist 

Please follow the below steps to make two different headers show on different pages and let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Locate the theme.liquid and the Replace your code with below one like in the attached screenshot.

{% if template.name == 'index' %}
    {% section 'header' %}
{% else %}
    {% section 'header2' %}
{% endif %}

4. Save the changes and check frontend for two different headers on different pages.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[elokuu_creative]

@Vinsinfo I also tried this – it works fine on desktop, but on mobile the second header / hamburger menu doesn't work at all. How could this be fixed? Thanks!

[elokuu_creative]

I'm replying to myself, I got it work! I just needed to update the global.js file as well. 🙂

[sunnycide1]

can you tell us how did you achieve this, i have similar problem.