Change the Background Color of the Search Page

What does this code do?

This code snippet will allow you to change the background color of the search results page.

Read this First

Squarespace automatically creates a search results page for you using some of your Site Wide Styles. You can find yours at “yourdomainname.com/search”. You can find out more about your built in search page here.

In Squarespace 7.1, this page is styled according to your default color theme which is set by the template you choose. You can change which color theme is the default using the Squarespace App! If you want the background color to be one of the other colours in your color palette, you do not need to use code. You can change the default color to the color theme of your choice. The search page will then take on the styles of the new default color theme.

Code Snippet

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Change the Background Color of the Search Page -->
<script>
  if(window.location.href.indexOf("search") > 0) {
    document.body.style.backgroundColor = "white";
}
</script>

Then the word white to the colour you would like your background to be. You can use a word or hex code.

How To Use It

1. Copy and paste the code as indicated above.

2. Change the word “white” to the colour you would like your background to be.