Here’s the Shopify search code to add a search bar to your Shopify store. Enter your API key by signing in to the Expertrec dashboard with your Google account. (It’s all FREE)
<script>
(function() {
var id = 'Your_API_Key';
var ci_search = document.createElement('script');
ci_search.type = 'text/javascript';
ci_search.async = true;
ci_search.src = 'https://cse.expertrec.com/api/js/ci_common.js?id=' + id;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ci_search, s);
})();
</script>
Get Shopify Search Bar For FREE (without learning code)
How to Get Shopify Search Code for free: 3 Ways Explained
Shopify search code follows finding the code. For this, you can easily run the find command by clicking “Command + F” on Mac or “CTRL + F” on Windows. Getting a search bar at the top will help you to find the exact query as searched. But, here’s the fact, we all are not a coder. So, let’s dive into adding a Shopify search code by using three methods:
- Using Expertrec Smart Search App
- Copying Code from Expertrec Dashboard
- Using Google Custom Search
1. Using Expertrec Smart Search bar
Expertrec Smart Search App is listed on Shopify App Store. All you have to do is install the Expertrec Shopify Smart Search App by following the below method.
i. Click on https://apps.shopify.com/expertrec-smart-search-bar to install the Search bar. Or you can go on the Shopify App store and type Expertrec Smart Search bar.
ii. Once the installation is completed, you need to enable the extension. For that, click on the Install app as shown below.
iii. Expertrec Smart Search bar offers you a 14-day free trial. The best part is that you won’t need any credit card to access the free trial. Just click on “Start Free Trial,” and you are heading on to the Expertrec dashboard.
iv. Make sure that the Expertrec Shopify search code is enabled. It will say that Expertrec Search is live on your site.
v. Congrats! You have installed the Shopify Search Code without coding at all. It is the easiest and best way to install a Shopify Search bar.
PS: Expertrec Search bar is armed with awesome searching customizability and integration with Google Analytics to track every aspect of your website. It promises zero ads and is the best option if you plan to learn code for adding a search bar.
2. Copying Code from Expertrec Dashboard
If you want to play around with the code, then try copying code from the Expertrec dashboard. Well, Expertrec already has the app listed in the Shopify App Store. Yet, if you want the other way, then here it is:
i. Click on https://cse.expertrec.com and Sign in with your Google Account.
ii. Now, you enter your website URL, and once done, go ahead to the dashboard.
iii. Copy the code from the Expertrec dashboard, and don’t forget to copy the HTML tag as shown below:
iv. Here’s a reminder. You have three options to add to the Search bar.
- HTML code
- Use existing Search Box
- CSS Selector
If you want to use your existing search box, then click on it and make sure that it is enabled.
v. Now, log in to your Shopify store and open the admin panel.
vi. Here, click on the Online Store option, and you get the Theme option at the very top.
vii. On the rightmost side, there is the Actions button.
viii. Once you click on it, a drag-down menu will appear, as you can see. Here, click on the Edit code option located at the second top from the bottom.
ix. In the Layout section, you need to click on the theme.liquid in order to add the Expertrec code.
x. As you can see on the right-hand side, there’s a lot of code out there. Paste the code in the <head> section as shown below:
xi. If you are not using an existing search bar, then you would have copied the HTML tag. Now, paste that tag into the body section as shown below:
xii. Save the code.
xiii. Click on that eye icon to preview your Shopify store. Here, you can see the Expertrec Search Box.
Try Demo
Click on the Search bar and type a query as shown below: Expertrec Search bar will appear with in-build voice search. And, I know you already know the sudden growth of voice technology. After all, installing the Expertrec Search bar will ensure that the website visitors don’t have to strain their fingers to type the product when they can spell and get the listing.
3. Using Google Custom Search
It is a free tool to add a Shopify Search bar. All you need is to install the Google Custom Search, and that’s all. But, as you know, everything comes at a price. The same happens while installing Google Custom Search.
Unlike the Expertrec Custom Search, Google Custom Search will show ads. A lot of ads. And, it’s never a good idea to lose your precious customers by a click on these ads. Moreover, these ads can even transfer the website visitors to another website that could be your potential competitor.
Keeping these losses aside, it’s a free tool to be used while getting started. But not suitable for long-term growth. Here’s how to install GSS:
i. Click on https://cse.google.com and click on Get Started to proceed further.
After it, enter the URL of your website.
ii. You can also name your CSE. Click on create.
iii. You will be able to access a new search engine for your website. Click on Get code.
iv. Copy the code.
v. Go to Shopify admin panel. Click on Actions -> Edit code.
vi. In Layout -> theme.liquid -> <body>, copy the code between the two <div> as shown below:
vii. You have added the Google CSE right away.
Open your website, and it would show something like this (powered by Google):
Unbelievable Bonus brought up by Expertrec search bar
Expertrec search bar offers you to gain heavy control over your search bar. You can do anything and everything without needing to learn code. Here’s the list of unbelievable bonus points you have by installing the Expertrec Search Bar.
Search API
I hope you remembered the initial code that we added. There is an option to type Your_API_key. Once you log into the Expertrec dashboard, you can access your API and copy it as shown below:
It is unique to every store and thus acts as an identifier for every Shopify store.
Search settings become handy.
When you head on to the Expertrec dashboard after app installation, there are several settings to upgrade your Shopify search bar. It is all done without the requirement of the Shopify search code.
Let’s deal with the three sections of search settings:
- Weights
- Boost Fields
- Synonyms
Weights
Every search query deals with a certain algorithm to show the results. Things that you want should be at the top of the result can be customized using this option. Whenever a user enters the query, all the fields that are given preference according to their weight are handled by the Expertrec algorithm. In this way, you can get the top results in relevance with it. The results that match with the first selected fields are going to receive a higher rank.
Boost Fields
Boost fields give an extra focus to the selected query so that one can get a particular field at the top of the search results. For instance, if your Shopify store contains t-shirts of several brands. Here, you can apply this filter to “Nike” to show its result at the top. In this way, by defining your boost fields, you can give priority to some specific products over other similar products.
Synonyms
Let’s face it. Users don’t need to search for the exact query similar to your keyword. It means that if a user is searching for “yearly planner,” then he may search for “yearly book,” “planning copy,” “yearly booklet,” and so on. Here, using this synonyms feature would help you in ranking for these products too. You can easily find the trend based on search analytics and set the synonyms according to your website visitors. Most probably, their search query is going to be quite different from your one.
Customize the UI of your search bar
Customizing the user interface of the Shopify search bar deals with making changes to the search bar itself. It highlights the user-friendliness and results, filters with several additional features.
Search Layout
By default, the search layout overlays. It means that the search results are going to appear on the same page by overlaying the previous page.
On the other hand, if you want to search results on a different page, you can go for it by clicking on this drag-down option. Enter the path where you want to show the search results and also the query parameters. Make sure that you follow the guidelines of adding a ci-search-results tag in order to show the result on /different.html path as shown below:
Custom CSS Editor
As always, without learning to code, you can change the UI of your autocomplete by playing around with this code.
Field 1: In order to change the color of autocomplete,
change color in line 9 as
color: red;Field 2: In order to change the color of the description,
change the color in the line 14 as
color: green;
Field 3: At the end, change the bold text color to
color: brown;You are all set. Just click on update to save the settings and open your online store to witness the changes.
Pagination
Pagination is similar to infinite scroll. For instance, navigation means navigate through the menu, pagination means navigation through the pages. You may have hundreds of products on your online store. After some results at the top, you can go to the next page to scroll other products. That’s where the role of pagination comes into play. Even while googling, there’s an option to navigate through the pages as shown below:
In the Expertrec dashboard, you can customize the user interface of pagination by playing around with this CSS code.
Filters
Once you enable facets, you can show filters in the search results. It helps the visitors is narrowing the result page and getting the desired product at a rapid pace. For example, you can select several fields as shown below:
You can select any of the filters and can create your own.
Make sure that you update the settings so that it gets reflected in the search bar.
Miscellaneous Features
There are some other features that are as important as the ones before.
- You can enable/disable voice search by toggling the bar. (It’s ON by default)
- You can allow autocompleting by toggling the “search as you type” bar. (ON by default)
- Try enabling autofocus on the search bar.
- Search suggestions are important. (ON by default)
- You can also disable the Expertrec fontawesome to witness the fontawesome of your website.
- You can make some search conditions.
- You can also show the alternate design suggestion by enabling the toggle.
Summing it Up – Shopify Search Code
Expertrec provides the best Shopify search bar. You won’t even need to learn the code or hunt for it. It would be best to install Expertrec Smart Search bar @ $9/month and focus on building your website presence. After that, anything and everything related to the search will be handled by Expertrec.
Although the choice is always yours, you can install Expertrec Smart Search bar for free and get a 14-day free trial. The Expertrec team is always there to help you with any Custom Search Engine related query. You can reach out to them by raising a support ticket.
