Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Solved! Go to the solution
This is an accepted solution.
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.
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 %}
This is an accepted solution.
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.
Thank you so much! It worked
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
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?
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
@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.
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.
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 %}
Is there a way to hide the announcement bars on that page as well? I have two announcement bars
Hi,
I want to hide header and footer menu for my cart page.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025