Search blocks

Encourage visitors to explore your site's content with a search field.

Last updated February 22, 2023

Use search blocks to add search fields to your site. You can show results from across your site or limit results to one collection page.

How search results populate

Like any search engine, search block results are based on the quality of content on your site. To improve results in search blocks, we recommend adding descriptive and accurate titles, descriptions, excerpts, categories and tags, file names, and keyword-rich content across your site.

For a full list of site content indexed for search, visit Adding search to your site.

Add a search block

To add a search block:

  1. Edit a page or post, click Add Block or an insert point, then click Search. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. In the Content tab, you can limit results to a specific collection.
  4. Click Display to enable quick preview and style the search field. If your site is on version 7.0, click Apply to publish your changes.

In the block editor, you can choose to show results from across your site or limit results to a specific collection.

Show search results from across your site

To show results from across your site, leave Search Specific Page unchecked.

Limit search results

To limit results to one specific collection:

  1. Check Search Specific Page
  2. Select one blog, events, gallery, or store Page from the list that appears below.

Tip

 If you select Search Specific Page, you may want to note that the search block will return results for a specific collection. You can do this by adding a text block above the search block that says, for example, “Search our blog.”

Enable quick preview

Enabling quick preview adds a drop-down that auto-populates results as the visitor types. We recommend checking this to allow quicker access to search results.

Quick preview is enabled by default on search blocks. To disable this feature, click the Display tab in the block editor and uncheck Quick Preview.

Style the search field

In the display tab, select Light or Dark to customize how the search icon and field outline appear on your site. Dark is recommended for sites with light backgrounds. Light is recommended for sites with dark backgrounds.

Use the search block 

To use search blocks, place your cursor in the search field and begin typing.

If quick preview is enabled, results populate in a drop-down. The search looks similar to this:

KB Guide Image

Pressing Enter after entering text opens a page with search results. Recommended pages appear with content snippets and excerpts. Depending on the type of content, a featured image may appear.

FAQ and troubleshooting

Can I add a site-wide search block to the top of my site?

It isn't possible to add search blocks above your page content, but you can add search blocks to individual pages. If your template supports it, the header content area is a good place to add it.

You can also add a Search link to your built-in search page to your main navigation or anywhere links are supported:

  1. Create a URL by adding /search to the end of your full domain so it looks like this: http://www.yourdomain.com/search
  2. Add the URL to a web address link in your navigation or somewhere else like a text link, button block, or button in a special banner.

I can’t see the text I’m typing in the search field.

By default, the search block is set to the dark theme. If the page background is dark, the search text will blend in. The same can happen if the page background is white and the search block is set to the light theme.

To fix this, switch the theme to Light or Dark in the block’s display tab.

My search query isn’t generating results.

Try the following steps to generate search results:

If you're still not seeing results after following these troubleshooting steps, contact us, and we'll refresh your site's search on our end.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.