Startseite E-Commerce Shopping Cart Page

Shopping Cart Page

Cart page with product list and order summary

Cart Checkout Conversion
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein 
Create a shopping cart page:

1. PAGE HEADER
- "Shopping Cart" title
- Item count: "(3 items)"
- "Continue Shopping" link

2. CART ITEMS LIST
For each item:
- Product image (clickable, links to product)
- Product name and link
- Selected options (Size: M, Color: Blue)
- Unit price
- Quantity selector (+/- with input)
- Line total
- Remove item button (X or trash icon)
- "Save for Later" link
- Stock status if low: "Only 2 left"

Features:
- Quantity updates should recalculate totals
- Show savings if item is on sale
- "Move to Wishlist" option

3. SAVED FOR LATER SECTION
- Items removed from cart but saved
- "Move to Cart" button
- "Remove" button

4. PROMO CODE SECTION
- Input field for coupon code
- "Apply" button
- Applied discount shown
- Remove discount option

5. ORDER SUMMARY (sidebar on desktop)
- Subtotal
- Shipping (calculated or "Calculated at checkout")
- Estimated tax
- Discount (if applied)
- Order total (large, bold)
- "Proceed to Checkout" button (primary)
- "PayPal" button (or other express checkout)
- Apple Pay / Google Pay buttons
- Accepted payment icons

6. ADDITIONAL INFO
- Estimated delivery date
- Return policy summary
- Security badges (SSL, secure checkout)
- Customer service contact

7. EMPTY CART STATE
- "Your cart is empty"
- Illustration or icon
- "Continue Shopping" button
- "Sign in" prompt if not logged in
- Product recommendations

8. CROSS-SELL SECTION
- "You might also like"
- "Frequently bought together"
- "Complete your order" suggestions
- Add to cart without leaving page

9. MOBILE LAYOUT
- Full-width items
- Sticky order summary at bottom
- Collapsible promo code section
- Bottom CTA button

Design: Clear totals, easy quantity changes, prominent checkout button. No surprises - show all costs.

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
Zurück zuE-Commerce Alle Kategorien durchsuchen

Mehr E-Commerce Prompts

Account Dashboard

Customer account area with orders and profile

Account Dashboard

Checkout Flow

Multi-step checkout with shipping, payment, and review

Checkout Forms

E-commerce Homepage

Store homepage with hero, categories, and featured products

Homepage Store

Über diesen E-Commerce Prompt

Dieser Shopping Cart Page 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 shopping cart page. 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

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