Designing search that works with your menu, not against it

In most Shopify stores, search and navigation exist as separate experiences. The menu is carefully organized into categories and subcategories with intentional hierarchy. The search bar sits in the header as an independent tool that ignores everything the menu does. When a shopper types a query, search returns a flat list of products ranked by relevance, with no connection to the category structure the store spent weeks building.

This disconnect creates problems. The shopper who searches for “jacket” sees a mixed list of men’s jackets, women’s jackets, denim jackets, and rain jackets. The category system already sorted these into logical groups, but search ignores that work and presents everything in a flat results page. The shopper has to re-sort mentally — or give up and go back to browsing.

The better approach is to design search as an extension of navigation, not a replacement for it. When search results reference categories, when autocomplete suggests browsing paths, and when the search experience inherits the structure of the menu, the two systems reinforce each other instead of competing.

Autocomplete that bridges search and browse

The most important moment in the search experience is not the results page — it’s the autocomplete dropdown. This is where most shoppers form their expectation of what the store carries. Good autocomplete serves as a hybrid between searching and browsing.

A basic autocomplete shows matching products: the shopper types “shoe” and sees individual product tiles. A better autocomplete also shows matching categories from the menu structure:

• “Women’s Shoes (89 products)” — links to the collection page
• “Men’s Shoes (64 products)” — links to the collection page
• “Kids’ Shoes (31 products)” — links to the collection page
• “Running Shoe Pro Max” — links to the product page
• “Leather Shoe Care Kit” — links to the product page

When the shopper clicks a category suggestion, they enter the browsing flow with the full category experience: filters, sorting, subcategory navigation, and the curated layout the store designed. This is often more useful than a search results page because the category page has context that search results lack — editorial content, featured products, visual merchandising.

Shopify’s native predictive search API supports this pattern. Third-party search apps like Searchanise, Boost Product Filter & Search, and Algolia build it into their autocomplete widgets. The configuration is usually straightforward: enable “category suggestions” or “collection suggestions” in the search app settings.

The key design decision is ordering. Category suggestions should appear near the top of the autocomplete, not buried below a long list of product matches. If the shopper types a broad term like “dress,” the category suggestion “Dresses (142)” is likely more useful than any individual product result.

Category-scoped search

When a shopper has browsed into a specific collection — say, Women’s Dresses — and then uses the search bar, what should happen? In most stores, the search ignores the current page and searches the entire catalog. The shopper typed “floral” hoping to find floral dresses, but the results include floral phone cases, floral prints, and floral candles from other categories.

Category-scoped search solves this by defaulting to search within the current collection when the shopper is on a collection page. The search bar shows a visual indicator: “Search in Women’s Dresses” — with an option to expand to the full catalog if needed.

Not every search app supports scoped search natively. Some alternatives:

• Filter-based scoping. If the search app doesn’t support scoping, the shopper can achieve the same result using filters on the collection page. A tag or product type filter for “floral” within the Women’s Dresses collection produces the same result set.
• URL-based scoping. Some Shopify themes allow the search to append a collection filter to the query, like /search?q=floral&collection=womens-dresses. This requires theme customization but is technically straightforward.
• Visual scoping cues. Even without technical scoping, showing the current collection context in the search results helps. A breadcrumb on the results page — “You searched for ‘floral’ in Women’s Dresses” — with a link to remove the scope signals to the shopper that they’re in context.

Search results that feel like collection pages

A flat list of product results ranked by relevance is how most search engines present results, but it strips away all the navigation context the store has built. Compare a search results page to a collection page:

Feature	Collection page	Typical search results
Category filters	Yes — size, color, price, brand	Usually absent
Sorting options	Yes — price, newest, popularity	Limited or absent
Subcategory links	Yes — from the menu	Never
Visual merchandising	Yes — featured products, banners	No
Breadcrumb	Yes — shows hierarchy	Just “Search results”

The gap between these two experiences is a design choice, not a technical limitation. The best search implementations bring collection-page features into the results:

• Filter sidebar on search results. Let shoppers narrow search results by the same filters they’d use on a collection page — size, color, price range, brand. This turns a flat keyword search into a guided refinement experience.
• Category grouping in results. Instead of a single ranked list, group results by category. “Jackets” shows results under “Men’s Jackets” and “Women’s Jackets” as separate groups. The shopper can expand the relevant group.
• Breadcrumb with category link. Each product in the search results shows its category as a clickable link. The shopper searching for “blue” can see that a product belongs to “Women’s Dresses” and click to browse that entire collection.

Mobile: two tools, equal access

On mobile, search and navigation often compete for the same limited header space. The hamburger menu icon sits on one side, the search icon sits on the other, and both require a tap to expand. Neither is immediately active or visible.

The better pattern is to separate them spatially. A tabbar at the bottom of the screen can include both a Categories button and a Search button. The shopper doesn’t choose between them — both are equally accessible, always visible, one tap each. Switching from search to browse (or the reverse) doesn’t require scrolling to the header.

This matters because mobile shoppers switch between search and browse more often than desktop shoppers. The small screen makes browsing harder — menus are compressed, collection pages show fewer products — so shoppers are more likely to try search when browsing gets frustrating. And when search returns poor results, they want to fall back to the menu quickly. A tabbar keeps both exits open.

With Navi+, the tabbar layout includes configurable buttons for both Categories and Search, each with custom icons and labels. The shopper taps Categories to open the slide menu with the full category structure, or taps Search to open an instant search overlay. The transition between the two is one tap in either direction.

Making the connection intentional

The default in most Shopify themes is to treat search and navigation as separate features that happen to coexist in the header. Making them work together requires intentional design decisions: autocomplete that suggests categories, search results that include navigation context, collection pages that support in-context search, and mobile interfaces that provide equal access to both tools.

None of these changes require rebuilding the store. Most are configuration options in search apps or minor theme customizations. The effort is small, but the impact compounds — each integration point reduces the chance that a shopper hits a dead end, whether they started with the menu or the search bar.

This article is part of the larger guide on Search vs navigation: which converts better and when to use each.