Articles in this category

GOOD STUFF!

Search element

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 quick, text relevant built-in search functionality.

How to integrate Algolia into 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: Paste the API keys to the appropriate fields in your Website's Dashboard -> Integrations section.

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 Subbly 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 sidebar to the left. 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 to your website data, like adding/deleting pages 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.

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 or Articles? Or do you want it to include both 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 mln 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.

You'll find an option to change the Divider Alignment as well as Visibility Settings.

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

Mind the Location visibility as well. Include or exclude specific cities or countries or set the appropriate Custom IP.

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

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free