How to Add a Squarespace Search Bar in Your Header (2025)
Have you ever been on the homepage of a website and not known where you needed to go?
A search bar in the header means you can find the exact page you’re looking for in just a few clicks.
Here’s an interesting fact: Did you know that people who use site search are twice as likely to convert than those who don’t?
If you want to add a search bar to your Squarespace site’s header, you can’t do this natively in Squarespace. However, you can add one with Spark Plugin’s Squarespace search plugin!
Just add to your site, and when visitors search for a keyword, the search bar will present all the relevant results.
Read on and see how to get started in just three simple steps.
The takeaway
A search bar makes it easier for your site visitors to find what they need quickly
You can’t add a header search bar natively in Squarespace 7.1, but you can add one with Spark Plugin
The Spark Plugin Squarespace search plugin comes with several customization options, so you can make your search bar match the look and feel of your site
Alternatively, you can add a search block to your page, or encourage site visitors to add /search to the URL of your site
How to add a Squarespace search bar using Spark Plugin
Step 1: Add Spark Plugin to your site
(If you already have Spark Plugin on your site, you can skip this step!)
Take the code snippet you received when you purchased your Spark Plugin plan.
Go to Website, Website Tools, and Code Injection, and paste the code snippet into the header box. Click Save.
Click the small pink ‘K’ icon in the top-right-hand corner of your Squarespace site to access the Spark Plugin menu.
If you don’t see the icon, log out of Squarespace and log back in.
Step 2: Turn on the Squarespace search bar
In the Spark Plugin menu, select Header.
Then, toggle Search bar from off to on.
Your search bar will magically appear in the header!
Step 3: Customize your search bar
While you can leave your brand-new Squarespace search bar as is, you have the option to customize it to meet your needs.
When you turn the search bar on in Spark Plugin, some customization settings will appear in the Spark Plugin menu. Let’s run through them:
Search style: Choose from a small bar, a bar which takes up the entire length of the header, or a magnifying glass icon that you can click on to access search
Mobile placement: You can also choose how your search bar looks on mobile devices. Choose from a small bar, a full bar, or an icon.
Icon color: Change the color of the icon
Text color: Choose the color of the text which shows when the user types a query
Placeholder text color: Choose the color of the text which appears in the bar before the user types a query
Border color: Choose the color of the border surrounding the search bar
Border color (active): Choose the color of the border surrounding the search bar when the user clicks into it and types
Bar color: Choose the color of the search bar
Result background color: Choose the background color of the results
Icon thickness: Change the thickness of the icon
Placeholder text: Change the text which appears in the bar before the user types a query (the default is ‘search’)
The customizations will update in your search bar when you select them, so you can see what changes you’ve made.
When you’re happy, click out of the Spark Plugin menu, and you’re good to go!
Squarespace search bar: Frequently asked questions
I’ve just created a new page—how long will it take to appear in search?
Our Squarespace site plugin uses instant indexing, so it will appear in the search bar as soon as it is published!
Which search style is best?
It depends on your needs and site style.
The icon is great if you want a minimalist look
The small bar is classic and traditional
The full-width bar is ideal if you have a large site and want to encourage site visitors to search for the page they need!
Are there any other ways I can add a search bar to my Squarespace site?
You used to be able to add a header search bar if you used a version 7.0 template in the Brine, Farro, or Syke family, but not if your site is on version 7.1.
There are a few other things you can do if you’re using Squarespace version 7.1 and not in a position to use Spark Plugin.
You can add a search block to your page, which you can use to return results from across your site, or just from the page the block is on.
Your site visitors can also access a search bar by adding /search to the URL of your site. For example, in the case of Spark Plugin: www.sparkplugin.com/search.
You can add a link to this search in your header bar for site visitors to use.
What other elements can I add to my header using Spark Plugin?
Spark Plugin has many different options for customizing your header bar. You can:
Now you know how to add a handy search bar to your website using the Squarespace search plugin! Why not give it a try today?
