How to add voice search to Magento 1 or 2 website?
Introduction and our approach:
Magento is a great choice for hosting e-commerce web sites. So, first, please accept my congratulations. We will attempt to add a voice search to your Magento 1 or 2 website. We will try not to go and change the PHP code for this. Rather, I will take you through a simple way of copy-pasting some code when needed. Also, I will point to extensions when available that can make your life easier. You have come to the right place if you were looking for a complete guide on how to add voice search to Magento 1 and 2 without coding.
Let there be voice
Voice, once considered only as an accessibility mechanism, is taking over by storm. Voice has become mainstream, with smart speakers like Alexa, Echo, Google home, mini, etc creating huge penetration. Comscore survey states that one in two people with a smartphone has used voice feature and one in three engage almost every day with voice. This trend is predicted to go higher this year.
Now, the need is clear, let’s see how we can get it done and be at the forefront of this amazing technology.
What are the pre-requisites with voice search?
The most widely pronounced pattern we have seen powering voice search for our customers is that the queries are quite different. Queries from voice search tend to belong, windy, more natural than the ones that are typed in a search box. The queries which used to be “red frock” will now be “show some, ah .. frocks which are red in color”. This is because, when you type, you wait till you get the next word. In voice, you start filling the gap. Hence the search that works with voice, has to be pretty good in handling NLP (natural language processing). Alas, Magento’s search is quite bad in itself. It cannot handle searches with simple typos, leave aside a complex natural English phrase. The steps we will follow will hand off your voice queries to Expertrec search, which can handle this well. This will not only help you with a fully functional voice search, but the regular search bar is also going to get a powerful uplift in its performance.
Building your search index for your shop
- Go to https://cse.expertrec.com/
- Enter your Magento store URL.
- Enter your Magento sitemap. (optional)
- Choose your nearest data center. (optional)
- Your crawl and indexing will now begin – you need not wait.
How to Integrate this voice search to your Magento store without any plugin?
- Copy code from the app to your Magento website. (Below is a screenshot for reference).
- The code, as shown above, has 2 parts. One, that can go in the header. you can use any extension that can add a JS to your pages, or use Google tag manager too for this. The second piece of code creates the search box. Hence it has to be placed correctly. If you have an existing search box and are just replacing it, it is super easy. The file is form.mini.phtml. This file is found in a path similar to
vendor/magento/module-search/view/frontend/templates/form.mini.phtml
This might also be in your theme, in which case, you have to use that file, instead of the core Magento’s file.
Replace the content of this file with the second piece of section “<ci-search></ci-search>”. This will replace the search box with the new search box.
That’s it, now your Magento store has a great voice search engine.
Below are images of auto-complete with and without voice:
Autocomplete without voice
Autocomplete with voice
Integrating with the help of a plugin.
If you are on Magento 2, you can directly install it by using a plugin. https://marketplace.magento.com/expertrec-module-expertrecsitesearch.html
If you are still on Magento 1, (Hum, you should upgrade :), you can download the Magento 1 plugin here.
Conclusion
Both the code copy and the plugin methods will add voice search to your Magento store. It will also replace your site search with a high quality hosted search. This will reduce your load on your server and give a fast search experience to your users.