Search Results Page

Create an e-commerce search experience:

1. SEARCH BAR
Default state:
- Search icon
- Placeholder: "Search products..."
- Recent searches (if any)

Expanded/Focus state:
- Full-width overlay or dropdown
- Search input with clear button
- Voice search icon (optional)

2. SEARCH SUGGESTIONS (as you type)
Autocomplete dropdown:
- Search suggestions (text matches)
- Product suggestions (with thumbnails)
- Category suggestions
- Brand suggestions

Layout:
- Suggestions grouped by type
- Highlight matching text
- Keyboard navigation support

3. SEARCH RESULTS PAGE
Header:
- Search query shown
- Result count: "156 results for 'running shoes'"
- "Did you mean..." (if spell correction)

Filters (same as category page):
- Category filter
- Price range
- Brand
- Size
- Color
- Rating

Sort options:
- Relevance (default)
- Price Low-High
- Price High-Low
- Newest
- Best Selling

4. RESULTS GRID
- Same product cards as category page
- Highlight search term in product names
- "Sponsored" badge for promoted products

5. NO RESULTS STATE
- "No results found for '[query]'"
- Suggestions:
  - Check spelling
  - Try broader terms
  - Browse categories

Alternatives:
- Popular products
- Trending searches
- Category links

6. FILTERS APPLIED STATE
- Show active filters as tags
- Clear individual or all filters
- Update results dynamically

7. MOBILE SEARCH
- Full-screen search overlay
- Recent searches
- Voice search option
- Filter as bottom sheet

8. SEARCH ANALYTICS (for development)
- Track search terms
- Track no-result queries
- Click-through rate on results

Design: Fast, responsive. Show results as user types. Help users find what they want quickly.