Are you looking for a Shopify search bar theme? We have got you covered. Follow our descriptive guide to add a search bar for your Shopify themes.
Search Bar For Shopify Themes
The search bar is an element within a browser that will allow website visitors to search the Internet for what they want to find. For example, the picture shows the search bar in Firefox, which not only allows you to search the Internet but also customize which search engine you want to use. With websites, the search bar is a location on a web page that allows visitors to search the site. For example, a search bar is found on the top and bottom of every Computer Hope web page, including this one. With Android phones, the search bar is a location found on the home screen that allows you to search the internet.
[lwptoc numeration=”none”]
Upon clicking you will reach the installation page. Please proceed to add the app.
After the installation is complete opt for the trial by clicking on the “Start free trial” button.
Now the app has completed the trial verification and you will be redirected to the Expertrec Dashboard. Here you can turn on the search bar on your Shopify site regardless of the themes. Please turn it on and the search bar will be visible as shown in the above picture.
You can visit the store and the search bar will look like this:
Why Use Expertrec Search Bar For You Shopify Theme
Unlike the Google search bar, Expertrec has a zero-ads search bar feature. Your client will never get deterred by any other source.
One of the best features Expertrec offers is that there is no limit to the search queries your website visitors can perform. It is included with all the packages. It is a steal!
Search bars and search engines are incomplete without “Autocomplete” It is an absolutely important feature. That is why Expertrec got your back with their fully customizable search bar.
Default search bars lack intuitiveness. Premium search bars will cost your capital leaving you with a bare minimum budget. Certain search bars are incompatible across devices. That is why Expertrec has made its search bar compatible across all devices. Be it any platform or device Expertrec’s search bar will provide a fast and responsive experience.
No coding experience? No problem! Using the Expertrec Dashboard you can easily make changes. Just like playing with the Lego blocks you can use the drag and drop feature to edit all the elements possible for a search bar. Forget about looking up tutorials and spending countless hours coding a search bar only to produce bugs.
Expertrec boasts instant indexing, which means every time you have an update you can go ahead and index it right away! Your store does not need to wait for a while to be indexed only to lose web visitors during a period when a product is trending. Update and now you can index it yourself for it to reflect it on your store instantly. Now you can always update your store based on events, statistics, and demands and see the result in the same minute.
Add Search Bar In Your Shopify Theme Using Expertrec Code Snippet
To use the code you will need to access the Expertrec Dashboard. Please sign up using the button below.
After finishing signing up open your store and follow the descriptive steps below:
Open your Shopify admin panel and head to the “Themes” section.
Select the “Action” and click on “Edit Code”.
Now use the search box to find “theme.liquid” file and select it.
You will see the “<head>” tag. Paste the code below under the header tag.
<script>
(function(){
var id = '975ee0a4-2326-11e9-a342-0242ac130002';
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.getElementByTagName('script')[0];
s.parentNode.insertBefore(ci_search, s);
})();
</script>
Now for the search bar to work you have to paste a code snippet under the body tag. Please refer to the image below.
Make sure you paste the code just before the closing “</div>” tag. Save the changes and your search bar will be visible.
<ci-search></ci-search>
Don’t Be A Part Of The Herd: Stand Out With Expertrec Search Bar
If you expect your Shopify store search bar to support multiple languages you expected correct! Expertrec Shopify Search bar support multiple mainstream languages from across the world, it is 30+ if you are wondering. From German, French, Spanish to Chinese, Greek, Arabic, Tamil, and Japanese. Your global visitors will not have to stick to searching in standard English.
We are all familiar with “Hey Alexa”, “Hey Siri” or “Hey Google“. Voice searching has been seen with a steady rise because of convenience. That is why the Expertrec search bar is providing you a voice search option, unlike other search bars. Use it to stand out and to make a smoother experience for the website visitors.
A must for all software as services are their support. Expertrec does not want you to be in turmoil. That is why they offer your amazing customer support 24×7. You can reach out whenever you face any issue even if it is very minimal, by raising a ticket and they will get to you as soon as possible.
You should always try a product before buying it. Hence why Expertrec offers a 14-day free trial. You do not need to provide any card information like other services at all. You can download the app through the Shopify App Store or you can sign up directly. Once you are satisfied with the experience which is evident. You can sign up for the basic plan of $9/month with unlimited searches. Get Searching!
Storefront Search Bar For Shopify Themes
To achieve this we will use the “search.liquid” file instead of the “theme.liquid” file. The search.liquid template is mainly used to display the results from a specific page.
You need to take the templates into considerations for a search bar in a theme. Now to make a search bar for your Shopify storefront searching, we need to use action attributes set to “/search” in an HTML form. This form will need to have an input on the type of text with a name attribute that has to be set to “q”. Sounds confusing? Not at all. You can copy the code below.
<input
type="text"
placeholder="Search"
name="q"
value="{{search.terms | escape }}"
/>
<input type="submit"value+"Search"/>
</form>
The above code will look like this:
Now after you are done inserting the code above, you will notice the “{{search.terms | escape }}” . The value inside the search bar helps in keeping the value after the search form has been submitted. In case if you want to have the search bar available on all the pages of your theme make sure to place the code snippet in your “theme.liquid” file.
Highlight The Search Bar Text For Shopify Themes
It is very important to highlight the keyword that the web visitor has used for their searches. For the implementation, you have to use the highlight filter and then pass it to the “search.terms” array. If it is confusing please copy the code below.
{% for item in search.results %}
...
{{item.content | highlight: search.terms }}
...
{%endfor%}
The code above will apply a CSS class called highlight to any instances of the term in the search results, allowing you to apply a different style.
Do you want to try Expertrec in your own way using the search API? Do not worry we provide all the necessary documentation, support, and API keys. Our customer support is available 24×7.
What is a search bar nowadays if it can not do something as simple as auto-suggest. At Expertrec we offer this feature so that you can let the store visitors know what is trending and what sales might be going without them searching for it. It is a good way to pitch products effortlessly. It also helps in making the visitors aware of new or upcoming launches.
Afraid a store visitor might misspell a product only to leave? Fear not. The devs at Expertrec have given this a very keen thought only to come up with the best resolution. You do not have to worry have the backend. Let us just say Expertrec’s search bar can handle spelling errors.
