FEKBD ADDONS · WIDGET #89

Search that feels like an app. Results appear as you type — photos, prices, savings, matching categories, quick add. Click the empty field for recent searches, trending ideas and top picks. Voice search, keyboard shortcuts, a command palette and a full-screen overlay are one switch away.

ONLINE STORE · SHOP HEADER

The classic store bar: a category dropdown, the field and a button. Results show the saving on each photo, the category and SKU, a sort switch and quick add / quick view buttons. Try “bottle” or pick a category first.

segmented barcategory dropdownsort tabsquick addquick viewin-stock switch
TECH STORE · COMMAND PALETTE

A search button that opens a focused search window — the way developer tools and modern apps do it. Use ↑ ↓ to move through results, Enter to open, Esc to close. The keyboard shortcut works from anywhere on this page.

command paletteCtrl/⌘ K and /keyboard navigationrecent searches
GIFT SHOP · FULL-SCREEN OVERLAY

One tap on the search bar and the whole screen becomes the search — a big heading, a large field, gift ideas to tap and photo cards as results. Great for mobile headers and gift guides.

full-screen overlayphoto cardstrending chipstyping placeholder
LIFESTYLE STORE · GLOWING BORDER

A glowing, slowly turning gradient border draws the eye to search. Categories sit underneath as chips instead of a dropdown, and results come as two-column tiles.

gradient bordercategory chipstwo-column tilestinted panel
NIGHT MODE STORE · PILL + DARK PANEL

A rounded pill with the button inside and a dark results panel. Compact rows fit more products in less space — name and price on one line. The microphone lets shoppers search by voice where the browser supports it.

pilldark panelcompact rowsvoice search
MAGAZINE · MINIMAL UNDERLINE

Just a line and a placeholder that types out ideas. When focused, a gradient line draws across and results arrive as a clean name-and-price list.

SITE HEADER · ICON THAT EXPANDS

A round search icon that stretches into a full field when clicked — perfect next to a menu. Click the icon to try it.

BIG CATALOG · HERO SEARCH

For shops where most visitors arrive knowing what they want: a large hero search with a category dropdown, a smart fallback when nothing matches (try “blue speaker” or “zzz”) and top picks before you type.

hero searchsmart fallbacktop picksphoto cards

201 premium elements, WooCommerce Search included.