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: Search-Only API Key, Admin API Key and Application ID. \ Step 4: Go to your site's Dashboard → Integrations section → Algolia → paste the codes in the appropriate fields. \ Step 5: Save the changes.
How to add the Search Element to your Website
Once you're done with the sign up process, go to your Ucraft Edit Mode → look for the Search Element in the Elements Section → drag and drop it to your crafting area.
We suggest adding the element to your Header, just to make sure it's easily accessible to your site visitors from all of your pages.
In case you make some changes on your website data, like adding or deleting pages, products or articles, we highly recommend going to your Integrations App → click on the Algolia Integration → hit the Reindexing button so that the search data is fetched correctly.
Settings
Now that it's all set, all that is left is to take care of the Element’s design and some minor settings.
Let’s start with the Layout. 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.
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!