Want to make sure your site visitors find what they are looking for in no time? Our integration with Algolia allows you to provide your users with a ‘too-quick’, text relevant built-in search functionality.
You can adjust the Element in all the 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.
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 Dashboard → Integrations section → Algolia → paste the code in the appropriate field.
Step 5: Save the changes.
How to add Search element to your Website
Once you are done with the sign up process, go to your SpringBuilder 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 inserting the data accordingly.
We also highly recommend moving to 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.
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.
The Grid View for the Search Result Layout will show the results in Images and the List View, well, the name speaks for itself!
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? Well, once you decide, just 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 million icons available.
Lastly, you may 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.
Trash Icon - If you don't need the Element anymore, Click ‘Trash’ to remove it from your page in a blink of an eye.
Cool, right? As you're reading this, our enthusiastic team is already working on implementing new elements and functionalities, stay tuned!
Have questions on Elements? We recommend checking out these Articles for a bigger view at SpringBuilder!
Always remember we're just a step away so hit the Chat box in the lower right corner and our Support Team will be glad to assist you!