Replace Your Squarespace Search Bar with Monocle

If you've been feeling frustrated with Squarespace's native search block, you're definitely not alone. It's been ages since they've meaningfully updated it. Quite frankly, it leaves much to be desired. For those venturing into the world of third-party search plugins, options like Google site search are often ugly, while others come at a steep price. I've got good news for you: there's finally an easy, effective, and affordable solution. 

The Problem with Squarespace Search

Let's be honest about how lame Squarespace's search function can be. To wit: I'm currently working on a client site. They have an event called "Swim the South" that appears in their navigation and should appear in site search. However, typing "south" into the Squarespace search bar leads to a disappointing "No results found" message, even though there is a dedicated page for this event. Clearly, there's room for improvement. 

Monocle Site Search: An Overview

Meet Monocle, a fast, forgiving, and flexible search plugin for Squarespace. Its speed is impressive, and it's typo-resistant, offering an adaptable design that can be activated from anywhere on your site using a simple /search link. It starts at a reasonable £9 a month and they offer a trial without requiring a credit card.

Setting Up Monocle Search On Your Squarespace Site

To get started, sign into Monocle and initiate your 14-day trial by entering your site's URL. You'll get a customized script tag to add to your site's header. Here’s how you do that: 

1. Navigate to Pages > Website Tools > Code Injection. 

2. Insert the script into the Header Code Injection area. 

3. In your navigation, add a new link named "Search" pointing to "/search". 

When you click this nav item, the Monocle search overlay opens. It's fantastic.

Configuration Options for Monocle

Monocle offers numerous customization options to enhance the look and functionality: 

• Design Settings: Control background blur, overlay color, and accent colors. 

• Search Results Settings: Decide how much context to display and whether to include or exclude certain pages. If you have a Member Area, they've got the ability for members to search that as well (in beta).

Turning Your Header Search Link Into An Icon

Revamp your search link from boring text to a clean icon. Here’s how (see the video above for a demo of this process):

1. Change the default "Search" text to a 🔍 emoji - if that fits with your site style, go non further! If not, leave it as a fallback. 

2. Add the following HTML code to your site Header Injection, and the CSS code to your site's Custom CSS:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    // Select all potential search links in the header for both desktop and mobile
    var searchLinks = document.querySelectorAll('header a[href="/search"]');
    searchLinks.forEach(function(link) {
      link.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="bi bi-search" viewBox="0 0 24 24">
          <path fill="currentColor" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"/>
        </svg>
      `;
    });
  });
</script>

/* Style for the search icon header */
  #header a[href="/search"] svg {
  fill: currentColor; 
  width: 24px;        
  height: 24px;       
  vertical-align: middle;
}

/* Style for the search icon in mobile menu */

.header-menu-nav-item a[href="/search"]{
transform: scale(1.4);   
margin: 10px 0px 0px 0px;
}

You can replace the icons with another that matches your branding. I get my SVGs from svgrepo.com. Just remember to change the SVG's color code to currentColor to integrate with your site's color scheme.

Align these icons with your site design through simple CSS tweaks, ensuring both desktop and mobile menus look polished. 

Alternative Options

Add Squarespace's native search to your header

If native site search works fine for your site, Will Myers has 2 great tutorials on how to add a search icon or search bar to your site header that uses the native search functionality.

Elfsight

For a similar price, Elfsight offers additional customization options like a floating search bar. Be aware, however, that their tiers include page view limits, with the cheapest tier stopping the widget from functioning once you've exceeded 5,000 page views. 

Try Monocle Free

Ready to take site search to the next level? If Squarespace’s search leaves you wanting more, give Monocle a try. It's a cost-effective and visually appealing solution to enhance people's experience on your site. 

Happy designing!

---

More Articles