Want to make sure your site visitors find what they are looking for? Our integration with Algolia allows you to provide your users with a quick text relevant search functionality.

You can adjust the Element in all possible ways, from the layout to the search source.

!Note: Algolia offers a ‘forever’ free plan as everyone deserves a great search functionality.

  • In case you want to get acquainted with Algolia pricing, click here to get more insight. 

Steps on how to Integrate Algolia to your Website

Step 1: Set up an account with Algolia.
Step 2: Go to your Dashboard → API key section. 

Step 3: Copy the API keys: Admin API Key, Application ID and Monitoring API Key.
Step 4:
Go to your site's DashboardIntegrations section →  Algolia → paste the code in the appropriate field.
Step 5: Save the changes.

How to add the Search element to your Website

Once you are done with the sign up process, go to your Ucraft website and make a few more steps to complete the installation of the Search Element on your website.

You will find the Search Element in the Elements section on the Left Panel. We’d suggest adding it to the Header, just to make sure it's easily accessible to your site visitors from all the Pages, as there is no point in ‘searching’ for the search.

Fill in the fields, by copying the corresponding information from your Algolia Account, and insert the data accordingly.

We also highly recommend moving to the Algolia Integration tab and using Reindexing in case you've made some changes on your website data, like adding/deleting pages, products or articles so that the search data is fetched correctly.

Settings

Now it's all set and what's left to be done is take care of the Element’s design and some minor settings.

Let’s start with the Layout. First, you can choose how you want the Search Results View to appear. You'll find 2 options available: In Page, which will stay as a search field on the page, and the Popup.

'Enable search field' allows you to display the search bar in full size, without a need to click on the search icon to expand it.

The Grid View, for the Search Result Layout, will show the results in Images and the List View.

Here you can adjust the Border Radius, the Style, Aspect Ratio in grid view and the Label of the Load More Button, in case there are too many results to be shown.

You can also set the result range for the Items per Loading.

Do you want the Search to scroll your site and give results based on the Pages, Articles or the eCommerce products? Or do you want it to include all three categories? Whatever your choice may be, simply enable the required options from the Source Settings and that's it!

To add a more personalized look to your Search bar, pick the Icon you like the most from the 1 mln icons available.

Finally, you can adjust each color detail, starting from the Search Icon Color, to the category background, and play around with the Size Settings to find the perfect proportion using the Designer Tools.

Alignment - To change alignment settings of the element, click the ‘Alignment’ icon and choose the desired position: top, center, bottom.

Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the Visibility of the elements on your page.

Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Mind the Session visibility as well. The latter one, allows to make certain elements visible only to the logged in users of your website. This works well with User Account element and can come in handy if you want to hide some content from users until they sign up to your website.

Trash Icon - If you don't need the Element anymore, Click ‘Trash’ to remove it from your page in a blink of an eye.

Have more questions? We recommend checking out these Articles for a bigger view of Ucraft.

And always remember, we're just a step away! Hit the Chat box in the lower right corner and our Support Team will be glad to assist you!

Did this answer your question?