Startseite E-Commerce Product Quick View Modal

Product Quick View Modal

Quick view popup for fast product browsing

Modal Quick View UX
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein 
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.

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

Modal Quick View UX E-Commerce KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt