Adding A Search Icon To Your Site Header

Free

Apr 4

In this tutorial, we’ll add a search icon to our site header and mobile menu using some javascript. This is an update / remix to my tutorial on adding a search block to your header.

Video

Usage

Copy the HTML code below into your Settings » Advanced » Footer Code Injection area. Then copy the CSS below into your Design » Custom CSS area.

Customize

Change the stroke-width property in the CSS to adjust the thickness of the search icon
Change the width and height properties to adjust the size of the icon in your mobile menu
Replace the searchIcon variable, between the backticks, with a different SVG to create a different icon.
Icon came from Orion Icon Library

Note
Squarespace have recently made some changes which now require the ‘Social Links’ element to be switched on in the Header Settings in order for the Search Icon to display within the Mobile Menu.

The Code

  
<!-- Search Icon In Header Code from Will-Myers.com-->
<script>
  (function(){
    // Icon from Orion Icon https://orioniconlibrary.com/
    let searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Search</title>
<desc>Search This Website</desc>
<path data-name="layer2"
fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M39.049 39.049L56 56"
stroke-linejoin="round" stroke-linecap="round"></path>
<circle data-name="layer1" cx="27" cy="27" r="17" fill="none" stroke="#202020"
stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></circle>
  </svg>`;

    let searchEl = `<div class="search-icon header-actions-action--social header-nav-wrapper">
<a class="icon" href="/search" onclick="handleSearchClick(event)">${searchIcon}</a>
  </div>`;

    let mobileSearchEl = `<div class="search-icon header-menu-actions-action header-menu-actions-action--social">
<a class="icon" href="/search" onclick="handleSearchClick(event)">${searchIcon}</a>
  </div>`;

    // Add click handler to window scope
    window.handleSearchClick = function(e) {
      e.preventDefault();
      window.location.href = '/search';
    }

    // Insert desktop search icon
    let referenceEl = document.querySelector(".header-actions");
    if (referenceEl) {
      referenceEl.insertAdjacentHTML("afterbegin", searchEl);
    }

    // Insert mobile search icon
    let mobileReferenceEl = document.querySelector('[data-folder="root"] .header-menu-actions');
    if (mobileReferenceEl) {
      mobileReferenceEl.insertAdjacentHTML("afterbegin", mobileSearchEl);
    } else {
      const mainRoot = document.querySelector('[data-folder="root"]');
      const newElement = document.createElement('div');
      newElement.className = 'header-menu-actions social-accounts';
      newElement.innerHTML = mobileSearchEl;

      mainRoot.firstElementChild.after(newElement);
    }
  }());
</script>
  

  
/**
* Search Icon in Header Styles
* From Will-Myers.com
**/
//Search Page Styles
.sqs-search-page.sqs-search-page-content::before {
  content: "Search";
  display: inline-block;
  margin-bottom: 34px;
  font-size: ~"calc((3 - 1) * 1.2vh + 1rem)";
}


.search-icon * {
  stroke: currentColor;
  stroke-width: 4px;
}

// Desktop Search Icon
.showOnDesktop {
  display: flex;
  align-items: center;
}

// Mobile Search Icon
[data-folder="root"] .search-icon .icon {
  width: 28px;
  height: 28px;
}
  

We often want to provide some search functionality on our websites to make it easier for people to well… search. And it makes a lot of sense to have this functionality in a place where it’s easily accessible, like the header. Unfortunately, Squarespace doesn’t provide a native way to do this, so in this tutorial, we’re going to build something to solve this problem.

Ideally, having a search bar directly in the header is what we would want. Users could search for anything on our website from any page. I’ve built a tutorial that shows how to add the a search bar to the header, but there are a couple problems with it. First, if you have a lot of items in your header, like social icons, CTA button, and a cart, then you add a search bar, the result is not very eloquent.

Second, sometimes it just doesn’t work at all — especially on mobile. It’s just kinda janky.

So in this tutorial, I’m going to provide an alternative to our search problem, I’m going to teach you how to create search icons that link to a built-in search page.

A Quick note about the Squarespace Search Functionality
Squarespace Search Functionality has been notoriously hard to work with for years. I’ve encountered it providing inconsistent results before, oftentimes when typing in the same search parameter moments apart. Unfortunately, there is very little we can do to improve the search functionality. With that said, it is moderately more helpful than hurtful to have a search function. So I still believe this tutorial and the search functionality relevant.

The Search Page

Every Squarespace website has a built-in search page, just type in your domain and add “/search”. For example, the built-in search page on my website is at will-myers.com/search. This is the page that we’re going to be linking too.

Your unique search page is where we will be linking our search icon to.

It’s pretty bland the way Squarespace has it also, so I’ve add some code so that you can add a header to that page.

Adding the Icon

Next, we need a search icon in header that links to that page. We could just add a link in out Main Nav with the URL of /search, but this is limiting because we can’t use icons.

What I’d like to do is add in a Search Icon near the CTA & Social Links area of the Main Nav. This would require creating additional HTML and injecting somewhere into our header. Anytime you want to inject HTML onto your website is a great reason to reach for using Javascript.

The below Javascript is generally how you would create an HTML link and then inject it somewhere onto your website. See below for the final version of the codepen that I used to explain what’s happening in the tutorial video.

See the Pen Untitled by Will Myers (@Will-Myers) on CodePen.

Using this general structure, we can add in our Search Icon as the variable were injecting into the HTML and then adjust the .insertAdjacentHTML() method to precisely place our element within the HTML.

FYI, I used Orion Icon Library for the Search Icon I choose, but feel free to replace that SVG with whatever you want.

Once you repeat this same process for your mobile menu, we’re all set!

Styling the Icon

You might be thinking Images would be easier to deal with than this SVG Icon. The problem with images is that they are static, they can’t change colors and sizes if your header changes colors or sizes. Additionally, SVG are much smaller size than images, so they won’t slow your website down at all.

I’ve setup some CSS variables (Custom Properties) in the CSS to allow you to easily control the color and size. I’d recommend keeping the color as the “currentColor” property as this will keep the icon color the same color as the other links in your header, no matter which color them you use.