How To Build Search And Recommendations UI With NoCode

Learn how enables developers and business teams to create search and recommendations UI with NoCode to deliver an engaging search user experience.

The No Code Search and Recommendations UI Builder from

Teams using 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. 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.

The UI Builder cuts down time and costs to build and test search UIs and gives developers and business teams the ability to add a variety of product recommendations in just a few clicks. Once you're satisfied with the UI you create, you will be able to easily export the code snippets to go live on your site.

Building NoCode Elasticsearch UI with

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. gives you the choice of two style presets you can customize to suit your project.


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.


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.

search result page presets
text preset and css settings

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 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.

search relevance settings
filters and facets settings

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. 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.

search results page UX
custom messages

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.

Check out how you can design your search UI on Shopify, other CMSes, and custom sites.

Building a Shopify Storefront search with

Creating Recommendation Widgets with

recommendations widget from 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.

recommendations settings
style presets and css settings

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.

Here's a quick video about how you can design your recommendations with no code:

Build Recommendations widgets with No Code using appbas.eio

Exporting Code and Going Live

The advantage of no code is businesses can go live with changes and new widgets just as simply as teams can build them. Once you're all set, you can export the search and recommendations UI code snippets using your API key.

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.

exporting to Shopify
Shopify snippet

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.

exporting to custom platform
UI builder snippet

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.

Embed Mode and Hackable Mode gives you flexibility in implementing Search and Recommendation UI to your project by giving two distinct export modes. Embed Mode gives businesses an easy and convenient way to install the snippets. Hackable Mode gives developers and business teams the option to add further customizations by exporting the source code. This allows you to extend the capabilities of the no code builder and create an even more tailored experience.

Try our NoCode Search and Recommendations UI Builder

Get a 14-day risk free trial on us!