PROMPTFree BlueprintLicense: MIT
Prompt to Prompt: Build a Modern E-commerce Website
Prompt to Prompt: Build a Modern E-commerce Website is a verified PROMPT blueprint on Promptally in System & Base Contexts optimized for leading AI models. Curated Coding prompt from awesome-prompts library split. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Created by @promptallyTechnical Specifications
| Specification | Value |
|---|---|
| Artifact type | PROMPT (System & Base Contexts) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 868 |
| Source file | prompt-prompt-build-a-modern-e-commerce-website.txt |
| Access tier | Free public (MIT) |
Pre-Filled Template
prompt-prompt-build-a-modern-e-commerce-website.txt
Here’s a strong **copy-paste prompt** you can use with ChatGPT, Claude, Gemini, or an AI website builder: Act as a senior full-stack web developer and UI/UX designer. I want you to build a modern, professional, fully responsive **e-commerce website** from scratch. ### Goal Create a clean and attractive online shopping website suitable for a real business. The website should work smoothly on mobile, tablet, and desktop. ### Technology Use: * HTML5 * CSS3 * JavaScript * Use a single HTML file with CSS and JavaScript included inside it. * Do not use a backend unless absolutely necessary. * Use clean, well-organized, beginner-friendly code. ### Website Features 1. **Header/Navbar** * Professional logo/store name * Home * Shop * Categories * About * Contact * Search icon/bar * Shopping cart icon with item count * Login/Register button 2. **Hero Section** * Large promotional banner * Attractive headline * Short description * "Shop Now" button * Modern e-commerce design 3. **Categories** Create attractive category cards such as: * Electronics * Fashion * Shoes * Accessories * Beauty * Home & Living 4. **Product Section** Display multiple product cards containing: * Product image * Product name * Rating * Original price * Discounted price * Discount percentage * "Add to Cart" button * "Buy Now" button * Wishlist/heart button 5. **Product Search & Filter** Add working JavaScript functionality for: * Product search * Category filtering * Price sorting * Rating sorting 6. **Shopping Cart** Create a functional cart where users can: * Add products * Remove products * Increase/decrease quantity * See subtotal * See total price * Clear cart 7. **Checkout** Create a professional checkout page/section with: * Customer name * Email * Phone * Address * City * State * PIN code * Payment method * Order summary * Place Order button 8. **Special Sections** Add: * Flash Sale * Best Sellers * New Arrivals * Customer Reviews * Newsletter subscription 9. **Footer** Include: * About the store * Quick links * Customer support * Privacy Policy * Terms & Conditions * Social media icons * Copyright ### Design Requirements * Premium and modern UI * Clean typography * Attractive product cards * Smooth hover animations * Responsive layout * Mobile-friendly hamburger menu * Good spacing and alignment * Professional color scheme * Smooth scrolling * Accessible buttons and forms * Add subtle animations without making the website slow ### JavaScript Requirements Make the following features actually work: * Search * Category filtering * Sorting * Add to cart * Remove from cart * Quantity controls * Cart total calculation * Wishlist button * Mobile navigation * Checkout form validation * Order confirmation message Use sample products and realistic product images from publicly accessible image URLs. ### Important Do not give me only an explanation. **Build the complete working website code.** Return the complete code in one HTML file that I can save as `index.html` and open directly in a browser. Make the final result look like a professional real-world e-commerce website rather than a basic demo. I can also create a **complete working e-commerce website from this prompt** and give you the HTML/CSS/JavaScript code.
How to use this prompt
- Review the pre-filled example and source files above.
- Copy the template or download
prompt-prompt-build-a-modern-e-commerce-website.txt, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use Prompt to Prompt: Build a Modern E-commerce Website?
Open the prompt on Promptally, review the pre-filled example, then copy the template or download prompt-prompt-build-a-modern-e-commerce-website.txt and paste it into your model, IDE or workflow tool. Prompt to Prompt: Build a Modern E-commerce Website is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is Prompt to Prompt: Build a Modern E-commerce Website free?
Yes. Prompt to Prompt: Build a Modern E-commerce Website is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does Prompt to Prompt: Build a Modern E-commerce Website need?
Prompt to Prompt: Build a Modern E-commerce Website is a static blueprint with no dynamic variables. Copy it and use it as-is.