Inicio E-commerce Product Quick View Modal

Product Quick View Modal

Quick view popup for fast product browsing

Modal Quick View UX
Copia este prompt y pégalo en ChatGPT o 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.

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
Volver aE-commerce Explorar Todas las Categorías

Más Prompts de E-commerce

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

Acerca de este Prompt de E-commerce

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

Modal Quick View UX E-commerce Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar