Replace Footer on One Page

Page LayoutsFree

Jan 25

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

GIF of a different footer on a page in Squarespace 71.

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