How to customize your search bar & search results page in Squarespace
In this blog post, I wanna talk about something that's honestly a bit underwhelming on our sites: the built-in search feature. 😬
Don't get me wrong – I love that Squarespace includes search functionality, even if it isn’t the best at least it’s still there. But those design settings? Just not that awesome. The good news is we can totally transform it with some simple CSS tricks, and I'm going to walk you through it step by step.
Why Bother Customizing Your Search Bar?
Fair question! Here's the thing – when visitors use your search bar, they're actively trying to find something specific on your site. It's a prime opportunity to make your brand shine through even the most functional elements.
Plus, these little design details really add up! In my experience, it's these small touches that make a site feel polished and uniquely yours. In the video below I’ll share some of my favorite code tricks. You can also find more details - and the copy and paste codes - under the video.
Let's Get Started: Adding a Search Bar
First things first, let's make sure you've got a search bar on your page:
Hit "Edit" on your page
Choose "Add Block"
Grab that search bar and place it where you want it
Super Important Tip: Squarespace won't let you make the search bar take up just one grid space – it needs at least two. Depending on your font size, this might create an awkward gap at the bottom of the block.
No worries though! You can fix this with vertical alignment. Just make sure to check how it looks on mobile too, since you can set different alignments for desktop and mobile.
What Can You Customize in Squarespace?
When it comes to the built-in settings, we don't have much to work with. You can choose between dark theme or light theme, which basically just changes the search icon. That's it!
For everything else – borders, colors, focus effects – we need to dig into custom CSS. Don't worry, I've got you covered with copy-paste codes!
Adding Your Custom CSS
Ready to make some magic happen? Head over to:
Pages → Website Tools → Custom CSS
This is where all our customization happens!
Cool Things You Can Do to Your Search Bar
1. Give It a Custom Border
The border is the perfect place to add some personality. With this code below, I want you to play around with the border thickness (try 3px, 5px, or go wild!) the border style (solid, dotted, dashed, or double) and most importantly - the color (update lightblue match your brand colors, and yes HEX color codes are great for borders)
.search-input {
border: 3px solid lightblue !important;
}2. Soften Those Corners
The default 90-degree corners can feel a bit harsh. Let's soften them up with a little CSS. Want perfectly rounded edges like a pill shape? Crank it up to 50px! Just want a subtle softening? Stick with 5-15px.
.search-input {
border-radius: 15px;
}3. Make the Focus State Pop
You know that moment when someone clicks into the search bar? That's the "focus state," and Squarespace adds an outline by default. But we can make it way more fun:
.search-input:focus {
outline: 5px solid lightblue !important;
}Not a fan of outlines? No problem! You can remove it completely:
.search-input:focus {
outline: none;
}Or my personal favorite – add a subtle glow with a box shadow:
.search-input:focus {
box-shadow: 0 0 8px lightblue;
}4. Style the Text Inside
Don't forget about the actual text! You can customize the brand font, color, and size, just to name a few ideas.
.search-input {
font-size: 20px;
color: blue;
font-family: serif;
}But Wait, There's More: The Search Results Page!
Once someone searches for something, they land on an automatically generated search results page. Most people forget to customize this part, but not us!
1. Style the Results Page Search Bar
This search bar has a slightly different code name so we need to restyle it to match the search bar on a regular page with CSS, like this. Don’t forget to update the values, like the color, to match your site:
<p>Hello, World!</p>.sqs-search-page-input {
border: 5px solid lightblue !important;
border-radius: 50px;
color: blue;
}2. Make Those Search Terms Pop
When Squarespace finds the term someone searched for, it italicizes it. But we can make it stand out WAY more with a code like this, so it’s easier for your visitors to spot what they searched for.
.sqs-search-container-item em {
background: lightblue;
}3. Fix That Super-Wide Results Page
I don't know about you, but I find the full-width search results page a bit overwhelming. Let's slim it down with this code. Pro tip: That margin:auto part is super important – it centers everything on all screen sizes!
.sqs-search-page {
width: 90% !important;
margin: auto !important;
}4. Pretty Up Those Result Images
One last touch – let's make those result images match our style with this code below. Want circular images instead? Just use border-radius:50% – it works perfectly with the 1:1 ratio images!
.sqs-search-page-item .sqs-main-image {
border-radius: 15px;
}Let's Put It All Together!
After applying all these tweaks, your search feature will feel completely custom – like it was designed specifically for your brand (because now it is!). The best part? It takes just a few minutes to implement these changes, but they make a huge difference in how polished your site feels.
Copy the whole code* below and update those values, then add it to your site by navigating to Pages > Website Tools > Custom CSS. *This code has outline set to none for both search bars.
/* Search Input Styling - Main Page */
.search-input {
border: 3px solid lightblue !important;
border-radius: 15px;
font-size: 20px;
color: blue;
font-family: inherit;
}
/* Focus State - Main Page */
.search-input:focus {
outline: none !important;
box-shadow: 0 0 8px lightblue;
}
/* Search Input Styling - Results Page */
.sqs-search-page-input {
border: 5px solid lightblue !important;
border-radius: 50px;
color: blue;
}
/* Focus State - Results Page */
.sqs-search-page-input:focus {
outline: none !important;
box-shadow: 0 0 8px lightblue;
}
/* Highlighted Search Terms */
.sqs-search-container-item em {
background: lightblue;
}
/* Results Page Width */
.sqs-search-page {
width: 90% !important;
margin: auto !important;
}
/* Results Images */
.sqs-search-page-item .sqs-main-image {
border-radius: 15px;
}Why I'm Obsessed With These Little Details
Here's the thing – visitors might not consciously notice your perfectly styled search bar, but they'll definitely feel the difference. These small touches create a cohesive, professional vibe throughout your site.
It's like when you walk into a really well-designed coffee shop. You might not immediately think "wow, they chose great doorknobs!" But all those thoughtful details collectively create an amazing experience.
These little touches are what make your website feel truly yours. So go ahead and have fun with your Squarespace site – that's what it's all about!
