How can I remove the header from my homepage only?

Solved

How can I remove the header from my homepage only?

jakobvavrock
Visitor
2 0 0

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.

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1317 233 280

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 12 (12)

mummetech
Shopify Partner
8 1 8

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 %}

Want to hire me to tweak your theme? E-Mail me at mummetech@gmail.com

PageFly-Noah
Shopify Partner
1317 233 280

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

jakobvavrock
Visitor
2 0 0

Thank you so much! It worked

PaulNewton
Shopify Partner
7721 678 1619

@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.

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


mummetech
Shopify Partner
8 1 8

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?

Want to hire me to tweak your theme? E-Mail me at mummetech@gmail.com
Dropy23
Visitor
2 0 0

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
Shopify Partner
1317 233 280

@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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dropy23
Visitor
2 0 0
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
Shopify Partner
1317 233 280

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

dezzier
New Member
12 0 0

Thank you Noah!

I wanted to hide the header for a page. I used the code you gave this user above but replaced "community-subscription" with my page name. I had to change it to page.url and it worked perfectly, Here is the code I put above the </head> 

 

{% if page.url 'wholesale-front-page' %}
<style>
.section-header {
display: none !important;
}
</style>
{% endif %}

dezzier
New Member
12 0 0

Is there a way to hide the announcement bars on that page as well? I have two announcement bars

xaffine
Tourist
19 0 1

Hi,
I want to hide header and footer menu for my cart page.