Guide of Magento 2 Search Suggestion Module
Magento 2 Search Suggestion module provides immediate search results. It shows results while you are still typing and gives suggestions for Magento 2 store products.
Products are shown with images, product names, and prices.
Thus, enhancing customer engagement in the store as they are not having a tough time searching for a product. It helps in reducing the bounce rate of the store.
Also, if you want to enhance your store with the AI-powered image search for products, you can check Magento 2 AI Image Search.
You can also check our Magento 2 Semantic Search extension if you want to enhance your store with searching functionality for products using natural language queries.
Watch the video tutorial below to understand the Magento 2 Search Autocomplete extension workflow:
Features
- The results are displayed immediately while still typing.
- Open source code and fully customizable.
- Ability to display matched products name with category.
- Shows popular products based on Ratings.
- Highlighting of the keyword in the search result.
- It is very easy to configure and handy to use.
- The extension is fully compatible with the Hyva Theme.
- Layout 1 (Fixed Width) and Layout 2 (Full Width) can be managed by Ctrl + k and ESC button.
- The search Suggestion module utilizes Elasticsearch to get search results data or whichever search engine configured on admin configurations.
Installation
Customers will get a zip folder and they have to extract the contents of this zip folder on their system.
The extracted folder has an src folder, inside the src folder you have the app folder.
So, you need to transfer this app folder into the Magento2 root directory on the server as shown below.
After the successful installation, you have to run these commands in the Magento2 root directory.
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
After running the commands, you have to flush the cache from the Adobe Commerce admin panel by navigating through->System->Cache management as shown below.
Multi-Lingual Configuration – Adobe Commerce 2 Search Suggestion
The admin can select your desired language from the Locale option. Also, for Multilingual support from the Magento admin panel navigate through Configuration>General >Locale Options.
Language Translation
If you need to do the module translation, follow the path from navigation in your system. app/code/Webkul/SearchSuggestion/i18n. Open the file named en_US.CSV for editing as per below image:
When the file is open for editing, replace the words after the comma(,) on the right with your translated words.
Module Configuration – Adobe Commerce 2 Search Suggestion
After the successful installation of the module, you need to go to Stores -> Configuration and select the Search Suggestion option under Webkul Tab.
Also, the admin can navigate from Store > click on Search Suggestion menu option on side panel > Settings
So, the admin can set various options for search suggestions like –
- show terms,
- show products,
- display products,
- display categories,
- the number of products, etc.
Show-
- Terms: The admin can set any number of Terms to show terms in search suggestions.
- Products: Admin can set any number of Products to show products in search suggestions.
Display-
- Terms: Admin can set Display Terms as Yes or No.
- Terms Number: Admin can set Display Terms Number as Yes or No.
- Product: Admin can set Display Products as Yes or No.
- Categories: Admin can set Display Products as Yes or No.
Layout Terms –
The admin can select layout for the frontend .
- Default : Admin can set default search option for frontend.
- Layout 1 (Fixed Width) : Admin can set search suggestion which will appear in vertical form.
- Layout 2 (Full Width) : Admin can set search suggestion which will appear in horizontal form.
Moreover, for refined search results, you can also install Magento 2 Layered Navigation Extension.
Magento 2 Search Suggestion – Storefront View
Search suggestions will be displayed on the frontend as per the admin’s configuration.
In search bar, the customer can input keywords for product and accordingly the suggestions will display.
Layout 1 (Fixed Width) :
When admin sets layout 1 the frontend display as per the image below :
When the customer clicks on the search bar without any keyword then it will be displayed popular products based on ratings as per the below image :
Also, customer enter the keyword for product in the search bar then relevant product option will display.
Layout 2 (Full Width) :
The front end will look slightly different from Layout 1 (Fixed Width) in this layout. The search bar will appear differently from Layout 1 (Fixed Width) as per the below image :
This command helps to write static files to the Magento 2 file system. It uses to optimize static files properly, allowing for a better user experience.This command helps to write static files to the Magento 2 file system. It uses to optimize static files properly, allowing for a better user experience.After clicking the search bar, the trending categories searches will be displayed on the homepage. All the suggestions will appear horizontally as per the below image :
When the customer will enter the keyword in the search bar , then keyword will be shown with the possibility of product category and product as per below image:
So, that’s all for the Magento 2 (Adobe Commerce) Search Suggestion.
If you still have any issues feel free to add a ticket and let us know your views to make the module better at Webkul Support System.
Also, to further enhance your e-commerce site search experience and display search results more quickly and accurately, make sure to check out Magento 2 Elasticsearch. You may also check our quality Magento 2 Extensions.