How to add Search to your 7.1 site navigation

Table of Contents Show

Site searches are REALLY valuable things to have, especially when the viewer is a new visitor and doesn't know where anything is yet.

So it's a huge pet peeve of mine when I find a new website I'm unfamiliar with and realize there's no way to search it for something specific I'm looking for.

Bonus? Anything that your audience searches for on your site, shows up in your Squarespace Analytics. That can be a massive clue to figuring out what people are looking for, wanting, reading, buying, etc. most often, within your own website.

That site-search metric is separate from the searches people perform on Google, that bring them to you. With a site-wide search, you now have 2 sources of info for this!

I love version 7.1 of Squarespace. That’s why I migrated my entire site from 7.0 to 7.1 in 2020. It has so much more flexibility with the things that matter most (to me, personally).

Want to know how I moved ALL my content? Find out over here.

That said, both versions of Squarespace have different pros and cons. Neither is inherently better than the other; it’s just a personal choice of what will work best for you, or what has the most options that are most applicable for your business?

Don’t know which version to pick? Details this way!

One of the more frustrating things I’ve found about 7.1 is that it lacks the capability to place a search icon or bar anywhere in the header, and no obvious way to add one in your footer.

That doesn’t mean it can’t be done though, it’s just not built in quite yet. As Squarespace continues to add new features to 7.1, since that’s clearly their focus now, I’m sure it’ll be added at some point. Also because us Circle Members are telling them to. 😂

Here’s one easy, code-free way to add it to your site navigation, and one coded plugin resource. Take your pick based on what you’re most comfortable with editing on your site!

How to add a search to your footer in Squarespace, without custom code

This method is by far the easiest and you can add it 2 ways!

USE THE SEARCH BLOCK

Don’t forget about this powerful block! You can choose to add any of these blocks to any section, except the Header.

Since the Search block isn’t at the top of the block’s menu with other elements you probably use most frequently, you may have missed it. So here’s how/where you can find it in the ‘add new block’ menu:

Scroll through the add-block options menu & find it near the bottom

OR use the search bar within the add-block menu to filter the list & find it quickly.

Now that you know where it is, you can edit your footer from any page, and add that block there. The styling options are minimal (either light or dark icons, basically) but you can also choose whether that particular search bar only searches content on a specific page, or site-wide, and whether you want it to pull up quick results in a list underneath the block, or not.

If you’d like to be able to style it further, you can target that Block ID# with some Custom CSS and a great place to go for that is Ghost Plugins.They have 4 options, totally for free!

LINK SOME TEXT

The next method is even easier! And it works ANYwhere you can add a link.

Every Squarespace website comes with a default, built-in search page. It’s not a pretty one, with literally nothing on it except for the search bar, but it does come with one automatically. To find it? Just type in your domain and add /search to the end.

For example, my search page is:
www.launchthedamnthing.com/search

Well? What are you waiting for. I’ll pause for a sec so you can go look! …. See? I told ya! 😁

So, that means you can literally add a new page link to your Header Nav (or footer nav) labeled “Search” which links to your default search page! And that process would look like this:

Or instead of typing the word “Search” you could use a magnifying glass emoji (🔍 or 🔎) if that fits your brand, so it takes up less space and still looks enough like a search icon.

I suppose I should also say here, that you can create your own Search page if you wanted, using the Search block and whatever design you want. However, you won’t be able to use that /search URL slug for this custom search page, since it’s taken by your default search page. (To my knowledge, you can’t override that.) So if you choose to do this, know that your URL slug would have to be slightly different, like: /mysearch or /search2 or /job-search –whatever fits the situation.

Now, if you want the full search block in the Header that requires some code, so let’s hop on into that next.

How to add a search block to your Header in Squarespace 7.1

I’m not a developer, but thankfully there are plenty of them out there who want to help people like us with things like this. 😄 And Will Meyers is one of the better ones. His shop offers some unique options, and offers great support should you need it.

I’ll let Will take-over from here since it’s not my original content & I don’t want to take credit for his work. Check out his blog post, “Adding a search bar to your Header in Squarespace 7.1”

In it, he gives you all of the code snippets, tells you where to put them & in what order, and also provides several options to style the newly added block. All for free! 🙌🏻

Remember, this mostly applies to version 7.1 of Squarespace, since some versions of 7.0 (like the Brine family, for example) have this capability built into the native Site Styles options.