How do I add a search bar to my website?

There are four routes: embed a hosted search widget with a script tag, install a search app from your platform's app store, enable your CMS or ecommerce platform's built-in search, or build your own on a search engine like Typesense or Elasticsearch. A widget takes minutes; a custom build takes weeks.

The four routes

Every implementation is a variation on one of these, and the differences are mostly about who owns indexing and ranking.

RouteEffortYou ownTrade-off
Embedded widget / scriptMinutesNothingLeast control over design and ranking
Platform app (Shopify, WordPress…)Under an hourConfigurationBounded by the platform's data model
Hosted search platform + APIDaysUI and integrationOngoing subscription
Self-hosted engineWeeksEverythingPermanent maintenance

What you have to decide regardless of route

What gets indexed is the first decision and the one most often made by accident. Products only is the default in ecommerce and the reason so many stores return nothing for policy and order questions.

How the index stays fresh is the second. Webhooks or scheduled syncs both work; no strategy at all works until the first price change.

Where results appear is the third. An overlay keeps the visitor in place and generally outperforms a full page navigation, particularly on mobile.

A sane first implementation

Put the search bar in the header on every page, visible rather than hidden behind an icon. Trigger suggestions from the second character. Show a results overlay rather than navigating away. Log every query from day one — you will need that log more than any configuration option.

Frequently asked

Can I add search to a static site?
Yes. A hosted platform or client-side index both work; static sites are usually small enough that either approach is fast.
Should search be its own page or an overlay?
An overlay for most sites. It preserves context and is markedly better on mobile, where a navigation resets scroll position and history.