How to build an online store with AI

A small store works best when you decide the basics first. AI can generate the code quickly, but it still needs a clear brief.

Write down:

• what you’re selling
• how many products you want in version one
• whether customers can buy directly or just send an enquiry
• what pages you need
• what information each product needs

For a simple store, the first version usually needs:

• a home page
• a shop or catalog page
• a product detail page
• a cart page or checkout button
• an about or contact page

Also decide how product data will be handled. If you only have a few products, you can start with hardcoded product content in the site. If you want to manage products, customer accounts, or order data later, that’s when a database starts to matter.

Keep the first build narrow. Three to six products is enough to prove the flow.

In Moremade, you describe the website in plain language and the AI agent writes the React and Tailwind code. You then get a live preview and can keep changing the site by chat.

Your first prompt should cover structure, style, and the main interactions. Be specific about what should exist on the page, but avoid trying to specify every pixel.

A useful first prompt includes:

• the type of store
• the pages to generate
• the product fields to show
• the layout style
• the checkout behaviour
• any content tone or brand constraints

Example:

Build a small online store for a handmade candle brand. Create a home page, shop page, product detail page, cart page, and contact page. Use a clean minimal layout with warm neutral colours and clear product cards. Add six example products with name, price, short description, scent notes, and product images as placeholders. The product page should show images, description, ingredients, and an add-to-cart button. The cart should let users change quantity and see subtotal. Make the site responsive and easy to use on mobile.

After the first build, use the live preview as an editing tool. Don’t restart from scratch unless the structure is completely wrong. It’s usually better to make small, direct requests.

In Moremade, you can chat changes, use the visual inspector to point at an element and edit it, and check the code view if you want to see what changed.

Good follow-up prompts are specific and local. Ask for one improvement at a time.

Examples:

• "Change the product grid to 3 columns on desktop and 2 on tablet. Make product cards equal height and keep the add-to-cart button pinned to the bottom."
• "On the product page, move scent notes above ingredients, add a small shipping note below the add-to-cart button, and make the main image larger on desktop."
• "Simplify the home page hero. Use a shorter headline, one supporting sentence, and a primary button that links to the shop page."

This stage is where most of the quality comes from. Check spacing, product hierarchy, button labels, empty states, and whether the cart flow is obvious.

Not every first version needs a full backend.

If you just want a brochure-style shop or a clickable demo, you can keep products in the front-end code and stop there. If you want customers to pay, add Stripe. If you need sign-in, saved user data, or stored product records, add Supabase.

Moremade has built-in connectors for both.

Use Stripe when you need:

• checkout with real prices you set
• a simple payment path for a small catalog

Use Supabase when you need:

• customer sign-in
• a database for products or orders
• file storage

For many small stores, Stripe is the first real integration to add. A practical follow-up prompt would be:

• "Connect checkout to Stripe using the product prices shown on the site. Keep the cart page, show order summary before checkout, and make the checkout buttons clear on mobile."

If you later need customer accounts or inventory-related data, that’s a reasonable point to bring in Supabase rather than forcing it into version one.

Most small stores are judged on mobile first, even if you designed on desktop.

Check these parts carefully:

• home page hero height and button visibility
• product card readability
• image cropping on product pages
• cart quantity controls
• checkout button placement
• form fields and tap targets

Ask for fixes in plain language. For example:

• "Make the mobile menu simpler with larger tap targets and keep the cart icon visible in the header."
• "On phones, stack the product image above the product details and reduce side padding slightly."

If something looks off but you can’t describe it well, use the visual inspector to point at the element first, then request the change.

When the site looks right, publish it.

Moremade can publish in one click to a free yourname.moremade.ai subdomain. On paid plans, you can connect a custom domain. Domains can also be bought inside Moremade.

A simple launch path is:

• publish to the free subdomain for review
• test links, cart flow, and checkout
• connect the real domain when the store is ready

If you want to keep a copy outside the platform, you can export the full source as a ZIP at any time or push it to GitHub. Websites are real React and Tailwind code, so you are not tied to a proprietary format.

The main failure mode is asking the AI to build too much too early.

Avoid these mistakes:

• starting with 20 features instead of a simple catalog and checkout
• writing a vague prompt like "make me an online store" with no product or page detail
• adding sign-in before you know why customers need accounts
• mixing several design directions in one request
• skipping mobile testing until the end
• changing structure and styling in the same prompt when debugging a problem

A better pattern is to build in layers:

1. Generate the basic store structure.
2. Fix layout and content.
3. Add Stripe if customers need to pay now.
4. Add Supabase only if you need stored data or sign-in.
5. Publish, test, and then iterate.

That approach keeps the project understandable and avoids spending Build Units on avoidable rewrites.