Use AI to create your store, accept UPI/COD orders, receive order details on WhatsApp, and take your website live — step by step.
No React. No complex backend. No traditional payment gateway required for this basic setup.
I recommend watching the video once, then following the steps below while building your own store.
Eleven small steps. Nothing here needs a developer background — you copy a prompt, let AI build the starter project, then replace the demo content with your own.
You need one place where AI can write files for you. That is a code editor with an AI coding assistant built in. Pick either one below — both work exactly the same for this guide.
The most common free code editor. Install it, then add the AI coding assistant you prefer from its extensions marketplace.
An AI-first coding environment. The assistant is already built in, so there is nothing extra to install before you start.
my-ecommerce-store/.AGENTS.md — this is where your AI instructions live.AGENTS.md, save it, and ask your AI tool to read it.
Why a file and not just the chat box? Keeping the instructions in
AGENTS.md means the AI can re-read them at any point during the build,
and you can tweak a line without retyping the whole prompt.
This is the full instruction set that tells the AI exactly what to build: the pages, the product JSON, the cart, the UPI and COD checkout, and the WhatsApp order message. Copy it as-is.
Create a modern, premium, minimalist e-commerce website for technical gadgets using only HTML, CSS, vanilla JavaScript, and one JSON file for product data.
The website should still be beginner-friendly and easy to modify, but it should look like a real small e-commerce store rather than a basic demo.
MAIN GOAL:
Build a complete basic shopping flow:
Home → Products → Product Details → Cart → Checkout → UPI/COD → WhatsApp Order Confirmation
Do not use React, PHP, Node.js, databases, login systems, or any framework.
Use only:
- HTML
- CSS
- Vanilla JavaScript
- JSON
- localStorage for cart data
WEBSITE STRUCTURE:
Create separate files/pages:
index.html
products.html
product.html
cart.html
checkout.html
style.css
app.js
products.json
/images
Keep the JavaScript clean and modular.
HOME PAGE:
Create a modern premium homepage for a tech gadgets store.
Hero section:
Heading: “Smart Tech. Simple Shopping.”
Subheading: “Discover useful gadgets, accessories and everyday technology at great prices.”
Add:
- Shop Now button
- Browse Products button
- Clean modern gadget visual
Below the hero, show the Top 3 Categories:
1. Audio
2. Smart Accessories
3. Computer Accessories
Each category should have:
- Image or icon
- Category name
- Short description
- View Products button
Also add a small About Our Store section explaining that the store offers useful and affordable everyday technology products.
Add a small Featured Products section showing around 4 products.
PRODUCTS PAGE:
Create a dedicated products page.
Products should be loaded dynamically from products.json.
Add a very basic search bar:
“Search products...”
Add simple category filtering:
- All
- Audio
- Accessories
- Computer
- Wearables
Add basic sorting:
- Featured
- Price: Low to High
- Price: High to Low
- Name: A-Z
Keep search, filtering and sorting very simple with vanilla JavaScript.
PRODUCT JSON:
Store all products inside products.json.
Example structure:
[
{
"id": 1,
"name": "Wireless Bluetooth Headphones",
"category": "Audio",
"price": 1999,
"discountPrice": 1499,
"image": "images/headphones.jpg",
"shortDescription": "Comfortable wireless headphones with rich sound.",
"description": "Enjoy wireless music, long battery life and comfortable everyday listening.",
"featured": true
}
]
Use around 8 to 10 sample technical gadgets, for example:
- Wireless Headphones
- Bluetooth Speaker
- Smart Watch
- Wireless Mouse
- Mechanical Keyboard
- USB-C Hub
- Power Bank
- Laptop Stand
- TWS Earbuds
- Fast Charger
The most important part is that another person should be able to open products.json and easily change:
- Product name
- Category
- Original price
- Discount price
- Product image
- Short description
- Full description
without editing HTML.
PRODUCT CARDS:
Each product card should show:
- Product image
- Product name
- Category
- Original price
- Discount price
- Discount percentage if applicable
- Add to Cart button
- View Product button
Example:
Wireless Headphones
₹1,999
₹1,499
25% OFF
[ View Product ]
[ Add to Cart ]
Use a subtle strike-through on the original price.
DEDICATED PRODUCT DETAILS PAGE:
Clicking “View Product” should open:
product.html?id=1
Read the product ID from the URL and load that product from products.json.
Show:
- Large product image
- Product name
- Category
- Original price
- Discount price
- Discount percentage
- Product description
- Quantity selector
- Add to Cart button
- Buy Now button
Keep it simple.
Do not create complicated variants, reviews, inventory systems, or unnecessary features.
CART PAGE:
Create a dedicated cart.html page.
Show:
- Product image
- Product name
- Price
- Quantity
- Increase quantity
- Decrease quantity
- Remove product
- Product subtotal
At the bottom show:
- Subtotal
- Discount Savings
- Total
Add a “Proceed to Checkout” button.
Store the cart using localStorage so that navigating between pages does not remove the cart.
Also show a cart item count in the navbar.
CHECKOUT PAGE:
Create checkout.html.
Show the order summary on one side and customer details on the other.
Customer fields:
- Full Name
- Phone Number
- Delivery Address
Payment options:
- UPI
- Cash on Delivery
STORE CONFIG:
Store the seller/business details inside one easy-to-edit configuration section in JavaScript:
const STORE_CONFIG = {
storeName: "TechStore",
upiId: "yourupi@bank",
upiName: "Your Name",
whatsappNumber: "919999999999"
};
The user should only need to edit this config section to change their UPI and WhatsApp details.
UPI PAYMENT:
If UPI is selected:
- Automatically calculate the complete cart total.
- Generate a standard UPI payment link using upi://pay
- Include:
- UPI ID
- Seller name
- Exact cart amount
- INR currency
- Payment note
- Generate a QR code automatically from the UPI payment link.
- Show “Scan & Pay”.
- On mobile, show a “Pay via UPI” button that opens the installed UPI app.
The QR amount must always match the final cart total.
UPI TRANSACTION ID / UTR:
After UPI payment, show an optional field:
“UPI Transaction ID / UTR”
Also clearly show:
“Your payment will be manually verified by the seller.”
Do not pretend that payment is automatically verified.
CASH ON DELIVERY:
If Cash on Delivery is selected:
Hide:
- QR code
- UPI payment button
- UTR field
Allow the customer to continue with the order normally.
WHATSAPP ORDER CONFIRMATION:
Add a “Confirm Order on WhatsApp” button.
When clicked, open WhatsApp with a pre-filled message containing:
- Store name
- Customer name
- Phone number
- Delivery address
- Ordered products
- Quantity of each product
- Product subtotal
- Final total
- Payment method
- UTR number, if available
Example:
New Order - TechStore
Customer:
Vinod Thapa
Phone:
9876543210
Address:
Pune, Maharashtra
Order:
1. Wireless Headphones
Qty: 1
₹1,499
2. USB-C Hub
Qty: 2
₹1,998
Total:
₹3,497
Payment:
UPI
UTR:
123456789012
For COD:
Payment: Cash on Delivery
Use the standard WhatsApp link:
https://wa.me/
No WhatsApp API should be required.
NAVIGATION:
Create a clean responsive navbar:
Logo / Store Name
Home
Products
Cart
On the right show:
Cart (2)
Make the navbar responsive on mobile.
DESIGN STYLE:
The complete website should look:
- Premium
- Minimal
- Modern
- Clean
- Professional
- Beginner-friendly
Use:
- Plenty of white space
- Soft shadows
- Rounded cards
- Large product images
- Clean typography
- Subtle hover effects
- Neutral colors with one premium accent color
- Smooth transitions
- Clear CTA buttons
Avoid:
- Heavy animations
- Too many gradients
- Too many colors
- Large libraries
- Complex layouts
- Unnecessary UI clutter
The website should feel similar to a modern electronics/startup store.
RESPONSIVE DESIGN:
Make the website fully responsive for:
- Desktop
- Tablet
- Mobile
On mobile:
- Product cards should stack properly
- Cart should remain easy to use
- Checkout should become a single-column layout
- Buttons should remain large enough to tap
- Product images should scale correctly
- Navbar should work properly
BEGINNER-FRIENDLY CODE:
Add useful comments in JavaScript such as:
// Load products from JSON
// Search products
// Filter products by category
// Sort products
// Add product to cart
// Save cart to localStorage
// Update cart quantity
// Calculate total price
// Generate UPI payment link
// Generate QR code
// Generate WhatsApp message
Do not over-engineer the JavaScript.
Prefer simple functions and easy-to-understand logic.
IMPORTANT:
Because products.json is loaded with JavaScript fetch(), make sure the project is intended to be run through a local server or hosting, not directly with file:// if the browser blocks JSON fetching.
Use relative paths properly so that the same project works when uploaded to normal shared hosting.
TEST EVERYTHING:
After creating the website, run and test the complete flow:
Home
→ Products
→ Search
→ Filter
→ Sort
→ Product Details
→ Add to Cart
→ Cart
→ Change Quantity
→ Checkout
→ UPI QR / COD
→ WhatsApp Order Confirmation
Check:
- No broken JavaScript
- Products load correctly from products.json
- Search works
- Category filtering works
- Sorting works
- Product URL ID works
- Add to Cart works
- Cart persists using localStorage
- Cart count updates correctly
- Quantity updates correctly
- Remove product works
- Discount price calculations are correct
- Discount savings are correct
- Final total is correct
- UPI amount matches cart total
- QR generation works
- Mobile UPI link works
- COD correctly hides UPI fields
- WhatsApp message contains correct details
- Responsive design works properly on mobile
- No unnecessary console errors
Fix any issues you find.
FINAL REQUIREMENT:
Keep this a simple educational e-commerce project, but visually make it look like a polished real-world tech gadget store.
The user should mainly need to edit only two places later:
1. products.json
For:
- Product names
- Prices
- Discount prices
- Images
- Categories
- Descriptions
2. STORE_CONFIG
For:
- Store name
- UPI ID
- UPI name
- WhatsApp number
The final working flow must remain:
Home → Products → Product Details → Cart → Checkout → UPI/COD → WhatsApp Order Confirmation
---
IMPORTANT — DO NOT IMPLEMENT YET
First, read this entire AGENTS.md file carefully and inspect the existing project/files.
Do NOT create, edit, delete, or modify any file yet.
Your first task is only to understand:
- what needs to be built
- the required pages and features
- the complete user flow
- the existing project structure
- what files will need to be created or changed
If you fully understand everything, reply only with:
YES — I understand the complete requirement.
Then give me a very short implementation plan in 5–8 points.
After that, STOP and wait for my confirmation.
Do not start implementation until I explicitly say:
IMPLEMENTAGENTS.md and point the AI at the file).
The prompt deliberately ends by asking the AI to confirm it understands and to wait for you
to type IMPLEMENT. That pause is intentional — read its plan before any files
get created.
While building, the coding AI may stop and ask something like: “Should I use an external QR API or a small local QR JavaScript library?” Send it this reply:
Use a small local qrcode.min.js file.
Do not use an external QR API or CDN.
Generate the QR locally from the UPI payment link and exact cart total.
Keep it simple and beginner friendly.
The AI ships the store with sample gadgets so you can see it working. Your real job starts here:
swapping that demo catalog for what you actually sell. Everything lives in one
products.json file — you never touch the HTML.
{
"id": 1,
"name": "Wireless Headphones",
"category": "Audio",
"price": 1999,
"discountPrice": 1499,
"image": "images/headphones.jpg",
"shortDescription": "Wireless headphones with rich sound."
}idA unique number for the product. Keep them different — 1, 2, 3 and so on.nameThe product title customers see on the card and detail page.categoryUsed by the category filter on the products page.priceThe original price, shown with a strike-through.discountPriceWhat the customer actually pays. The discount percentage is calculated from these two.imagePath to your product photo, for example images/headphones.jpg.shortDescriptionOne line shown on the product card.You normally only need to change the product name, image, category, original price, discount price and description. Copy one product block, paste it as many times as you have products, and edit those fields.
Everything about your business sits in one small configuration block in the JavaScript. Until you edit it, orders go to a placeholder number and payments go nowhere.
const STORE_CONFIG = {
storeName: "Your Store Name",
upiId: "yourupi@bank",
upiName: "Your Name",
whatsappNumber: "919999999999"
};storeNameYour shop name. It appears in the navbar and at the top of every WhatsApp order.upiIdYour real UPI ID, the one money should reach.upiNameThe name shown to the customer while they pay.whatsappNumberThe number that receives orders — country code and digits only.
WhatsApp number format. Use the country code followed by the digits, with
nothing else. For India that looks like 919876543210 — no + sign,
no spaces, no hyphens.
Before sharing your website publicly, test the payment flow using a small amount and make sure the UPI ID and WhatsApp number are correct. A typo here means a real customer pays the wrong account.
Here is the whole journey, from a customer landing on your store to you confirming the money arrived. Nothing is hidden — every step happens in plain JavaScript in your own project.
The UPI Transaction ID / UTR does not automatically verify the payment. It is simply a reference number the customer types in, and it travels along with the order message.
You, the seller, should verify the transaction manually in your UPI or banking app before dispatching anything.
If you need automatic verification, refunds or webhooks, that is a different setup — it requires a proper payment gateway and a backend.
Run through this on your own machine before anyone else sees the site. Tick each item as you confirm it — the list is yours to play with, nothing is submitted anywhere.
Test the UPI step on an actual phone, not just the desktop browser. The Pay via UPI button only opens a real payment app on mobile.
This project is plain HTML, CSS and JavaScript, so it does not need a VPS or a server runtime. Normal compatible web or shared hosting is enough for a static project like this.
Shared hosting with a domain is all this store needs. Once your hosting and domain are active, the deployment prompt in Step 7 does the rest.
The connector is what lets your AI coding tool talk to your Hostinger account directly, so it can upload the finished site for you instead of you dragging files around in a file manager.
Once the connector is successfully connected, your AI coding tool can help you deploy the current website to your Hostinger hosting.
Exact button names and screens change from time to time, and they differ between editors. Follow whatever the connector's own setup screen tells you — the five steps above are the parts that stay the same. The video walks through the current screens.
This second prompt does one job: take the site exactly as it is and put it on your domain without redesigning anything.
Our current e-commerce website is complete and ready to deploy.
The Hostinger Connect/connector is already configured and connected in this project.
Now deploy the **current website exactly as it is** to my Hostinger domain:
**https://ecom.kodyfier.com**
Before deploying:
- Verify that the project builds/runs correctly.
- Do not redesign or modify the website.
- Do not change existing functionality unless something is strictly required for deployment.
- Use the already connected Hostinger tools/connector.
- Make sure the deployment targets **ecom.kodyfier.com** and does not affect any other domain or website in my Hostinger account.
Then deploy the website and verify that **https://ecom.kodyfier.com** is live and loading correctly.Paste this prompt into your AI coding environment after Hostinger Connector is successfully connected. The prompt names a domain as an example — swap in the domain you actually own before sending it.
You started with manual Instagram and WhatsApp orders. Now you have:
AI isn't running your business for you. It's helping reduce repetitive work so you can spend more time on products, marketing, customers and creativity.
Build real projects with HTML, CSS, JavaScript, React, Node and modern AI workflows in live classes with doubt-clearing support.
Explore the Bootcamp