E-commerce
E-commerce — Product Listing Page
Copy-paste layout brief covering Page Header, Filter Sidebar, Toolbar and Product Grid — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Product Listing 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.
If something here is out of date, the source link below is always the canonical reference.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create an e-commerce product listing page:
1. PAGE HEADER
- Breadcrumb: Home > Category > Subcategory
- Category title and description
- Product count: "Showing 48 of 156 products"
2. FILTER SIDEBAR (left side, collapsible on mobile)
Filter sections:
- Categories (checkbox list with counts)
- Price Range (slider or min/max inputs)
- Brand (checkbox list)
- Size (button group: XS, S, M, L, XL)
- Color (color swatches)
- Rating (star filter, 4+ stars, 3+ stars, etc.)
- Availability (In Stock only toggle)
Actions:
- "Clear All" link
- Applied filters as removable tags
- "Apply Filters" button (mobile)
3. TOOLBAR
- View toggle: Grid / List
- Sort dropdown: Featured, Price Low-High, Price High-Low, Newest, Best Selling, Rating
- Items per page: 24 / 48 / 96
4. PRODUCT GRID (3-4 columns desktop, 2 mobile)
Each product card:
- Product image (hover shows second image)
- Wishlist heart icon (top right)
- Sale badge (if applicable): "-20%" or "SALE"
- New badge (if new arrival)
- Product name (truncate if long)
- Brand name (smaller text)
- Star rating with review count
- Price (show original crossed out if on sale)
- Color options (small swatches)
- "Add to Cart" button (appears on hover)
- Quick view button
5. PAGINATION
- Page numbers with prev/next
- Or "Load More" button
- Or infinite scroll
6. EMPTY STATE
When no products match filters:
- "No products found"
- Suggestions to adjust filters
- "Clear filters" button
7. MOBILE CONSIDERATIONS
- Filter button opens slide-out panel
- Sticky filter/sort bar
- Two-column grid
- Bottom sheet for sort options
Design: Clean, spacious grid. Quick interactions. Fast filtering (no page reload).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