E-commerce Prompts

Create a complete e-commerce product page: **Product Gallery:** - Main image (large, 500x500) - Thumbnail strip below (4-6 images) - Click thumbnail to change main image - Zoom on hover (scale 1.5x) **Product Info:** - Product title - Price (with sale price in red if on sale) - Star rating (4.5/5 based on 128 reviews) - "In stock" or "Only 3 left!" indicator **Variants:** - Size selector: S / M / L / XL buttons - Color selector: color swatches (click to select) - Selected state: border highlight **Actions:** - Quantity selector (+/- buttons) - "Add to Cart" primary button (full width on mobile) - "Buy Now" secondary button - Wishlist heart icon **Tabs:** - Description tab - Specifications tab (table) - Reviews tab **Related Products:** - 4 products horizontal scroll - "You may also like" title Tech: React, Tailwind, Zustand for cart state

Build a slide-in cart drawer: **Trigger:** - Cart icon in header with item count badge - Click opens drawer from right (300ms slide) - Click outside or X closes it **Drawer Content:** - Header: "Your Cart (X items)" + X button - Scrollable item list **Each Item:** - Product thumbnail (60x60) - Title and variant info - Quantity selector (- / count / +) - Remove button (trash icon) - Line total price - Subtle divider between items **Summary:** - Subtotal - Estimated shipping - Tax (calculated) - Total (bold) **Actions:** - "Checkout" primary button - "Continue Shopping" link **Empty State:** - "Your cart is empty" - "Start Shopping" button Animate slide from right, backdrop overlay (black 50% opacity)

Create a checkout flow: **Step 1 - Information:** - Email input - "Create account" checkbox - Phone number (optional) **Step 2 - Shipping:** - Full name - Address line 1 - Address line 2 (optional) - City, State/Province, Postal code - Country dropdown - "Save for next time" checkbox **Step 3 - Payment:** - Stripe Elements card input - Billing address (same as shipping checkbox) - Promo code input + Apply button **Order Summary (right sidebar on desktop, collapsible on mobile):** - Item list with thumbnails - Subtotal - Shipping - Tax - Total **Security Badges:** - SSL secure lock icon - "100% secure checkout" text - Payment method icons (Visa, MC, Amex, PayPal) **Success Page:** - Checkmark animation - Order number - "Thank you for your order!" - Email confirmation notice - "Continue Shopping" button Use Stripe.js for payment processing

Build a product listing page: **Header:** - Page title: "Shop All Products" - Product count: "Showing 24 products" **Filters (left sidebar on desktop, drawer on mobile):** - Category checkboxes - Price range slider ($0 - $500) - Color swatches - Size buttons - "Clear All" link **Sort Dropdown:** - Featured - Price: Low to High - Price: High to Low - Newest - Best Selling **Product Card:** - Image (aspect-ratio 1:1) - Hover: second image fade in - Wishlist heart icon (top right) - Product name - Price (sale price in red) - Star rating - "Add to Cart" button on hover (desktop) **Pagination:** - Page numbers: 1 2 3 ... 10 - "Next" / "Previous" arrows Responsive: 4 cols desktop, 3 tablet, 2 mobile

Create an inventory management dashboard: **Stats Cards (top row):** - Total Products - Low Stock Alerts (red highlight if any) - Total Orders (today) - Revenue (today) **Product Table:** - Image thumbnail - Name & SKU - Category - Price - Stock quantity (highlight red if < 10) - Status (In Stock / Low Stock / Out of Stock) - Actions: Edit / Delete buttons **Features:** - Search products by name/SKU - Filter by category, stock status - Sort by name, price, stock - Bulk actions: Select multiple → Delete / Update status **Add Product Modal:** - Image upload - Name, Description - SKU - Category dropdown - Price, Compare-at price - Stock quantity - Status dropdown Supabase for data, include RLS policies