Replace Footer on One Page

Any section you place in your footer is automatically added to every page, so how can we create a different footer for one, or multiple, specific pages? In this tutorial, I’m going to walk you through how to do this and the coding pattern that allows this to happen.

Demo

Usage

1) Add a new footer to every page.

2) Remove the new footer from every page using the first bit of CSS provided below. (Use the Squarespace ID Finder Chrome Extension for help finding the Section ID)

3) Show the new footer on specific pages, by placing the second bit of code below in the Page Header Code Injection area of the specific pages you want that footer on.

Customize

SECTION_ID
Be sure to replace the Section ID variable in both of the code blocks below to target the specific Footer Section on your website.

The Code

  
/**
 * Hide Footer Section
 * Throughout Entire
 * Site
**/

body:not(.sqs-edit-mode-active) section[data-section-id="SECTION_ID"]{
    display:none;
}
  

  
<style>
  /* Hide All Footer Sections*/
  footer .page-section {
    display: none;
  }

  /*Show Footer Section*/
  section[data-section-id="SECTION_ID"] {
    display: flex !important;
  }
</style>
  

Additional Resources

If you want to replace the footer on one page, you might also want to replace the Site Nav on just one page. Check out my Squarespace plugin that helps you do this.

Site Nav Replacer Plugin