Webflow

Add advanced search and discovery capabilities to any Webflow site in minutes using Search.io's Crawler.

Installation

1. Create a Search.io account

To get started, you will need sign up to Search.io. Click the Sign up button on the website and follow the instructions to create your account.

To use Search.io with Shopify you will need a paid or trial plan. For more information on the 14-day free trial and pricing, see the pricing page.

2. Create a Website collection

A collection in Search.io, stores an index of your website and all the information required to create a great search. Choose "Website" when prompted for your use-case and give your Collection a name in the next step.

3. Index your site

Enter the URL to your Webflow website and kick back and relax. Search.io will complete the initial index in less than a minutes. Depending on the number of pages on your site, Search.io will continue the indexing process in the background.

4. Designing the Search UI

After the initial index is complete, you will land on the dashboard. Once your search is up and running, the dashboard will display search analytics and the most popular search terms, helping you get a better understanding what your visitors are looking for.

Now it's time to install the search UI into your store. Click in the Search UI designer link at the bottom of the left-hand navigation.

This is the Search UI Designer. On the left you have a number of configuration options to adjust the filters and the look and feel of your search UI. On the right is a live preview, showing your search results.

5. Installing the Search UI

In this guide we will install the search in overlay mode, which not only looks great but is also easy to install.

In the interface designer, choose the overlay option in the top left.

Further down in the Button selector field enter the selector of the link or the search bar that should trigger the search. For example, on the Search.io website we are using a text field with the class selector .search-box (shown in the UI as Search Box).

Lastly click the Install link at the bottom. Follow the instructions and copy the code. In Webflow, under Project Settings > Custom Code paste the code snippet you copied into the Footer Code section.

6. Preview & publish

Preview your changes and make sure that the search works as expected. If you are happy with it, hit publish.

🎉 Congratulations, you now have a fancy new Search in your Webflow site!