How to Add a Page Search Bar on Shopify without Using an App

As a Shopify developer, you’ve probably come across a lot of different types of projects. 

And you’ll also know that a lot of them require features that are not natively offered by Shopify like a page search bar. 

Sure Shopify themes come with a search bar, but not a search bar that works only within a page, which is very helpful when you have a lot of items to display.

Here are some of its many use cases:

• A brands page (displays all the brand that the store sells)
• A glossary page
• A big FAQs or help page

Need a feature like this on your project but are not sure where to get started? 

If so, follow this tutorial. 

Note:

This tutorial does not include steps in adding the items on your page nor creating a page from scratch. 

If you are completely new to Shopify and need help with these, check the list of guides I’ve gathered for you below before following this tutorial. 

1. Adding a new template for your new page
2. Assigning a template to a page
3. Adding a list of items using Metaobjects

Step 1: Add an input field to your page template

In this step you simply need to write your html code just like the code in the screenshot. You may style it later using CSS. 

Step 2: Write your JavaScript code

1. Declare your variables.
2. Write your function. 

Important note:

Whether you are new to JavaScript or have been using it for a while, you might find the steps quite a lot, since there are many things to consider in building this feature. 

This is why I highly suggest you view the actual code sample I made on CodePen below as you follow and understand the steps on this page. 

You may also view the actual pen here.

‍

Now, there are quite a few things that need to be done for this function to run.

So, first things first let us try to understand the things that need to happen every time a user types in the input. 

1. A user types in the field. 
2. Our function needs to wait for a few seconds before responding with anything, that way, we don’t bug them with results they don’t need in the first place. This is where we use the 'setTimeout' function.
3. When there are any matches, we want to gather all of them and put them in an array and replace the currently displayed items with the items we found. 
4. If there are no matches, we want to give them a message saying something like: ‘No match found.’
5. When they clear the input, we want to put everything back to its initial state where all of the items are displayed. 

Now that we've established the things needed in the function, here are the things that it should have when you write the code:

1. First, your function needs to have a ‘setTimeout’ function when declaring a variable for the input’s value.

This is so that this does not happen on every single letter we type. It would be annoying for a user to get a response when they are not even done typing yet. 

Remember, we are using an ‘input’ event listener here. 

2. Next, in step 1 where we declared our variables, a variable for your setTimeout should have been declared without a value.

We declare our variable outside our function so that we can access it for our ‘clearTimeout.’

We use 'clearTimeout' before we even run the ‘setTimeout.’ Feel free to research more about it if you think you need to understand this concept better. 

3. Redeclare our ‘setTimeout’ variable but now with a value which is the ‘setTimeout’ code. 

So what are included in this ‘setTimeout’ function?

1. An if/else statement that checks if the input has any value. If it does, we proceed to step 2, if not, we proceed to step 4.
2. We need to delete the ‘No match found’ message. This code is on the very top for when the scenario where the user is re-typing a new query. We first need to remove it before we check for the matches because we don’t want it to display together with the suggested items. 
3. A 'forEach' method that iterates all the items in the list. Inside it, is an if/else statement that checks if the query matches any of the items. If it does, we push them into the empty array we declared.

‍Note:

We use the ‘toLowerCase’ method to avoid any letter case problems. This way, we are only checking if the characters are the same and not the letter case.

4. If the input is empty, this means 2 things: the user has not typed anything, or the user did but also erased it. In the case of the latter, we need to empty the array because obviously, there is nothing that will match an empty search. 
5. A 'forEach' method that iterates everything in the array. We then check if any of the items here matches what we have in the list and then display them.
6. A block of code for showing the error message when nothing matches.