New feature: site search

Now you can add search to your sites, customize the design, and precisely control the content of your search engine — all in Webflow.

Barrett Johnson
January 9, 2018
Announcements

After a just over month in beta, site search is now ready for release to the entire Webflow community. With complete control over design and search engine content, you’ll have everything you need to build the search your projects need.

 

For some sites, search is simply a must-have. For example, consider the following types of websites:

  • Help center
  • Blog
  • News website
  • Recipe website

Navigation can help guide people through the site, but once a site starts to swell with content, search is the most intuitive (and certainly the fastest) way for visitors to find their way to the content they need.

With the release of site search today for all sites with CMS and Business hosting, now you can build these content-heavy sites knowing that you’ll be able to provide a high-powered search experience for visitors. And just like everything else in Webflow, you’ll have complete control over the design of that experience.

How search works in Webflow

Working with search in Webflow consists of 3 elements:

  1. Designing the search bar
  2. Designing the search results page
  3. Refining the content in your search engine

Below I’ll briefly touch on each of these three parts, but for a comprehensive look at all of these pieces and more, check out our site search guide on Webflow University.

Designing your search bar

You’ll find search as a component in the Add panel on the left side of the Designer. Once you’ve added the search component to your site, it works a lot like the form elements you’re already familiar with. Just like forms (or any other element in Webflow), you have complete control over the layout and style of your search bar so it matches your site. (Pro tip: check out our article on best practices for site search design for some tips before you get started.)

Style search just like you’d style any form input — however you want.
‍Style search just like you’d style any form input — however you want.

Designing your search results page

Styling your search results takes place on a new utility page for just that purpose, which you can now access in the Pages panel.

The results page features a skeletal design, filled with sample results to tweak before you add hosting or create an index. (Note: Full-featured search is only available on sites with CMS or Business hosting, but you can design search and play around with sample results on any site).

The starting point for the search results page, populated with sample results.
‍The starting point for the search results page, populated with sample results.

From this starting point, you can customize the design however you’d like, bringing in thumbnails, removing elements, and tweaking spacing as needed. As you’ll notice, styling the search results list feels a lot like styling a Collection List, with each change you make applying to each result in the list.

‍Styling search results works a lot like how you style Collection Lists.

This opens a lot of possibilities for creative layouts on your search results page, so you’re not stuck with an unhelpful wall of text that users need to sort through.

Get creative by breaking your results page layout into an image-driven grid.
‍Get creative by breaking your results page layout into an image-driven grid.

Refining search engine content

In order to really get the most out of search, you’ll also want to spend some time refining your search index. This has two main aspects:

  1. Setting specific titles and thumbnails for each page
  2. Excluding content that you don’t want to appear in search results

Setting search titles and thumbnails

On the search results page, the titles for each item are drawn from whatever is set in the new search settings section of your page settings panel (just under existing controls for SEO metadata and OG content). You can customize these on a per-page basis for static pages, or on a per-Collection level for CMS driven Collection Pages.

The new search settings section of the page settings panel lets you customize the title and image that you want to appear in search results.
‍The new search settings section of the page settings panel lets you customize the title and image that you want to appear in search results.

Excluding content from search

In addition to setting specific titles and thumbnails for each page, you might also want to exclude entire pages from search, like your homepage, for example, which generally serves as a spoke for other pages on your site and might feel out of place in a list of search results.

To exclude pages, check the box under the search settings for that page. This can also be done at the Collection Page level to exclude an entire content type from search.

Exclude CMS template pages to remove specific content types from search results.
‍Exclude CMS template pages to remove specific content types from search results.

You can also exclude common recurring elements like navbars, forms, and footers from your search engine to focus search on the content that matters most. (For example, on our blog search, we’ve restricted search to only cover the title and post body of each article.)

Exclude specific elements for fine-tuned control over search engine content.
‍Exclude specific elements for fine-tuned control over search engine content.

What about the tech?

Behind the scenes, we built search on top of the open-source Elasticsearch, which brings industry-leading relevance and natural language processing libraries within your control.

So you’re not just getting simple, database-driven search — you’re running your own instance of one of the best search technologies available on the web. (We’ll be releasing our own post with more details on the tech behind search in the not too distant future).

Where to learn more

To get all the details on how to set up search on your site, check out our site search guide on Webflow University. To see search in action, try searching this blog!

We’d love to see how you’re using search, so go ahead and share your links in the comments!

Barrett Johnson

Product marketing @webflow. Design, history, and music enthusiast.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.