Hi everyone! I’m looking for help to hide the header and footer on 6 pages. I only want to do this for 6 page, they are sales page’s and should act like a focused sales page without any distractions. However when I mark that section not to display, it removes it from across my website. Any ideas? I’m using horizon them. Thank you in advance.
Hey @John83
The reason toggling it removed the header and footer everywhere is that they’re global sections shared by every page, so hiding them hides them site wide, there’s no per page toggle for them. The fix is to give those 6 sales pages their own template, then hide the header and footer only on that template.
If you can share your store URL or even better if you share the URL of those 6 pages then I can provide you the exact code to sort it out.
Best,
Moeed
Hi @John83
You can handle this with separate product/page templates. Create a template without the header and footer, then assign it only to those six pages so the rest of the site stays unchanged.
The simplest solution would be very similar to this post – How to I remove the header from showing on selected pages (Taste them) - #2 by tim_tairli
The code will be different though for Horizon family of themes:
<style>
/* hide header */
.shopify-section-group-header-group {
display: none;
}
/* hide footer */
.shopify-section-group-footer-group {
display: none;
}
</style>
Yes, editing theme liquid codes may produce a slightly faster page, but this will also make further theme version updates more complex.
Hey @John83
hope you’re doing well!
The theme editor applies header and footer changes site wide. For only a few pages, you’ll typically need a custom page template and add conditional Liquid or CSS to hide the header and footer only on those templates.
I tested the following fix on Horizon theme. It works.
Create one template, then point all six pages at it.
Turn the header and footer back on globally first.
Before the fix:
After the fix:
Step 1. In Customize, click the template selector at the top, choose Pages, then Create template. Name it something like sales, based on Default page.
Step 2. In the Template group, Add section, then Custom Liquid. Paste this into Liquid code and Save.
<style>
/* hides the announcement bar, header and footer on this template only */
.shopify-section-group-header-group,
.shopify-section-group-footer-group {
display: none;
}
</style>
Step 3. Go to Content > Pages, open each of your 6 pages, set Template on the right to sales, and Save.
If you want to keep the announcement bar. so the snippet above removes it along with the header. To hide only the header, use the following code instead:
<style>
.shopify-section-group-header-group.header-section { display: none; }
</style>
Hi @John83 .
Yeah, that’s a global theme setting, so hiding it there applies it site wide. What you want to do instead is create a separate page template.
You can just duplicate your default page template, remove the header and footer sections from that specific copy, and save it. After that, go to Online Store, then Pages, open each of those 6 sales pages, and change their Theme template to your new copy. This keeps the rest of your website completely untouched while making sure those 6 pages stay entirely distraction free.