Search widget

The Search widget allows visitors to quickly find content across your site from a single input field. It helps improve usability, reduce friction, and make larger or content-rich websites easier to navigate by letting users search instead of browse.

The widget is flexible: you can control where the search looks, what placeholder text is shown, and how the search field is styled to match your design and layout. Search results are displayed on e dedicated system page.

Use the Search widget when you want to:

Help visitors find content faster
Improve navigation on larger websites
Make blogs, stores, or portfolios easier to explore
Reduce bounce rate by guiding users to relevant content
Add a familiar search experience to headers, sidebars, or content sections

Common use cases:

Site-wide search in headers or footers
Blog or knowledge-base search
Store product search
Portfolio or content archive search
Minimal search fields on landing pages

Search Scope Settings

Select Where to Search

You can choose exactly which parts of your site should be included in search results. 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 sites or product-heavy pages.
Search in the blog
Includes blog posts and articles.
Perfect for content marketing sites, blogs, and knowledge bases.
Search in the portfolio
Includes portfolio items.
Useful for creatives, agencies, or case-study-driven websites

💡 Best practice

Enable only the sections that are relevant to the visitor’s intent.

For example:

A blog page → Pages + Blog
A shop page → Store only
A general header search → Pages + Blog + Store

Field Placeholder

Field Placeholder Text

This controls the text shown inside the search field before the user starts typing.

Example:

Search for...

Tips for good placeholder text:

Keep it short and clear
Match your tone of voice
Hint at what can be searched

Examples:

“Search articles…”
“Search products”
“Search the site”

💡 UX tip

A descriptive placeholder can subtly guide users toward the type of content you want them to find.

Styling Options

The Styling panel controls how the search input looks visually.

Colors

You can customize:

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

💡Tip

Use sufficient contrast between background and text for accessibility.

Typography

Text Font Family – choose the font used in the search field
Font Size – control readability and visual balance

💡 Best practice

Match the search field font to your site’s body or form font for consistency.

Spacing & Shape

Padding Size
Controls the internal spacing inside the input field.
Larger padding creates a more modern, touch-friendly feel.
Border Radius
Rounds the corners of the search field.
Small radius = sharp, minimal look
Large radius = soft, pill-shaped look

Border Settings

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

When to use each:

All sides – clear input field, good for forms and headers
Border below – modern, minimal designs
No border – works best when placed on contrasting backgrounds

Search Icon

Hide Search Icon Removes the magnifying glass icon from the field.

When to hide it:

If the design is extremely minimal
If the placeholder text already makes the function obvious

When to show it:

For instant recognition
In compact layouts where clarity matters

Design & UX Tips

Place search fields where users expect them (header, top of content, sidebar)
Keep the field large enough to be easily clickable, especially on mobile
Limit search scope on focused pages to avoid overwhelming results
Use rounded fields for friendly brands, sharp edges for corporate or minimal styles
Test contrast and font size for accessibility

You may not need a search widget if:

The site is very small (few pages)
Navigation is already extremely simple
The page has a single, focused goal (e.g. one-off landing pages)

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

Summary

The Search widget allows you to:

Let users search across pages, store, blog, and portfolio content
Control exactly where searches are performed
Customize placeholder text for clarity
Fully style the search field (colors, fonts, borders, spacing)
Create a familiar, user-friendly search experience

Used thoughtfully, the Search widget improves navigation, usability, and content discovery—especially on content-rich or growing websites.