Inicio E-commerce Shopping Cart Page

Shopping Cart Page

Cart page with product list and order summary

Cart Checkout Conversion
Copia este prompt y pégalo en ChatGPT o Claude
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.

Cómo usar este prompt

  1. 1 Copia el prompt de arriba
  2. 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
  3. 3 La IA generará el código del sitio web por ti
  4. 4 Personaliza e itera según tus necesidades

Acerca de este Prompt de E-commerce

Este prompt Shopping Cart Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de e-commerce usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.

Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear shopping cart page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.

Herramientas de IA Compatibles

  • ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
  • Claude 3 - Excelente para diseños web complejos y matizados
  • v0 de Vercel - Perfecto para componentes React y Next.js
  • Cursor - Ideal para codificación potenciada por IA en tu IDE
  • Bolt.new - Prototipado rápido y apps full-stack
  • Lovable - Constructor de sitios web IA fácil de usar

Etiquetas

Cart Checkout Conversion E-commerce Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar