Home E-commerce Product Quick View Modal

Product Quick View Modal

Quick view popup for fast product browsing

Modal Quick View UX

Copy this prompt and paste it into ChatGPT or Claude

Create a product quick view modal:

1. MODAL STRUCTURE
- Overlay background (dark, semi-transparent)
- Centered modal (max-width: 900px)
- Close button (X in top right)
- Click outside to close
- Escape key to close

2. MODAL LAYOUT (two columns)
Left side (50%):
- Product image gallery
- Main image
- Thumbnail strip below
- Click thumbnail to change main
- Zoom not necessary in quick view

Right side (50%):
- Product information
- Add to cart functionality

3. PRODUCT INFORMATION
- Product title
- Brand (linked)
- Rating (stars + review count)
- Price (with sale price if applicable)
- Short description (2-3 lines max)
- Color options (swatches)
- Size options (buttons)
- Quantity selector
- "Add to Cart" button (full width)
- "View Full Details" link

4. ADDITIONAL INFO
- Stock status
- Estimated shipping
- Return policy (one line)

5. MOBILE BEHAVIOR
Option A: Full-screen bottom sheet
- Slides up from bottom
- Swipe down to close
- Scrollable content

Option B: Full-page takeover
- Close button top left
- Product image top
- Info below

6. ANIMATIONS
- Fade in overlay
- Scale up modal
- Smooth transitions

7. FUNCTIONALITY
- Add to cart without closing
- Success feedback: "Added to cart!"
- Continue shopping or view cart option
- Update cart icon count

8. LOADING STATE
- Skeleton loader while fetching
- Image placeholder
- Text placeholders

Design: Fast, lightweight. Essential info only. Full details on PDP. Focus on conversion.

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

Shopping Cart Page

Cart page with product list and order summary

Cart Checkout

About this E-commerce Prompt

This Product Quick View Modal 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 product quick view modal. 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