freewebsitebuilder.app

PROJECT BLUEPRINT · Sellers planning a prototype

Plan an online store with an AI website builder

An online store needs to keep product information, payment status, and fulfilment in agreement. Start by deciding whether you need a catalogue that links to an established checkout or a custom commerce application.

A suggested project plan and original prompt—not a report of a completed Emergent test.

We may earn a commission if you purchase through our links.

What the first version needs

Let customers understand a product and complete a purchase through a reliable checkout.

  • Accurate product descriptions, images, variants, and prices.
  • A clearly selected checkout and payment provider.
  • Order confirmation and a way for staff to manage fulfilment.
  • Shipping, returns, contact, and availability information supplied by the business.

Decide whether custom commerce is necessary

If your main requirement is standard inventory and checkout, an established commerce platform may reduce operational work. AI is useful for exploring a storefront or building specialised experiences, but it does not remove payment, inventory, or customer-service responsibilities. Prototype the design with sample products before choosing the full system.

Define the order lifecycle

An order can be pending, paid, cancelled, refunded, or fulfilled. Decide which system is authoritative for each state. A return from a payment screen is not by itself proof of successful payment. The backend should verify the provider’s confirmation and handle duplicate notifications without creating duplicate orders.

Test the uncomfortable paths

Try an unavailable variant, a changed price, an interrupted checkout, and a refund. Confirm how customers are told that an item cannot be delivered. Use the payment provider’s test environment for development. Never ask the builder to collect or store raw card details in your own form.

Choose between a storefront and a commerce system

A custom-looking product page and a reliable store are different scopes. If a business already uses a commerce platform, an AI-built marketing page can link to its established checkout. Building inventory, payments, orders, returns, and fulfilment from scratch introduces more responsibilities. Decide which system will own the sale before asking for a cart design.

Consider a fictional ceramics seller with twelve products and occasional limited batches. A catalogue with accurate product details and established checkout may solve the problem. A marketplace connecting many independent sellers would be a different application, with additional payment and operational requirements. Do not use the small catalogue as evidence that the marketplace is equally simple.

Prepare product names, approved descriptions, images, prices, currency, variants, dimensions, stock rules, delivery information, and return terms. Product facts should come from the business. The builder should not invent materials, care instructions, availability, or certifications to fill empty space.

Model products and variants clearly

A product describes the item; a variant describes a purchasable configuration. A mug available in two colours may have separate stock counts for each colour. The cart must preserve the chosen variant, quantity, and price basis. A product title alone is not enough to identify what the customer purchased.

RecordMinimum useful informationWhy it matters
ProductName, description, images, categoryExplains what is sold
VariantOptions, identifier, price, availabilityIdentifies the exact purchase
Cart itemVariant and quantityPreserves the customer’s choice
Order linePurchased description and price snapshotRetains the agreement after catalog edits
PaymentProvider reference and verified stateSeparates checkout attempts from paid orders
FulfilmentShipment or collection stateTracks delivery after payment

If a price changes while a customer has an item in the cart, define what happens before checkout. Recalculate using the authoritative price and explain the change. Do not silently charge a different total from the one the customer approved. Likewise, check stock at the appropriate point rather than trusting a stale product page.

Draw the order lifecycle before integrating payments

A useful first lifecycle is draft cart, checkout started, payment pending, paid, fulfilled, and optionally cancelled or refunded. Some payment methods settle later, so the exact states depend on the provider. The important principle is that a browser redirect does not establish payment success. The backend should use the provider’s supported confirmation mechanism.

Repeated notifications must not create duplicate orders or fulfil the same order twice. Keep a stable reference linking the payment to the order. If the customer closes the browser after paying, staff should still be able to see the order and the customer should still receive the appropriate confirmation.

ADAPT THIS PROMPT

Create a sample storefront for twelve ceramics products with colour variants and separate stock counts. Use an established hosted checkout provider in test mode. Keep order lines as purchase-time snapshots. Separate payment and fulfilment states. Recheck price and availability before checkout and handle repeated payment notifications safely. Do not collect raw card details in our own form.

Make product pages answer purchase questions

Show dimensions, materials, what is included, delivery expectations, and business-approved care information. Use photographs that represent the actual item. If handmade products vary, explain the nature of that variation using accurate wording. A decorative lifestyle image should not hide the only view showing scale.

Place shipping and return information where customers can find it before paying. The site should not reveal a substantial delivery charge only after a long form. For local collection, explain the location and notification process. Keep these statements aligned with the business’s actual operations and approved policies.

Test a full order using the provider’s sandbox

Complete a successful test purchase and inspect the resulting order, payment record, notification, and staff view. Then test failure, cancellation, an unavailable variant, a double click, and a browser closed before returning from checkout. Verify that an unpaid attempt does not become an order marked paid.

Try a refund through the supported test workflow and check the relationship between refunded money, stock, and fulfilment. Refunding a shipped item does not necessarily mean stock should be returned immediately. The business needs to define the physical process as well as the screen state.

TestExpected business outcome
Duplicate provider notificationOne order transition, no duplicate shipment
Failed paymentNo paid status and a clear recovery path
Sold-out variantCustomer cannot complete an unavailable purchase
Changed catalog priceCustomer sees and approves the current total
Partial refundCorrect remaining payment and fulfilment records

Give staff a usable daily workflow

A store needs a way to find new paid orders, prepare fulfilment, record dispatch or collection, and resolve exceptions. Ask the person doing the work to use the prototype. If they need to copy information into a second spreadsheet for every order, identify whether an integration or a simpler platform would be more appropriate.

Keep customer data access limited to people who need it. Export only the fields required for the task. Document who handles failed emails, disputed orders, and service outages. An attractive checkout cannot substitute for an operational owner.

Budget for operation and maintenance

Separate the initial build from continuing hosting, transaction fees, connected services, and support. Include the time needed to maintain product information and resolve customer issues. Use actual selected-provider quotes for a real budget; an illustrative spreadsheet is not a promised store operating cost.

Before launch, decide how products, orders, and customer records can be exported. Keep backups and test recovery with sample data. If ordinary commerce requirements are already met by a mature store platform, use that fact in the decision rather than assuming custom software is inherently better. AI can help create a useful storefront while an established system handles the demanding parts of selling.

Your starting prompt

Use this as an editable brief. Replace the brackets with your own details and review the result before connecting real services.

EDIT THE BRACKETS BEFORE YOU BUILD

Create a prototype storefront for [business] using sample products with [variants]. Include catalogue, product details, cart, and clear shipping information. Ask which established checkout provider to use. Keep payments in test mode, verify payment status server-side, and handle duplicate payment notifications safely. Do not store raw card details. Separate paid and fulfilled states and provide an order-management view.

A useful follow-up request

Document the order states and what triggers each transition. Add tests for duplicate payment notifications, sold-out variants, cancelled checkout, and refunded orders.

Check the result before launch

  • Complete a sandbox purchase and inspect the order record.
  • Verify stock and price handling at checkout.
  • Confirm a failed payment does not produce a paid order.
  • Check receipts, shipping information, and refund handling.

Plan the cost and scope

Allow for transaction fees, storage, email, shipping integrations, and ongoing support. A one-time build credit budget does not represent the total cost of operating a store.

Read our pricing guide and credit-planning guide before setting a budget.

Ready for a first draft?

Choose a builder, start with the essentials, and check the result one step at a time.