How To Build Search And Recommendations UI With NoCode
Learn how ReactiveSearch.io enables developers and business teams to create search and recommendations UI with NoCode to deliver an engaging search user experience.
Teams using ReactiveSearch.io have a great deal of control over their search relevance setting with the ability to set typo-tolerance, synonyms, query rules, and more in realtime. But user engagement also depends on their navigation experience across the site, and having a poor UI can just as easily lead visitors to bounce or exit. ReactiveSearch.io is now bringing its NoCode approach to search relevance to providing a WYSIWYG builder to create engaging UIs for site search and product recommendations. Here are some great uses of the NoCode builder for creating a tailored search experience for your users:
Customize Navigation
Smaller teams often find it hard to create a search experience that reflects their brand design and scheme. While it can prove challenging, this steps helps create a consistent image for the end-user and has a big role to play in building loyalty.
Showing Relevant Results
Showing and recommending results relevant to the search query makes search a seamless experience for the user. The less time they spend looking for a product and more time on a product page results in higher engagement, conversions, and satisfaction.
Upselling and Cross-Selling Opportunities
For e-commerce stores, taking advantage of recommendations to showcase upcoming, related, or popular products is tremendously important in increasing AOV. They are also a great way to introduce products your audience might have overlooked.
Adding Unique Filters and Facets
Filters are a great help in cutting down the time end-users spend on search by helping them narrow down to relevant products quickly. But, implementing filters that are unique to your store or SaaS app can be a difficult task.
Building NoCode Elasticsearch UI with ReactiveSearch.io
From the UI Builder, teams can easily create a unique search interface by styling everything from the search result layout to the help messages that will guide your search users. ReactiveSearch.io gives you the choice of two style presets you can customize to suit your project.
Classic
This style provides a search layout that emphasizes filters and facets making them easily accessible for end-users. The product cards used here also provide ample space for descriptions and price fields.
Minimal
This style delivers a cleaner search interface that highlights product images. This style also comes with filters and facets, but they are not as pronounced as with the Classic style and makes it very popular among fashion and jewelry retailers.
Color plays a big role in creating a phenomenal branding experience so next, you can choose the font family and color you want for your product name and text in the Style Presets tab. Then, you can add Custom CSS classes to your search bar and results. Simply add the CSS code in the box and preview instantly to go over your design.
The next step is configuring the Search Query settings, arguably the most important one for delivering a great search UI. From the ReactiveSearch.io dashboard, developers and business teams will be able to set fields where search is active, allocate weights to signify importance, and set query format, typo tolerance, synonyms, and more. You can control these changes in realtime. Learn more here.
Next, you can customize Filters and Facets on the search results page. Of the five preset filters, the Collection and Product type filters are exclusive to Shopify stores. To add a new filter, simply click on the add filter button, choose the data field relating to the filter, pick a name, size, query logic, and sorting options. You can also customize these options in the preset filters. Teams can also control which filters appear on the search results page by enabling or disabling via the toggle control.
ReactiveSearch.io also gives you control over the UX of the search results page. You will be able to set popular search suggestions, active filters, or pagination with just a single click. Give your product results a tailor-made feel by altering the data fields that appear on the search results for result title, price, image, and others.
Create Custom Messages to guide your users on their search journeys. Add help text to help them navigate your website or app better by using text or HTML snippets. Businesses can add customize messages for No Suggestions, No Results, and No Filters among others.
ReactiveSearch.io helps businesses tap into search analytics and search technology to create a variety of recommendations to keep end-users engaged for longer. Teams can create these widgets using No Code and this feature has multiple use-cases for e-commerce, blogs, and more to promote new releases and increase cross-selling and upselling opportunities. You will be able to set recommendations based on popularity, similarity, and recency. Here are the recommendations, you can set up:
Most Popular Products
Promote the most popular products based on analytics.
Most Recent Products
Highlight newly added products and records to visitors.
Similar to this Product
Add recommendations on product pages based on similar attributes and features.
Featured Products
Showcase curated products by selecting products to feature from the dashboard itself.
You can then customize the product card style, CTA, and fields in the UI settings. The Product Card tab lets you set the CTA text and action. Here you will also be able to set fields such as title, price, description, and more for the recommendations.
Then using Style Presets and Custom CSS to give your recommendations a unique look. You can change the font and color of the CTA and exercise granular over the look and feel of your recommendations UI using CSS classes.
Exporting to Shopify
To export your search UI or Recommendations widget to Shopify, simply select "Shopify" in the E-Commerce Platform tab. In case of the search UI, simply click on the Export Code button. For Recommendations widgets, you will need to select which one you want to export. Either way, you will see a screen where you will see a pop-up where you have to choose the export mode and enter your API key. For now, choose Embed Mode as it is the way to go live.
Then you have to copy and paste the snippet that comes next to the header.liquid or search-form.liquid markdown. The pop up also has a tutorial you can refer if you need help finding the correct file.
Exporting to WordPress, Magento, Other CMSes and Custom Sites
To export your search UI or Recommendations widget to WordPress, Magento, or any other custom site, simply select "Other" in the E-Commerce Platform tab. In case of the search UI, simply click on the Export Code button. For Recommendations widgets, you will need to select which one you want to export. Either way, you will see a screen where you will see a pop-up where you have to choose the export mode and enter your API key. For now, choose Embed Mode as it is the way to go live.
Next, you will be shown snippets that you can copy and paste in the head and body of Index.html. There is another snippet that you have to paste on the search results and product pages for recommendations.