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:

The search feature is currently unreliable, especially on Squarespace 7.1 sites. This known issue since October 2019 means that search results may not include content from the site. don’t always include content is a known issue and is awaiting a fix by Squarespace’s Engineers. In our opinion, this is unlikely to be prioritised or fixed anytime soon.
It is not possible to exclude site content from the internal search tool. The Hide Page from Search Results toggle only applies to search engine results. All content on your site is indexed internally and can appear on the results page (when it works properly).
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;  
}