Home E-commerce Shopping Cart Page

Shopping Cart Page

Cart page with product list and order summary

Cart Checkout Conversion

Copy this prompt and paste it into ChatGPT or 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.

How to use this prompt

1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
2 Open ChatGPT, Claude, or your preferred AI assistant
3 Paste the prompt and customize any placeholder text (like product names or brand colors)
4 Let the AI generate your website code or design specifications

Back to E-commerce Prompts Browse All Categories

More E-commerce Prompts

Product Listing Page

E-commerce category page with filters and product grid

Catalog Filters

Product Detail Page

Complete product page with gallery, options, and reviews

PDP Product

Checkout Flow

Multi-step checkout with shipping, payment, and review

Checkout Forms

About this E-commerce Prompt

This Shopping Cart Page prompt is designed to help you quickly create professional e-commerce websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building shopping cart page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

ChatGPT (GPT-4) - Great for detailed code generation and explanations
Claude 3 - Excellent for complex, nuanced website designs
v0 by Vercel - Perfect for React and Next.js components
Cursor - Ideal for AI-powered coding in your IDE
Bolt.new - Quick prototyping and full-stack apps
Lovable - User-friendly AI website builder