How to Customize the Search Results Page in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial you’ll learn what custom codes you can use to make your Squarespace search result page look fabulous. 

Below are the main codes from this tutorial along with some pre-made code snippets to help inspire your own custom code creations!

Here is how to install the code on your site:

1. Navigate to your Design Menu

2. Select Custom CSS

3. Paste the code below; be sure to update the font family, color and any other customizations you want to see!

4. Select save on the top left hand side of the screen and you’ll be good to go.

Here are the codes from this tutorial.

Round the corners:

.sqs-search-page-input {border-radius: 25px}

Change the input font color or style:

.sqs-search-page-input input {color: purple}

Remove the active box:

.sqs-search-page-input:focus-within {outline-color: transparent!important}

Change the text style of the result titles:

.sqs-search-container-item .sqs-title

Change the style of the result excerpt:

.sqs-search-container-item .sqs-content .sqs-content

Change the look of the accented text:

.sqs-search-container-item em

---

Here are some pre-made style codes you can customize with your own colors!

Add a custom background color to the search bar at top of page:

.sqs-search-page-input {background: #e5f5f6}

Change the color of the text in the search bar:

.sqs-search-page-input input {color: #00FFFF}

Add a background color to the accented text in search result:

.sqs-search-container-item em {background:#e5f5f6}

Add a border to the search result image:

.sqs-search-page-item .sqs-main-image-intrinsic {border: 3px solid #000}

Check out insidethesquare.co/borders to learn about even more options!

Change the color of the “No Results Found” notice:

.sqs-search-page-notice {color: #FFFF00}

Change the font size of the search Result Title Text:

.sqs-search-container-item .sqs-content .sqs-title {font-size: 2rem}

Add a side border and some padding to the search result excerpt:

 .sqs-search-container-item .sqs-content .sqs-content {padding-left: 1rem; border-left: 2px solid #e5f5f6}