Site search lets you add search to your site, so your visitors can find the information they’re looking for, and you can control the look and feel of that experience. You can also easily exclude the content of specific elements, pages, and even entire Collections, all with a tick of a checkbox.

Search is especially important for large, content-driven sites, such as:

  • Knowledge bases and help centers
  • Blogs or curation sites
  • News publications and media sites
Before you get started
Site search is available on all sites with CMS Hosting or above. On CMS and Standard Ecommerce Hosting, manual reindexing is available once every 24 hours. On higher hosting tiers, manual reindexing is available once every hour.
In this lesson

Adding and styling your search component

You’ll find the search component in the Add panel, on the left side of the Designer.

Add the search component from the Add panel.
Add the search component from the Add panel.

You’ll notice the search component has three pieces:

  • Search (wrapper): the parent element that contains the search form and submit button
  • Search input: where your users type their search
  • Submit button (optional): a button to submit the search — which you can hide if you’d like a simple “Enter” to submit the search
The default structure of the search component.
The default structure of the search component.

Once you add the search component to your project, you can style it in the same way you style any other element on a Webflow project.

Search bar, styled.
Search bar, styled.

You can also customize the placeholder text, and set the search bar to autofocus, which automatically places visitors’ cursors in the search field on page load.

Edit your placeholder text to give visitors an idea of how to search.
Edit your placeholder text to give visitors an idea of how to search.

Styling your Search Results page

Once you add the search component to your project, you’ll see the Search results page appear in your Pages tab, under the Utility pages section.

Your Search Results page lives under the Utility Pages section of your pages panel.
Your Search Results page lives under the Utility Pages section of your pages panel.

Structure of the Search Results page

When you first open your Search results page, you’ll notice there is some basic structure already in place. A container element holds everything in place, and within that, there is an optional search component (for people to try a new search if they don’t see what they’re looking for) along with a list of results, which works a lot like Collection Lists when it comes to styling.

The starting point for a search results page, with sample results populated to let you start designing before you publish your site.
The starting point for a search results page, with sample results populated to let you start designing before you publish your site.

You can change the structure of this page however you’d like, along with the styles, which we’ll get into below.

Styling search results

Styling search results works a lot like styling a Collection List, with styles applied to one result item applying to all other result items in that list. However, the search results come with a basic starting structure, and have a few other new controls.

Need to know
Unhosted projects and projects with Basic hosting will show sample search results on your published site - which you can show to clients to give them a sense of how their search experience will look. To see real search results, you’ll need to add CMS or Business hosting to the site.

Search results structure

To begin with, your search results have a basic structure of elements, which you can rearrange, restructure, or remove as you see fit:

  • Search title (link): The title for that page, pulled from whatever you’ve set as the Search result title in the Search section of that page’s Page Settings. This title acts as a link to that page by default.
  • Page URL (text block): The slug of that page.
  • Snippet (paragraph): The context from the page where the searched term appears. You can control the length of this snippet in the Search Results Settings. Alternatively, you can choose to connect this paragraph to a custom description, which you can set in your page settings.

Site search settings

You can control what content displays for the search title in the Page Settings for all of your site’s static pages and Collection Pages. For Collection Pages, this content can be pulled from any field, similar to how you’d configure SEO and Open Graph settings.

Similarly, you can set a custom search description and a search image for each of your pages, or pull in that content from the SEO description and the OG image.

Control what content displays in search results under your Page Settings.
Control what content displays in search results under your Page Settings.

Displaying content “type”

You can use the search description field to add additional information to your search results. For example, say you want to show visitors what type of content a specific search result by displaying the blog post category alongside the result.

‍Display additional information in search results by getting creative with the search description field.
‍Display additional information in search results by getting creative with the search description field.

Simply add your category name to the search description field, then connect a text field in your search results layout to the search description field, then style as you wish.

Example: use this new field to display the type of content that a search result is.
‍Example: use this new field to display the type of content that a search result is.

Adding a search results thumbnail

You can also set a search image under your Page Settings, just as you’d set an OG image. Once you’ve added a search image, you can add this image to your search results by connecting an image element to that search image field. You can also set the search image as the source for a background image on a div.

Want to add images to your search results? Not a problem.

Styling the snippet

In addition to styling the text of the snippet like you’d style any other text, you can control the snippet length (number of characters) and turn highlighting (which will bold appearances of the search term within the snippet) on and off.

Set your number of results and snippet length in your search result settings.
‍Set your number of results and snippet length in your search result settings.

To style the highlighting within your snippet, style the base tag for “All Bolds” in a rich text element on a style guide page, and this styling will apply for your highlighted terms on your search results page.

Style your snippet highlights by targeting the “All bolds” tag.
‍Style your snippet highlights by targeting the “All bolds” tag.

Styling your “empty” (or “no results”) state

Just as forms have error and submission states that you can style, your Search Results page has a “no results” state that you can customize to soften the impact when users search for something that isn’t available on your site. (For example, you may want to add an illustration here, along with a link back to your homepage that helps them reorient themselves).

Toggle to your “No Results” state to design your no results pages.
Toggle to your “No Results” state to design your no results pages.

To customize the design of the “no results” state, toggle to the “no results” mode in your Search Results Settings section. From here you can customize the design in any way you’d like.

Snippet styling

In addition to styling the text of the snippet like you’d style any other text, you can control the snippet length (number of characters) and turn highlighting (which will bold appearances of the search term within the snippet) on and off.

Set your number of results and snippet length in your search result settings.
Set your number of results and snippet length in your search result settings.

To style the highlighting within your snippet, style the base tag for “All Bolds” in a rich text element on a style guide page, and this styling will apply for your highlighted terms on your search results page.

Style your snippet highlights by targeting the “All bolds” tag.
Style your snippet highlights by targeting the “All bolds” tag.

Setting result count

Finally, you can choose how many results you’d like to display on your search results, up to 60.

Support for pagination across multiple search results pages is not yet available.

Previewing search results

As you style your search results, you can change the displayed results by changing the search term in the “Preview results” field of the Search Result Settings section. This will help you get a clearer picture of how your search results will appear for different queries.

Preview results before going live to see how results look for different queries.
Preview results before going live to see how results look for different queries.
Until you add CMS or Business hosting and publish your site, you will see sample results — not real results from your site. To preview and style real search results, publish your site to create a search index. Learn more in the indexing section below.

Indexing, and controlling what is “searchable”

An index is the content and pages in your search engine, which controls what content people can search across when they submit a search on your site. For example, if you don’t want a specific page to be discoverable through search, you can remove it from your index (more on how to do this below).

Creating an index

Once you've added CMS or Business hosting, your search index is created after you publish your site for the first time.

Good to know
you can design your search results before your index is created (or before you add hosting) by working with our sample results.
Need to know
At the moment, sites are limited to one search engine. You can have a search bar on as many pages as you’d like, but they will all search across the same content.

Updating your index

There are two ways to update your index so the content in search results matches the latest updates to your site content:

  1. Manual reindexing
  2. Automatic reindexing

On CMS hosting, manual reindexing is available once every 24 hours. On Business hosting, manual reindexing is available once every hour. On CMS hosting, automatic reindexing takes place once every 72 hours, and on Business hosting automatic reindexing takes place every 12 hours.

Manual reindexing

Manual reindexing allows you to deliberately refresh the content in your search engine. This is best for when you’ve pushed important updates to your content, or made extensive changes to the content of your search engine (see “Refining your search index” below).

To manually reindex your site, open the Settings panel on the left side of the Designer and in the Search section, click “Index now.” Indexing can take up to 30 minutes on large sites.

Trigger a reindex in the search section of the settings panel.

To check on the status of your index, just go back to the search section of your Settings panel. (If you make a major content change and need your site reindexed ASAP, contact support).

Manual reindexing is available once every 24 hours on CMS hosting, and once every hour on Business hosting.

Automatic reindexing

On an ongoing basis, we’ll update your search index to keep the content in your search engine up to date with the latest changes to your site. On CMS hosting, automatic reindexing takes place once every 72 hours, and on Business hosting automatic reindexing takes place every 12 hours.

Refining your search index

By default, everything on your site (excluding Symbols, Collection Lists, Utility Pages, and password-protected content) is indexed when you add search, and so users can discover this content when they search for something. In most cases, you’ll want to refine your index to exercise more control over what users can discover through search — and hide content you don’t want to be discovered.

Excluding content from site search does not affect how Google and other search engines index your site. You can ask search engines not to index particular pages in your Project Settings.

Excluding static pages

A common example of when you’d want to refine your index is if you have a specific page you don’t want to let users find in search — for example, an internal style guide that you’d like to keep private, or even your homepage, which only acts as an entry point to your site. In these instances, you’d want to exclude these static pages from search altogether.

Exclude static pages under page settings.
Exclude static pages under page settings.

To exclude static pages, head to the Page Settings and scroll down to the new Search Settings section, which lives below your Open Graph settings. At the top of this section you’ll see a checkbox to “Exclude this page from site search results.” Once checked, a reindex will remove this page from your index.

Good to know
Password protected pages and Utility Pages are excluded from search by default.

Excluding Collection Pages

Similarly, you might want to exclude specific Collections from search if they are not central to your site’s content, such as tags, categories, or other information that doesn’t have interesting Collection Pages.

To exclude Collection Pages from search, head to the Page Settings for that Collection Page and scroll down to the Search Settings section. Once you check “Exclude these pages from site search results,” these pages will be removed from your search engine the next time your site is indexed.

Exclude Collections from search in the Page Settings for the Collection Page.
Exclude Collections from search in the Page Settings for the Collection Page.

Excluding a Collection Page will exclude all the template pages from search results, but any appearances of this Collection’s content in Collection lists on other pages will still be discoverable, as they’ll be indexed from that page’s content. In this case, you may want to apply element level exclusion for those Collection Lists (see below).

Need to know
At present it is not possible to exclude individual Collection items from search.

Excluding elements

It’s a good idea to exclude recurring elements (such as nav bars, footers, sidebars, and forms) from search because they appear across your site and can “muddy up” your search results. (For example, if a person searches for “Blog posts” but the word “Blog posts” is in your navigation, every page on your site would be considered relevant for that search.)

For this reason, Symbols and Collection Lists are excluded from search results by default, but you can override this setting on the parent element of the symbol.

Exclude recurring elements like nav bars, footers, and sidebars to clean up search results. (Note that Symbols are excluded by default).

To exclude specific elements, open the element’s settings and under the Search Settings section, click “Exclude content in search results.”

Need to know
Any exclusion rules set at the parent level will also apply to children elements.

Frequently asked questions

What happens with search if I export my code?

Search will not work on exported sites, as the search engine needs to be hosted with Webflow.

How can I see what users are searching for?

To see what your site visitors are searching for, integrate your Webflow site search with Google Analytics.

Can I have multiple search engines with different content?

At the moment, sites are limited to one search engine. You can have a search bar on as many pages as you’d like, but they will all search across the same content.

Can I search for things in the Editor?

Search does not work in the Editor. To test search, open your site in an incognito link or test results from the Designer in the Search Results settings results preview input.