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
War das hilfreich? 

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