How to Remove the Header and Footer from a Squarespace Page
You can remove the header or footer from one page in Squarespace using their built-in toggles or a few lines of code, depending on the type of page. I’ll be sharing both methods in this post! If you have a sales page or an opt-in page, you can remove the header and hide the footer to help increase conversions.
This post was created for Squarespace 7.1. If you're on Squarespace 7.0, it will not work for you. Find out which Squarespace version you have here.
How to Remove the Header and Footer in Squarespace
Depending on your page, you may want to remove just the header or just the footer, so I’ve posted the native method and code for each below. However, I do recommend removing both as it will be the most effective option for pretty much any sales page/landing page.
Remove the Header and Footer on Regular Pages in Squarespace
Squarespace now have built-in buttons to toggle the header or footer off on one page! These buttons only appear in the settings of regular pages (not blogs, portfolios or events pages) but it’s likely your sales page/landing page is a regular page type anyway.
To hide the footer or header from regular Squarespace pages, follow these steps:
In the Home Menu, click Website > Pages.
Hover over the relevant page and click the Cog Icon.
In the pop up, click Navigation and toggle off the Header or Footer buttons.
Click Save.
Refresh the page to see the changes.
How to hide the header and footer in Squarespace with toggle buttons.
Remove the Header and Footer on Collection Pages in Squarespace
Since there isn’t a native option to remove the header and footer on collection pages in Squarespace, you’ll need to add a little bit of code so they disappear. If you’re not sure what a collection page is, it’s any page that has sub-pages. That includes blogs, portfolios and events pages to name a few.
To hide the footer or header from Squarespace collection pages, follow these steps:
In the Home Menu, click Website > Pages.
Hover over the relevant page and click the Cog Icon.
In the pop up, click Advanced and paste the relevant code snippet into the Page Header Injection.
Click Save.
Refresh the page to see the changes.
<!-- Remove the Header -->
<style>
#header {
display: none;
}
</style>
<!-- Remove the Footer -->
<style>
#footer-sections {
display: none;
}
</style>
<!-- Remove the Header and Footer -->
<style>
#header, #footer-sections {
display: none;
}
</style>
How to add code injection to the header of an individual page.
How to Remove the Header and Footer on a Squarespace page without using Code Injection
If possible, use the first method because it’s tidier and loads a little bit quicker. However, adding code to a page via Code Injection is only available to users on the Business Plan or above. The second method I’m sharing is a workaround, and will let you add the code even if you’re only on the Personal plan.
To remove the header and footer from a single page on Squarespace, follow these steps:
On the page, click Edit, then click Add Block and select Code from the menu.
Click the block and click the Pencil Icon, then paste in the relevant code snippet.
Click Save.
Refresh the page to see the changes.
Adding a code block on a Squarespace page.
Code not working? Here's how to troubleshoot.
Sometimes code won’t work (or breaks other things) and it can be difficult to figure out why. If you’re following the instructions to hide your header or footer from the page and it doesn’t work, there could be a few reasons behind it:
Make sure you haven’t missed any punctuation and everything is spelt correctly. The CSS editor says “syntax error” when this happens, but unfortunately we don’t get the same with Code Injection.
Inside the Code Injection, make sure you have added the code to the Header, not the Footer. It won’t work correctly if it’s in the wrong place!
Test your code snippets in multiple places. I always double check mine in an incognito tab on Chrome, as it can sometimes act up in editor mode.
Syntax error displaying in the CSS editor and indicating broken code.
Why You Should Hide the Header and Footer on Your Squarespace Website
Increase Your Sales Page Conversions
Removing the header and footer from a single page on Squarespace is the best way to create a distraction-free page, and guide your website visitors towards a single goal.
For example, if you have a long-form sales page on your website promoting your services, the end goal is to get people to click the button and book. Hiding the header and footer keeps the visitor focused on the page - the only thing they can do is book your services or use the back button!
A landing page without a header or footer.
Hubspot actually A/B tested some of their sales pages to see how effective this trick was. The results speak for themselves, as one of the pages saw a 28% increase in button clicks after removing the header.
Table displaying the conversion rates of different pages with and without a header.
So if you’re wondering whether you should remove the header and footer from your landing page, the answer is yes!
If you have a landing page/sales page on your Squarespace website, this will help you improve conversions and get your visitors to book or buy. Considering it only takes a few minutes to copy and paste the code, it’s definitely worth the effort.
Avoid Purchasing Expensive Software
There are lots of tools and resources out there for creating landing pages - some of the most popular ones include:
Clickfunnels
Leadpages
Kartra
GetResponse
GrooveFunnels
The problem with most of these tools is that they cost a lot of money. They are feature rich of course, but if you’re just getting started, paying $79 per month (or more) is pretty hefty when it’s possible to create a sales page on your existing website. It will probably look a lot better, too.
3. Click Save.
4. Refresh the page to see the changes.
On which pages should I be hiding my header and footer?
Here is a full list of the types of pages where the header and footer should be hidden to help increase conversions:
Opt-in pages
Webinar pages
Sales pages
Upsell pages
Instagram links pages
If you want to see a few examples of Squarespace pages without a header and footer, you can visit a mine!
I have an Instagram links page, which acts as an alternative to Linktree. It’s much prettier than anything Linktree would let me make, and it doesn’t cost a penny! I just added the blocks I wanted and removed the header and footer from the page. I have another post explaining how to do this yourself on Squarespace.
