How to remove header for one page only

[jakobvavrock]

So I want my home page to be without the header and footer and I see some similar questions throughout this platform, but their answers don't seem too work for me. I don't know if the code just doesn't work for my specific case or what. Thank you for your help. The URL is errrordesign.com.

[mummetech]

You need to wrap your header and footer includes (in theme.liquid) in an if statement, something like this:

{% if template.name == "index" %}
code to include the new header, or nothing at all
{% else %}
{% section 'header' %}
{% endif %}

[PageFly-Noah · Accepted solution]

Hi @jakobvavrock 

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if template.name == "index" %}
<style>
.section-header {
display: none !important;
}
 </style>
{% endif %}


{% if handle contains 'about-us' %}
<style>
.section-header {
display: none !important;
}
 </style>
{% endif %}

{% if handle contains 'shop' %}
<style>
.section-header {
display: none !important;
}
 </style>
{% endif %}

Please use the code to hide it for specific page

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[jakobvavrock]

Thank you so much! It worked

[PaulNewton]

@jakobvavrock 

To avoid merchants editing code directly use a a custom css setting for that pages template in the theme editor

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

This way the extra styles are also only served for that page type. 

For most OS2.0 themes there's also the recommendation of using a custom-liquid section on that specific template in the theme editor instead of editing theme.liquid directly.

[mummetech]

Some would argue that using css to hide content has seo implications, I don't know if I agree, but something to consider if you don't want that hidden content to get crawled. 

The header and footer are called before the page template so I don't see how using a custom section would help in this case, can you elaborate?

[Dropy23]

Hey I'm trying to remove the header and footer in certain pages on my website and that didn't work for me, please help me

[PageFly-Noah]

@Dropy23 
You can tell me which page you want to hide the header/footer
And if possible you can send me the link url so i can write a proper code

[Dropy23]

Hey the page is for my product my product page that called “community-subscription”
And unfortunately I can’t send a link to the website yet, I would thank you a lot if you can help me without it

[PageFly-Noah]

Hi @Dropy23 You can try this

{% if handle contains 'community-subscription' %}
<style>
.section-header {
display: none !important;
}
 </style>
{% endif %}

If this not work, please try this

{% if product.url == 'community-subscription' %}
<style>
.section-header {
display: none !important;
}
 </style>
{% endif %}

If both of that code didn't work, i think it is because of your header has a different structure than that. You can send me the URL of the homepage then i can check the header structures.