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 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de E-commerce
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