Search drawer

Help shoppers find products and important links from any page.

The Search drawer opens from the header and combines predictive search with useful links and optional trending products before a query is entered.

Guide status.

The current Search drawer controls, priority rules, and limits are documented from the schema. Predictive-result and responsive screenshots require accepted browser evidence.

Add or open this feature

In Shopify, open Online Store > Themes > Customize, select the Overlay group, and open Search drawer. Strata allows one Search drawer in the overlay group.

The current overlay order places Search drawer after Cart drawer. The search action in the Header opens this drawer.

Featured links

Select the menu used for featured links when the search field is empty. Dropdown items in this menu are not shown; use direct links at the level you want visitors to see. Choose collections, products, or important pages that deserve a quick path before a search begins.

Heading

Sets the heading above the trending product list. Leave it short enough to work in the drawer at mobile width.

Products

Select hand-picked products to show when search terms are empty. You can select up to 8 products. Hand-picked products take priority over the selected collection.

Collection

Select a fallback collection for the trending list. It is used only when no hand-picked products are selected.

Products to show

Sets how many trending items are displayed, from 2–8 products in 1-product steps. The chosen count is applied to the hand-picked list or fallback collection after the priority rule above.

Empty-query and search states

When the field is empty, the drawer can show the selected trending products and featured links. When a shopper enters a query, predictive search results replace the empty-query content. Use the empty state to answer “where should I start?” and the query state to help a shopper narrow the result.

Content priority matrix

Configuration	Empty-query result
Hand-picked Products selected	The hand-picked products are used.
No hand-picked products, Collection selected	Products are taken from the selected collection.
Neither selected	No trending product list is available.
Menu selected	Featured links are shown without dropdown children.
Shopper enters a query	Predictive results become the main search content.

Desktop and mobile behavior

The drawer adapts its content to the available viewport. Review long product titles, prices, sold-out states, and featured-link labels on mobile before publishing. Exact stacking and result-count presentation will be added after accepted browser review.

Accessibility and motion

Give the Heading enough context when the drawer has a list of products, and keep menu labels descriptive. Verify that opening, closing, typing, clearing, and selecting a predictive result remain keyboard accessible. The global Reduce drawer animation and Enable background blur settings also apply to shared drawer surfaces.

Common issues

The selected collection does not appear: hand-picked Products take priority; clear that list if the collection should be used.
Too many products show: reduce Products to show; the field accepts 2–8.
Dropdown children are missing from featured links: this is expected; the selected Menu shows only its direct links in the drawer.
The drawer has no starting content: select a featured menu, hand-picked products, or a fallback collection.

Version note

This guide follows the current Search drawer schema and overlay-group order. Predictive search results and responsive states still need accepted storefront screenshots.