Product Listing Page
E-commerce category page with filters and product grid
Catalog Filters Grid
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
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).So verwendest du diesen Prompt
- 1 Kopiere den Prompt oben
- 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
- 3 Die KI generiert den Website-Code für dich
- 4 Passe an und iteriere nach deinen Bedürfnissen
Mehr E-Commerce Prompts
Über diesen E-Commerce Prompt
Dieser Product Listing Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle e-commerce-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.
Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von product listing page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.
Kompatible KI-Tools
- ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
- Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
- v0 von Vercel - Perfekt für React- und Next.js-Komponenten
- Cursor - Ideal für KI-gestütztes Coding in deiner IDE
- Bolt.new - Schnelles Prototyping und Full-Stack-Apps
- Lovable - Benutzerfreundlicher KI-Website-Builder
Tags
Catalog Filters Grid E-Commerce KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt