Product listing page with filters, cart, and checkout flow. Complete shopping experience.
Prompt
Build an e-commerce product listing page for a sneaker store. Include:
- Header with logo, search bar, and cart icon with item count
- Sidebar with filters (brand, size, color, price range)
- Product grid with 12 products (image placeholder, name, price, "Add to cart" button)
- Product cards with hover effect showing quick view
- Shopping cart sidebar that slides in
- Responsive grid that adjusts columns
Use vanilla JS for cart functionality (add, remove, update quantity). Store cart in localStorage. Put in ~/data/public/
1
Copy the prompt above
2
Paste in Claude Code terminal
3
Your project is live
ecommerceshopstoreproducts
About this prompt
Building an e-commerce frontend from scratch requires handling product grids, filtering, cart state management, and responsive design. This prompt generates a complete shopping experience with a product grid, sidebar filters, a slide-in cart, and quantity management — all using vanilla JavaScript and localStorage. No frameworks, no backend dependencies.
What you get
✓ Product grid with 12 items, images, names, and prices
✓ Sidebar filters for brand, size, color, and price range
✓ Add to cart functionality
✓ Slide-in cart sidebar with quantity controls
✓ Cart stored in localStorage (persists across page reloads)
✓ Responsive grid that adjusts columns
✓ Hover effects with quick view
✓ Header with search bar and cart icon with item count
Frequently asked questions
Does it connect to a real payment system?
This prompt creates the frontend shopping experience. For payments, ask Claude to add Stripe checkout integration as a follow-up.
Can I add more products?
Yes. The product data is in a JavaScript array. Add more items or ask Claude to fetch products from an API.
Does it have a backend?
No — this is a frontend-only implementation using localStorage. For a full backend with database, use the REST API prompt as a companion.