Shop & E-Commerce
Add a full online store to any e-commerce website — products, cart, checkout, and orders.
Overview
The e-commerce feature adds a complete shopping flow to your generated website:
Product Catalogue
Add unlimited products with price, stock, category, and images
Cart Drawer
Slide-in cart on every page — add, update, remove items
Hosted Checkout
Secure hosted checkout at aibuildpro.in/checkout/[slug]
Enable the shop
The shop is only available for websites with the E-Commerce category. When generating a new site, choose "Shop / E-Commerce" as the category and the generated HTML will include:
- A shop page (shop.html) with product listings and category filters
- Add-to-cart buttons on each product card
- A cart drawer that slides in from the right
- A cart icon with live item count in the navigation
- A checkout button that redirects to the hosted checkout page
Managing products
Go to Products in the sidebar. From here you can:
Add a product
Click New Product. Fill in the name, price, compare price (for showing a crossed-out MRP), category, emoji icon, stock quantity, and a short description.
Edit a product
Click the pencil icon on any product card. Changes take effect immediately — no need to regenerate the site.
Toggle availability
Use the Active and In Stock toggles on each card to show/hide a product or mark it as out of stock without deleting it.
Delete a product
Click the trash icon. This is permanent.
Dynamic product loading
The generated shop page loads products dynamically from the API at runtime. You can add or update products without regenerating the HTML.
Managing orders
Go to Orders in the sidebar to see all orders placed on your store. For each order you can view:
- Order number, date, and total amount
- Customer name, email, phone, and shipping address
- Items ordered with quantities and individual prices
- Payment method and status (paid / unpaid / failed)
- Order status (pending → confirmed → shipped → delivered)
Click any order row to open the full detail modal. Order notification emails are sent automatically to both the customer and the store email address.
Shipping settings
Go to Shop Settings to configure shipping: