How to use the Header Search Widget

Header Search Widget

The Header Search widget allows visitors to quickly find content across your site directly from the header. Placing search in the header makes it globally accessible, predictable, and easy to use—especially on content-rich websites where users prefer searching instead of navigating through menus.

The widget is flexible and configurable: you control where the search looks, what placeholder text is shown, and how the search field is styled so it fits seamlessly into your header design. Search results are displayed on a dedicated system results page.

What the Header Search Widget Is Used For

Use the Header Search widget when you want to:

  • Provide fast, site-wide access to content
  • Improve usability on larger or growing websites
  • Reduce friction by letting users search from anywhere
  • Support content-heavy navigation (blogs, stores, portfolios)
  • Add a familiar and expected search experience to the header

Common header-specific use cases:

  • Global site search available on all pages
  • Blog and knowledge-base search
  • Product search for stores
  • Portfolio or case-study discovery
  • Compact search access without crowding navigation

Search Scope Settings (Header Context)

Select Where to Search

You can define exactly which parts of your site the header search should include. Multiple options can be enabled at the same time.

Available options:

  • Search in the pages

    Includes all standard site pages.

    Best for general site navigation and informational content.

  • Search in the store

    Includes products from your store.

    Ideal for e-commerce or product-driven websites.

  • Search in the blog

    Includes blog posts and articles.

    Perfect for blogs, content marketing, or knowledge bases.

  • Search in the portfolio

    Includes portfolio items.

    Useful for creatives, agencies, or case-study-focused sites.

💡 Best practice (Header search)

Because header search is global, it often makes sense to enable multiple areas:

  • Corporate or content site → Pages + Blog
  • E-commerce site → Pages + Store
  • Creative site → Pages + Portfolio Avoid enabling sections that aren’t relevant to most visitors, as this can dilute search results.

Field Placeholder (Header-Friendly Copy)

Field Placeholder Text

Controls the text shown inside the search field before typing begins.

Examples:

  • Search the site
  • Search the articles
  • Search the products

Tips for header placeholders:

  • Keep it short (space is limited in headers)
  • Make the purpose instantly clear
  • Match your brand tone

💡 UX tip

In headers, clarity matters more than cleverness. A simple “Search…” often performs better than longer copy.

Styling Options for Header Search

Header placement requires special attention to balance visibility with minimalism.

Colors

You can customize:

  • Background color – input field background
  • Text color – user-entered text
  • Border color – outline of the field

💡 Accessibility tip

Ensure sufficient contrast against the header background—especially if the header is transparent or overlays content.

Typography

  • Text Font Family – choose the font used in the search field
  • Font Size – adjust readability without overpowering other header elements

💡 Best practice

Match the search field typography to other header elements (menu, buttons) for a cohesive look.

Spacing & Shape (Critical in Headers)

Padding Size

Controls internal spacing inside the input field.

  • Smaller padding → compact, navigation-friendly
  • Larger padding → more touch-friendly, modern feel

💡 Header tip

Keep padding balanced so the search doesn’t visually compete with the menu or logo.

Border Radius

  • Small radius → sharp, minimal, professional
  • Large radius → soft, friendly, pill-shaped

Choose a radius that matches your button and input styles in the header.

Border Settings

  • Border Size – thickness of the border
  • Border Style
    • Show border on all sides
    • Border below only
    • No border

When to use each in headers:

  • All sides – clear input definition, good for solid headers
  • Border below – modern, subtle, works well in minimal headers
  • No border – best on contrasting or filled header backgrounds

Search Icon

Hide Search Icon

Removes the magnifying glass icon from the field.

When to hide it:

  • Ultra-minimal headers
  • When space is very limited
  • When placeholder text is crystal clear

When to show it:

  • For instant recognition
  • In compact headers
  • When the input field is visually subtle

💡 Header UX tip

In headers, icons improve scannability. Hiding the icon should be a deliberate design choice, not the default.

Design & UX Tips for Header Search

  • Place search where users expect it (usually right side or near navigation)
  • Keep it visible but not dominant
  • Ensure it’s easy to tap on mobile
  • Avoid overly wide fields that push other header elements away
  • Test contrast if using transparent or overlay headers
  • Combine with a sticky header for maximum accessibility

When Not to Use Header Search

You may not need a header search if:

  • The site is very small (few pages)
  • Navigation is extremely simple
  • The site is a single-purpose landing page

In those cases, clear menus or links may be enough.

Summary

The Header Search widget allows you to:

  • Provide global, site-wide search access
  • Let users search pages, store items, blog posts, and portfolio content
  • Control search scope for better relevance
  • Customize placeholder text for clarity
  • Fully style the search field to match your header design

Used thoughtfully, the Header Search widget improves navigation, reduces friction, and helps visitors find what they’re looking for—right from the most important area of your site: the header.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.