Skip to content

AI für E-Commerce Entwicklung

Hierbei aI für E-Commerce Entwicklung: Online-Shops, Payment, Warenkörbe und Checkout-Optimierung mit ChatGPT & Claude. 10 Prompts für E-Commerce Projekte.

Einleitung

Somit bist du optimal vorbereitet, um dieses Wissen anzuwenden.

E-Commerce erfordert spezielle Skills: Payment, Warenkörbe, Produktkataloge und Conversion-Optimierung. Weiterhin aI hilft bei der technischen Umsetzung und bei UX-Entscheidungen. Hier sind 10 Prompts für E-Commerce-Entwicklung.


Zusammenfassend bietet dieser Abschnitt praktische Handlungsempfehlungen.

Inhaltsverzeichnis

  1. Prompt 1: Shop-Architektur
  2. Prompt 2: Produkt-Katalog
  3. Prompt 3: Warenkorb-Logik
  4. Prompt 4: Checkout-Prozess
  5. Prompt 5: Payment Integration
  6. Prompt 6: Produkt-Suche & Filter
  7. Prompt 7: E-Commerce SEO
  8. Prompt 8: Transaktionale E-Mails
  9. Prompt 9: Inventar & Bestellungen
  10. Prompt 10: Conversion-Optimierung
  11. FAQ

Dementsprechend solltest du die einzelnen Schritte sorgfältig abarbeiten.

Prompt 1: Shop-Architektur

Zusammenfassend lässt sich sagen, dass dies ein zentraler Aspekt ist.

Designe die Architektur für meinen Online-Shop:

Produkte: [z.B. "500 Produkte, 20 Kategorien, Varianten (Größe/Farbe)"]
Traffic: [z.B. "5.000 Besucher/Tag"]
Budget: [z.B. "Startup, minimal"]

Vergleiche Ansätze:
1. **SaaS**: Shopify + Liquid (schnellster Start)
2. **Headless**: Shopify/Medusa + Next.js (flexibelster)
3. **Custom**: Next.js + Stripe + eigene DB (vollste Kontrolle)
4. **WordPress**: WooCommerce (Content-fokussiert)

Für den gewählten Ansatz:
5. Produkt-Datenmodell (Varianten, Optionen, Preise)
6. Warenkorb-Strategie (Session, DB, LocalStorage)
7. Checkout Flow (Gast-Checkout, Multi-Step)
8. Payment (Stripe, PayPal, Klarna)
9. Versand-Logik (Zonen, Gewicht, Gratisversand)
10. Admin Panel (Bestellverwaltung, Produkt-Editor)

Entscheidungshilfe mit Vergleichstabelle.

Folglich erhältst du mit diesem Ansatz deutlich bessere Resultate.


Dabei ist der folgende Punkt besonders wichtig.

Prompt 2: Produkt-Katalog

Zudem helfen klare Strukturen dabei, den Überblick zu behalten.

Insbesondere für den Einstieg sind die folgenden Informationen hilfreich.

Implementiere einen Produkt-Katalog:

Stack: [z.B. "Next.js, Prisma, PostgreSQL"]
Anforderungen: [z.B. "Varianten, Kategorien, Bilder, Bewertungen"]

Datenmodell:
1. Product (name, description, slug, price, images)
2. Variant (size, color, sku, price_override, stock)
3. Category (hierarchisch: Kleidung → Herren → Hemden)
4. ProductImage (URL, alt, sort_order, variant_id)
5. Review (rating, text, user, verified_purchase)
6. Tag (für Cross-Selling, Related Products)

Frontend:
7. Produktliste mit Filtering & Sorting
8. Produktdetailseite (Galerie, Varianten-Auswahl, Bewertungen)
9. Kategorie-Navigation (Mega-Menu)
10. Quick View (Modal ohne Seitenwechsel)

SEO: Jedes Produkt eigene URL, Schema.org Product Markup.

Somit sparst du Zeit und erhältst qualitativ hochwertigeren Output.


Außerdem profitierst du von einem systematischen Vorgehen.

Prompt 3: Warenkorb-Logik

Hierbei ist es entscheidend, den richtigen Kontext zu liefern.

Weiterhin ist es wichtig, die Grundlagen zu verstehen.

Implementiere die Warenkorb-Logik:

Stack: [z.B. "React, Zustand, API Route"]
Features: [z.B. "Varianten, Mengen, Gutscheine, Versand"]

Implementiere:
1. **Cart State**: Items mit Produkt-ID, Variante, Menge, Preis
2. **Add to Cart**: Mit Varianten-Auswahl, Mengen-Check
3. **Update Quantity**: +/- Buttons, max. Stock Check
4. **Remove Item**: Mit Undo-Option
5. **Cart Summary**: Subtotal, Versand, Steuern, Total
6. **Gutschein-Code**: Prozent oder Fixbetrag, Validierung
7. **Persistence**: LocalStorage + Server Sync (für eingeloggte User)
8. **Cart Merge**: Gast-Cart + Login-Cart zusammenführen
9. **Stock Validation**: Beim Checkout nochmal prüfen
10. **Abandoned Cart**: E-Mail bei verlassenem Warenkorb

Mini-Cart Widget in Header mit Live-Update.
Cart Drawer (Slide-in) statt eigener Seite.

Tatsächlich lässt sich dieser Code direkt in dein Projekt übernehmen.


Deshalb ist es wichtig, diesen Abschnitt aufmerksam zu lesen.

Prompt 4: Checkout-Prozess

Grundsätzlich gilt: Je präziser dein Prompt, desto besser das Ergebnis.

Ebenfalls relevant sind die praktischen Anwendungsbeispiele.

Implementiere einen optimierten Checkout-Prozess:

Stack: [z.B. "Next.js, Stripe"]
Typ: [Multi-Step / One-Page / Stripe Checkout Hosted]

Schritte:
1. **Cart Review**: Letzte Chance zum Ändern
2. **Kontakt**: E-Mail (Gast Checkout erlauben!)
3. **Versandadresse**: Mit Autofill, Google Places API
4. **Versandart**: Standard/Express mit Preis + Lieferzeit
5. **Rechnungsadresse**: "Gleich wie Versand" Checkbox
6. **Zahlung**: Stripe Elements, PayPal, Klarna
7. **Zusammenfassung**: Alles auf einen Blick
8. **Bestellbestätigung**: Thank You Page + E-Mail

Optimierungen:
9. Progress Indicator (Schritt 2/4)
10. Formular-Validierung (Inline, nicht am Ende)
- Gast-Checkout als Default (nicht Login erzwingen!)
- Autofill/Autocomplete aktiviert
- Mobile-optimiert (große Touch Targets)
- Ablenkungsfrei (kein Header-Menu im Checkout)

Zudem lassen sich die Ergebnisse auch auf andere Projekte übertragen.

Prompt 5: Payment Integration

Tatsächlich macht dieser Ansatz in der Praxis den Unterschied.

Vor allem für den praktischen Einsatz sind diese Informationen wertvoll.

Integriere Payment in meinen Online-Shop:

Provider: [Stripe / PayPal / Mollie / Adyen]
Methoden: [Kreditkarte, SEPA, PayPal, Klarna, Apple Pay]

Implementiere:
1. **Stripe Checkout**: Hosted vs. Embedded (Elements)
2. **Payment Intent**: Server-seitig erstellen, Client bestätigt
3. **Webhooks**: payment_intent.succeeded, charge.refunded
4. **3D Secure**: SCA-Compliance (EU Pflicht!)
5. **PayPal Integration**: Express Checkout Button
6. **Klarna/Sofort**: Rechnungskauf, Ratenzahlung
7. **Apple Pay / Google Pay**: Payment Request API
8. **Gespeicherte Karten**: Für wiederkehrende Kunden
9. **Refunds**: Teilrefunds, Volle Rückerstattung
10. **Tax Handling**: USt automatisch berechnen (Stripe Tax)

Security: PCI DSS Compliance (mit Stripe Elements automatisch).
Testing: Stripe Test Mode + Testkarten nutzen.

Darüber hinaus lässt sich das Beispiel leicht erweitern.


Ebenso hilfreich ist ein strukturierter Ansatz bei der Umsetzung.

Prompt 6: Produkt-Suche & Filter

Darüber hinaus lernst du, häufige Fehler zu vermeiden.

Im Folgenden findest du alle wichtigen Details dazu.

Implementiere Produkt-Suche und Filter:

Produkte: [z.B. "5.000 Produkte"]
Stack: [z.B. "Next.js + Algolia" / "Meilisearch" / "PostgreSQL Full-Text"]

Implementiere:
1. **Search Bar**: Instant Search mit Autocomplete
2. **Typo Tolerance**: "Shrits" findet "Shirts"
3. **Filter**: Kategorie, Preis-Range, Farbe, Größe, Bewertung
4. **Faceted Search**: Filter zeigen Anzahl der Treffer
5. **Sort**: Relevanz, Preis, Beliebtheit, Neueste
6. **URL State**: Filter als Query Params (teilbar, bookmarkable)
7. **Pagination**: Load More oder Infinite Scroll
8. **No Results**: Hilfreiche Vorschläge, Ähnliche Produkte
9. **Search Analytics**: Was suchen User? (Trending, No-Results)
10. **Personalisierung**: "Für dich empfohlen" basierend auf History

Performance: Algolia/Meilisearch für < 50ms Response Time.
Budget-Option: PostgreSQL Full-Text Search (kostenlos, < 10k Produkte ok).

Außerdem kannst du den Prompt für verschiedene Programmiersprachen anpassen.


Darüber hinaus solltest du diesen Aspekt berücksichtigen.

Prompt 7: E-Commerce SEO

Außerdem sparst du damit langfristig wertvolle Entwicklungszeit.

Ebenso wichtig ist es, die Best Practices zu kennen.

Optimiere mein E-Commerce SEO:

Shop: [z.B. "Mode-Shop, 500 Produkte, Next.js"]

Implementiere:
1. **Produkt-URLs**: /kategorie/produkt-name (clean, beschreibend)
2. **Schema.org Product**: Preis, Verfügbarkeit, Bewertung (Rich Snippets!)
3. **Meta Tags**: Unique Title + Description pro Produkt
4. **Bilder**: Alt-Text mit Produkt + Variante, WebP
5. **Canonical**: Bei Varianten-URLs (Farbe als Parameter)
6. **Breadcrumbs**: BreadcrumbList Schema
7. **Reviews**: Review Schema für Sterne in SERPs
8. **Sitemap**: Produkt-Sitemap mit lastmod und Images
9. **Faceted Navigation**: Noindex für Filter-Kombinationen
10. **Category Pages**: SEO-Text + H1 + interne Verlinkung

E-Commerce SEO Checklist:
- Google Merchant Center Integration
- Product Feed (für Google Shopping)
- FAQ Schema auf Produktseiten

Insbesondere die Struktur des Prompts ist dabei entscheidend für gute Ergebnisse.


Im Folgenden gehe ich auf die wichtigsten Details ein.

Prompt 8: Transaktionale E-Mails

Insbesondere für komplexe Projekte ist das ein entscheidender Vorteil.

Somit kannst du direkt mit der Umsetzung beginnen.

Erstelle transaktionale E-Mails für meinen Shop:

Provider: [Resend / SendGrid / Postmark]
Framework: [React Email / MJML / HTML]

Erstelle Templates für:
1. **Bestellbestätigung**: Auflistung, Preis, Versandadresse
2. **Versandbenachrichtigung**: Tracking-Link, voraussichtliche Lieferung
3. **Rechnung**: PDF Anhang oder Inline
4. **Passwort Reset**: Sicherer Link mit Ablauf
5. **Willkommen**: Nach Registration, Onboarding
6. **Abandoned Cart**: "Du hast etwas vergessen!" (nach 1h, 24h)
7. **Bewertung anfragen**: "Wie gefällt dir dein Kauf?" (nach 7 Tagen)
8. **Restock Notification**: Produkt wieder verfügbar
9. **Newsletter**: Neue Produkte, Sales
10. **Refund Bestätigung**: Rückerstattung bestätigen

Design: Responsive, Brand-konsistent, CTA prominent.
DSGVO: Double Opt-In für Marketing, Unsubscribe Link.

Folglich verbessert sich die gesamte Codequalität deutlich.

Prompt 9: Inventar & Bestellungen

Allerdings gibt es dabei auch einige Fallstricke zu beachten.

Darüber hinaus bietet dieser Abschnitt konkrete Beispiele und Tipps.

Implementiere Inventar- und Bestell-Management:

Stack: [z.B. "Next.js Admin Panel, Prisma, PostgreSQL"]

Inventar:
1. Stock pro Variante tracken (SKU-Level)
2. Low Stock Alert (Benachrichtigung bei < Threshold)
3. Out of Stock: Automatisch "Ausverkauft" anzeigen
4. Backorder: Vorbestellung erlauben (optional)
5. Stock Reservation: Bei Checkout reservieren (15 Min Timer)

Bestellungen:
6. Order Status Workflow: Pending → Paid → Shipped → Delivered
7. Admin Dashboard: Bestellliste mit Filter und Suche
8. Order Detail: Alle Infos, Status ändern, Tracking eingeben
9. Refund Process: Voll oder Teil-Refund auslösen
10. Reporting: Umsatz, Bestseller, Average Order Value

Automatisierung:
- Fulfillment API (DHL, DPD, Shippo)
- Automatische Rechnung bei Zahlung
- Stock-Sync bei Multi-Channel (Shop + Amazon + eBay)

Vor allem die detaillierten Anweisungen sorgen für präzisere Ergebnisse.


Hierbei hilft es, von konkreten Beispielen auszugehen.

Prompt 10: Conversion-Optimierung

Vor allem die Kombination verschiedener Strategien führt zum Erfolg.

Im Grunde vereinfacht dieser Ansatz den gesamten Workflow erheblich.

Optimiere die Conversion Rate meines Online-Shops:

Aktuelle Conversion: [z.B. "1.5%"]
Ziel: [z.B. "3%"]
Daten: [Google Analytics / PostHog Daten einfügen]

Analysiere und optimiere:
1. **Funnel-Analyse**: Wo steigen User aus?
2. **Page Speed**: Schnellere Seiten = höhere Conversion (+1% Speed = +7% Conv)
3. **Trust Signals**: Siegel, Bewertungen, sichere Zahlung
4. **CTA Buttons**: Farbe, Text, Platzierung optimieren
5. **Product Images**: Hochwertig, Zoom, 360°, Video
6. **Urgency**: "Nur noch 3 verfügbar", "Sale endet in 2h"
7. **Social Proof**: "45 Personen sehen sich das gerade an"
8. **Checkout Friction**: Formularfelder minimieren
9. **Shipping**: Gratis Versand ab X€ (prominenter Balken)
10. **A/B Tests**: Was testen? (CTA, Preis-Darstellung, Layout)

Quick Wins (sofort umsetzen):
- Gast-Checkout aktivieren
- Versandkosten früh zeigen (nicht erst im Checkout!)
- Trust Badges neben dem Kaufbutton

Im Grunde funktioniert dieser Ansatz mit allen gängigen AI-Tools.


Grundsätzlich empfiehlt es sich, schrittweise vorzugehen.

FAQ

Shopify oder Custom Shop?

Ebenfalls wichtig: Die regelmäßige Überprüfung der Ergebnisse.

Folglich profitierst du von einem besseren Verständnis dieser Konzepte.

Shopify für 90% der Shops: Schneller Start, Payment inkludiert, App-Ökosystem. Custom (Next.js + Stripe) nur bei speziellen Anforderungen oder wenn Shopify-Gebühren zu hoch werden (> 100k€/Monat Umsatz). Headless als Mittelweg.

Welche Zahlungsmethoden brauche ich?

Dennoch ist es wichtig, die Grenzen der AI-Unterstützung zu kennen.

Dementsprechend solltest du die folgenden Aspekte kennen.

In Deutschland Minimum: Kreditkarte, PayPal, SEPA-Lastschrift. Hierbei klarna (Rechnung/Raten) und Apple/Google Pay erhöhen die Conversion. Jede fehlende Zahlungsmethode kostet 5-10% potenzielle Kunden.

Kann AI einen kompletten Shop bauen?

Folglich verbessert sich nicht nur die Codequalität, sondern auch deine Produktivität.

Außerdem gibt es hilfreiche Tools, die dich dabei unterstützen.

AI kann Produktseiten, Checkout-Flows, E-Mail-Templates und Admin-Panels generieren. Für komplexe Business Logic (Rabatt-Systeme, Versandregeln, Tax) braucht es manuelles Feintuning. AI als Booster, nicht als Ersatz für E-Commerce-Erfahrung.


Insbesondere für fortgeschrittene Projekte ist das relevant.

Verwandte Artikel:


Im Grunde sparst du dadurch langfristig viel Zeit.

Dabei zuletzt aktualisiert: März 2026