E-commerce
E-commerce — Search Results Page
Copy-paste layout brief covering Search Bar, Search Suggestions, Search Results Page and Results Grid — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Search Results Page is a copy-ready build prompt for e-commerce pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
We keep this entry in sync on a schedule, so the counts and the description track the upstream project.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
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.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts