The ultimate Guide for Fixing Squarespace Search

Last updated: March 2025

You offer lots of cool content on your Squarespace site – congrats! Now how do you make sure your visitors can also find it and appreciate all the hard work that went into it?

The answer is: with a powerful and well-implemented search function for your site! Unfortunately, Squarespace’s native search feature is somewhat limited, but fear not: we have collected a few tips to help you make the most out of it. Most of the tips work whether you use the default search feature of an advanced search plugin like Monocle.

Fair warning: There is some custom code involved. We will try to keep it as simple as possible and explain what we do, and why we do it, as we go along.

How to Move the Squarespace 7.1 Search Bar into the Header / Navigation Bar

One of the main requests many Squarespace users have is: How the heck do I get a search bar in the navigation bar at the top of my page? Squarespace 7.1 natively does not offer this feature anymore, so we have to help out with some manual coding.

As is usually the case, there are more than one way to make this work. We’ll show you the easiest way here, and give you a link to a more complete solution for all you nerds in the making.

The Quick and Easy Way

1. Put a search bar in the Footer section. We need this, because we are going to move it from there up to the header.
2. Open Pages -> Website Tools -> Code Injection and paste the below code into the “FOOTER” section. Note that you need at least the Squarespace “Business” plan to be able to access this.
3. Click “Save”

Code to paste:

<!-- Beginning of search bar move section /-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
	$(document).ready(function(){
    	$('footer.sections .search-block').appendTo('div.header-nav');
	});
</script>

<style>
div.header-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: right;
  	gap: 20px;
}
</style>
<!-- End of search bar move section /-->

That’s it! If you want to play around with the placement, you’ll have to adjust the CSS code in the <style>-block. That’s a bit more than would fit into this post, but the Squarespace community is full of people who are happy to help.

The Complete Way

If you want to really understand what’s going on and have more freedom in styling the search bar, we recommend you check out this amazing article by Will Myers that will also teach you some coding along the way.

How to Change the Placeholder Text in the Search Bar

By default, the Squarespace search bar just says “Search” as the placeholder text. A bit bland! There are many reasons why you might want to change that: Maybe you simply want to adjust the wording to your offering, or maybe your site uses a different language altogether. We opted for a simple “Search my Site”:

Here’s how you do it:

1. In your Squarespace interface, go to Pages -> Website Tools -> Code Injection (note you need to be on the Squarespace Business plan in order to do this)
2. Put the below code into the “FOOTER” section. Replace “Search my Site” with whatever you need.
3. Click “Save”

Here’s the code you have to paste:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const searchFields = document.querySelectorAll('.search-input');
    searchFields.forEach(input => input.setAttribute('placeholder', 'Search my Site'));
  });
</script>

Note that this trick will only work on the Squarespace search bar, not the standalone search page that you can find under yourURL.com/search.

How to Change Colors in the Search Bar

Now that we’re moving the search bar to the wildest of places, we sometimes run into trouble with its default gray font:

To change the color of the placeholder text, simply add the following to your Custom CSS in your Squarespace interface under Pages -> Website Tools -> Custom CSS:

.search-input::placeholder {
  color: white; /* Change this to your desired color */
  opacity: 1;
}

The “opacity” line is optional, but can help with certain setups.

If you want to change the search bar’s background color, paste the following code into your Custom CSS field:

.search-input {
  background-color: lightgray !important; /* Change this to your desired color */
}

Pro tip! There are many other characteristics of the search bar you can change the same way (using custom CSS), such as

• border-radius to make the bar more round or square or
• border to change the line thickness

Make your Member Sites Searchable

Bad news first: Squarespace’s own search simply doesn’t find member content. Thankfully, there are at least two methods to still make your member content searchable.

Solution 1: Squarespace Workaround

In a recent forum post on the Squarespace forum, user csgersbeck posted a possible solution:

if you keep the monetized blog/course/video collection in your “unlisted” section, or anywhere that’s not in a member site that’s behind a paywall, and then add a paywall separately to that blog/course/video collection, all of those paywalled videos/blogs/courses will then show up on search engines, safely protected by the paywall.

However, note that you still have to use a third party search engine such as Google to search the content this way – Squarespace still won’t find it. Also, the pages themselves are still public. You can however use this trick if you want to only hide videos behind the paywall.

Solution 2: Use Monocle Search

Our Monocle Search plugin has native support for searching Squarespace Member Site content, using a search bar or our slick search overlay. It’s set up in minutes and you don’t need a credit card to try, so simply give it a shot. You can find a quick guide for how to set this up in our Guide section.