Adding a search bar code is quite complex. But, we got your back to simplify the task so that you won’t have to scratch get and fix the uninvited bugs. Follow these 3 methods to get the Shopify search bar code. Although editing search.liquid template won’t give you the desired result, we’ll tell you some cool hacks to make your search bar as awesome as you want.
Add Shopify search bar code in less than 2 minutes
Methods to get Shopify search bar code
A search feature is crucial for a Shopify store owner. And, we understand how hard it is to navigate through the bulky menu in order to get the desired product sliding through various categories. But, we know what you are thinking. It’s somewhat like, “Hey Expertrec team, why don’t you tell me the easiest solution to add the Shopify search bar to my store?” Alright! Presenting you 3 quick and easiest solutions ever.
Install Expertrec smart search app
- Install Expertrec smart search bar from the Shopify app store and click on Add app.
- Click on Install the app -> Start the free trial.
- Refresh your Shopify store.
That all it takes to add a custom search bar. Pretty fast. Right? See, a Shopify search bar can include snippets to include a search bar anywhere in your theme. Without a search bar, any visitor who could have been a potential customer will be calculated in the bounce rate of users. Well, if there is a proper search bar for your listed products to be searched, instead of simple horizontal or vertical categories, a header search bar looks promising. So, you can customize almost everything by surfing through the UI customization section in the Expertrec dashboard. Still, if you want to get “Shopify search bar code” then here let’s move on to the second method.
Copy Shopify search bar code from Expertrec dashboard
1. As always, first log in to your Shopify store and access the admin panel.
2. Click on Online Store -> Themes -> Actions ->Edit code.
3. In the layout folder, select the theme.liquid file. You will see a section of code on the right. We will add Expertrec code here to get Shopify search analytics.
4. Now, click on Expertrec Custom Site Search and log in with your Google account.
5. Enter your Shopify store URL and click on next to proceed.
6. Click on the Code section in the Install menu of the dashboard. Copy the code and the HTML tag.
<!--Shopify search analytics - Expertrec(.js - head)-->
<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);
})();
</scrip>
<!-- Shopify search analytics - Expertrec(HTML tag - body)-->
<ci-search></ci-search>
7. You will get your API key once you log in to the Expertrec dashboard. Paste the code in the <head> section of theme.liquidand the HTML tag in the <body> section just between the two <div>. In the end, save the code.
Refresh your store.
You have successfully added the Shopify search bar code. All it needed was to copy the code from the Expertrec dashboard and paste it into the Shopifytheme.liquidfile. Guess what? There’s one more way to add the search code. Let’s move onwards.
Shopify search code using Google custom search engine
Note that it absolutely free but the major drawback is that it shows a lot of ads. Although ads are not good from the visual point of view, the issue is you may lose your precious customers by just a single click on these ads. It is not recommended if you are thriving for a long-term genuine store buildup. Still, if you want a search bar on a Shopify store that is made just for testing purposes, then Google custom search engine is a perfect fit. Here are the steps to get Google custom search engine code:
1. Click on https://cse.google.com and click on Get Started to proceed further.
After it, enter the URL of your website.
2. You can also name your CSE. Click on create.
3. You will be able to access a new search engine for your website. Click on Get code.
4. Copy the code.
5. Go to the Shopify admin panel. Click on Actions -> Edit code.
6. In Layout -> theme.liquid -> <body>, copy the code between the two <div> as shown below:
7. You have added the Google CSE right away.
Open your website, and it would show something like “enhanced by Google” at the top left in the Google custom search bar.
FAQ
How do I customize the Shopify search bar?
If you are using the default Shopify search bar, then click on Online store -> Themes -> Edit languages. In the search bar type “search” and press Enter. Here, you will get the options to change checkout & system notice tags, page titles, and page titles search results. Just below it, there’s a General/Search section where you can give a title, set placeholder text and enter submit and close search values. You can do the basic customization in this section but note that there’s no option to actually change the UI of the default search bar without having some coding knowledge.
The hard way is to make changes in search.liquid the file and scratch the head while fixing bugs.
But, here’s the catch, if you want to customize your Shopify search bar in the easiest way possible, then all you need is to install the Expertrec smart search bar either by adding the app from the Shopify app store or by copying the Shopify search code from Expertrec dashboard. From there, go to the UI customization section and make changes with a single click. If you want to integrate an existing search bar with the Expertrec smart search bar functionalities, then you can raise a support ticket and get a highly customized search bar with a 14-day free trial.
How can I enable Shopify product search?
The issue with installing a custom search bar is that the Shopify store shows all the results on the search result page, no matter if it merely calls for products, blog posts, specific pages. It’s common why merchants want to restrict their search result of products only. It is quite obvious that you can make changes in search-form.liquid snippet to get the desired result.
Whether your Shopify product search is not working or there’s any issue therein, you can always refer to the following blog. Make sure you add a bookmark to get the result with a single click.
Fix Shopify product search not working in less than 5 minutes
I hope you already guessed the second way to enable Shopify product search. All you need is to install Expertrec smart search bar and it will show only the products on the search result page.
How do I filter products in Shopify?
In order to add facets and filters in the Shopify search bar, install Expertrec smart search bar. In the dashboard, select facets and filters, rename them and update the settings. Now, refresh your Shopify store and perform a search query. You will get the options on the left-hand side to filter the products according to say, product availability, collections, price, ratings, or tags. Note that the default Shopify search bar gives only one option to filter products, i.e., according to the tags.
Adding filters will manipulate the search results and the users will get the exact product they are searching for. The important thing is that by adding a filter option in the search results page, you have an extra edge as it will save website users time and they get a narrow result.
The next benefit is that if a website user is using a filter option on a Shopify store, it clearly indicates that the shopper is sure about what he/she exactly needs. He/she have the image of that particular product, so if your store suffices that need, you have a new customer who is going to visit your store first without going to the other websites. It will implant a good Shopify store image in visitor’s mind which is really crucial for brand positioning and long-term growth. There are high chances that the shopper will also refer some other persons looking for the same product.
How do I change the Shopify search bar settings without coding?
You can install Expertrec smart search bar and go through the dashboard to change the search bar settings. Unlike the default Shopify search bar, the Expertrec smart search bar is highly customization and you can reach out to the support team if any issue occurs. The best part is that it gives instant search, i.e., search-as-you-type to save typing time. It supports autocomplete, autosuggestions, offers unlimited AJAX search, posses facets and filters options along with proving search analytics.
To change the Shopify search bar settings without coding, go through the Expertrec dashboard. You can raise a support ticket to reach out to the Expertrec tech team for any issues. On the other hand, to enable or disable any functionality like voice search or autosuggestions, all you need is to toggle it off in the dashboard. It’s a matter of few seconds to make relevant changes in your custom search bar.
If you are using the Google custom search bar, then you can go through the UI customization section. Since it possesses major downsides like ads, limited searches, unavailability of voice search, etc., it is recommended to use a good custom search bar.
So, install Expertrec smart search bar and avail a 14-day free trial.
Add Shopify search bar code @ $9/month
