How to hide items from Squarespace search results

17 Jul

Every Squarespace site has a built-in search function that anyone can access by adding /search to the end of the domain. You can use this page as an internal tool to quickly find site content, or you can use it to create a public search page.

However, there are three problems with the Squarespace search page:

It is not possible to exclude site content from the internal search tool unless you password-protect it, or place the page within a member site. All other content is indexed internally, and can appear on the results page. Each page has a checkbox called Hide Page from Search Results but this should be named Hide Page from Search Engine Results because it only applies to search engine results.
The site search cannot be used by members to search a member site. Squarespace doesn’t index these pages.
You cannot limit the results to products - it will find images and attachments too! This is the issue that I cover in this guide - how to hide certain types of content from the results.

Hiding content types from search results

One option is to add some CSS to Design > Custom CSS, to hide certain types of content. I’ve provided some suggestions below. You can add one of more of these to match your needs.

For example to hide images, add this:

  
    /* Hide IMAGES that match search criteria */
.search-result .sqs-search-container-item.sqs-post.sqs-post-type-image.ContentItem.sqs-search-page-item {
  display: none;
}

To hide attachments (like PDFs you’ve added to your site), add this:

  
    /* Hide ATTACHMENTS that match search criteria */
.search-result .sqs-search-container-item.sqs-post.sqs-post-type-attachment.ContentItem.sqs-search-page-item {
  display: none;  
}

To hide blog posts, add this:

  
    /* Hide BLOG POSTS that match search criteria */
.search-result .sqs-search-container-item.sqs-search-page-item.sqs-post.ContentItem {
  display: none;  
}

You could hide normal pages using the code below, but that would be very unusual!

  
    /* Hide PAGES that match search criteria */
.search-result .sqs-search-container-item.sqs-post.PageCollectionData.sqs-search-page-item {
  display: none;  
}

Remember that if you want to limit the search results to one content collection, like a blog, there’s also a Search Block that you can use instead.

Note that all these CSS “tricks” are simply hiding the results from normal users. They won’t remove the search results from determined users who know how to bypass them.