How to Change the Text Inside the Search Bar in Squarespace
If you're using a search bar on your Squarespace website, you may have noticed the default placeholder text simply says Search.
But what if you'd like to customize that text to better reflect your brand voice or guide your visitors more intentionally?
In this quick tutorial, I’ll show you exactly how to change the text inside the search bar using a little snippet of code. You don’t need to be a developer or have any fancy add-ons—just follow the steps below.
(Pssst…don’t thank me, thank this guy 👉 Beaver Hero)
Why Customize the Search Bar Text?
The default Search placeholder is functional, but it’s also generic. By customizing it, you can:
Make your site feel more on-brand and personalized
Prompt specific types of searches (like products, recipes, or blog posts)
Create a more engaging experience for your site visitors
This small change can help improve both the user experience and the overall professionalism of your site.
How to Change the Placeholder Text in Your Squarespace Search Bar
Go to Website > Pages > Custom Code > Code Injection
Scroll to the Footer Code Injection box—copy and paste the code below (scroll down) in this box
Replace “new text” with the text you want in your search box
Select “Save” and then you will probably have to refresh the page to see the change
That’s it!
Code Snippet
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>
This page contains affiliate links
Like this post?
