Startseite E-Commerce Checkout Flow

Checkout Flow

Multi-step checkout with shipping, payment, and review

Checkout Forms Conversion
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
Create a multi-step checkout flow:

1. LAYOUT
- Clean, distraction-free design
- Progress indicator (steps 1-4)
- Order summary sidebar (collapsible on mobile)
- Trust badges in footer
- Minimal header (logo + help link only)

2. STEP 1: INFORMATION
Guest vs Account:
- "Checkout as guest" option
- "Sign in" for existing customers
- "Create account" checkbox (optional)

Contact Information:
- Email address (for order confirmation)
- Phone number (for delivery updates)

Shipping Address:
- Full name
- Address line 1
- Address line 2 (optional)
- City
- State/Province (dropdown)
- Postal code
- Country (dropdown)
- "Save this address" checkbox

"Continue to Shipping" button

3. STEP 2: SHIPPING
Shipping Methods:
- Radio button selection
- Standard Shipping - Free (5-7 business days)
- Express Shipping - $9.99 (2-3 business days)
- Next Day - $19.99 (Next business day)
- Each shows estimated arrival date

Delivery Instructions (optional):
- Text area for special instructions
- Checkbox for "Leave at door"

"Continue to Payment" button

4. STEP 3: PAYMENT
Payment Methods:
- Credit/Debit Card (default)
- PayPal
- Apple Pay / Google Pay
- Klarna/Afterpay (buy now, pay later)

Credit Card Form:
- Card number (with card type icon detection)
- Expiration date (MM/YY)
- CVV (with tooltip explanation)
- Name on card
- "Save card for future purchases" checkbox

Billing Address:
- "Same as shipping" checkbox (default checked)
- Or separate billing address form

"Review Order" button

5. STEP 4: REVIEW & PLACE ORDER
Order Review:
- List all items with images, names, quantities, prices
- Shipping address (with "Edit" link)
- Shipping method (with "Edit" link)
- Payment method (with "Edit" link)

Order Summary:
- Subtotal
- Shipping
- Tax
- Discount
- Total

Terms:
- Checkbox for terms acceptance
- Links to Terms and Privacy Policy

"Place Order" button (prominent)

6. ORDER CONFIRMATION
- "Thank you for your order!"
- Order number
- Confirmation email sent message
- Order summary
- Estimated delivery
- "Track Order" button
- "Continue Shopping" link
- Account creation prompt (if guest)

Design: Minimal distractions, clear progress, trust signals everywhere. Single-page checkout is also valid.

So verwendest du diesen Prompt

  1. 1 Kopiere den Prompt oben
  2. 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
  3. 3 Die KI generiert den Website-Code für dich
  4. 4 Passe an und iteriere nach deinen Bedürfnissen

Über diesen E-Commerce Prompt

Dieser Checkout Flow Prompt wurde entwickelt, um dir zu helfen, schnell professionelle e-commerce-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.

Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von checkout flow. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.

Kompatible KI-Tools

  • ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
  • Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
  • v0 von Vercel - Perfekt für React- und Next.js-Komponenten
  • Cursor - Ideal für KI-gestütztes Coding in deiner IDE
  • Bolt.new - Schnelles Prototyping und Full-Stack-Apps
  • Lovable - Benutzerfreundlicher KI-Website-Builder

Tags

Checkout Forms Conversion E-Commerce KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt