How to create a minimal search bar on Squarespace with custom code

I couldn’t be more of a Squarespace fan but that doesn’t mean I don’t think there are some drawbacks and limitations. 

One of these is the search bar. Frustratingly, Squarespace offers very few options to edit the functionality and style of the search bar natively. 

The good news however is that there are ways to edit the search bar on Squarespace, creating a more minimal design, with custom code, and that’s exactly what I’ll be showing you how to do in this tutorial. 

You can add a search block anywhere on your Squarespace website. The only design options that Squarespace offers you once you’ve added your search bar are the choice between a dark or light display and whether or not you want to include a quick preview.

For some websites this is enough, but for many Squarespace designers, you’ll be looking to take your design to another level.

Watch the video

Check out the YouTube video below 👇

How to create a minimal search bar on Squarespace

In order to edit the appearance of your search bar, you need to first head to Google Chrome Developer Tools and identify the search bar. Copy the ID and paste it into your custom CSS (don’t forget to make some new lines of code before pasting it in!).

To make the appearance of your search bar more minimal, you need to add the code:

.sqs-search-ui-button-wrapper.color-dark .search-input {
border: none;
border-bottom: solid 1px lightgray;
}

This will remove the standard square border that Squarespace adds to search bars and will instead place a simple line along the bottom of the bar. You can play around with the weight of the line but I usually find that 1px is the best option.

---

📩 Join the inner circle to get exclusive code updates

---

You can also change the colour of your bottom border by adding a colour, such as a hex code, to the end of your code. 

This simple trick and piece of custom code takes minutes to add in but can make a world of difference to the appearance of your Squarespace website. 

Search bars are a website essential but that doesn’t mean you have to stick with Squarespace’s native offering, some simple code tweaks can allow you to have exactly the search bar you want. 

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?