**TL;DR.** Los grandes PDP optimizan tres cosas: (1) velocidad (LCP < 1.8s, INP < 200ms), (2) claridad (galería, variante, botón de compra) y (3) confianza (reseñas, política de devoluciones, envío, prueba social). Cada elemento tiene un impacto medible en la conversión. Apílalos deliberadamente.
## El embudo PDP
Embudo típico de comercio electrónico (referencias de la industria 2025–2026):
| Paso | Conversión mediana | Cuartil superior |
| ------------------------------------- | ------------------ | ----------------- |
| Vista de PDP → añadir al carrito | 8–15% | 20–30% |
| Añadir al carrito → checkout | 50–65% | 70–80% |
| Checkout → compra | 50–70% | 75–90% |
| **Vista de PDP total → compra** | **2–4%** | **8–15%** |
Las tiendas que pasan de la mediana al cuartil superior en cada paso duplican o triplican los ingresos por sesión.
## Velocidad
Cubierto en detalle en la [guía de Core Web Vitals](/guides/core-web-vitals-ecommerce-2026). Umbrales clave para PDP:
- LCP ≤ 1.8s (objetivo), ≤ 2.5s (bueno).
- INP ≤ 150ms (objetivo), ≤ 200ms (bueno).
- CLS < 0.05 (objetivo), ≤ 0.1 (bueno).
Una mejora de un segundo en LCP en PDP típicamente produce un aumento del 5–15% en la conversión.
## Galería e imagen principal
La primera imagen del producto es tu LCP. Patrones:
| Elemento | Mejor práctica |
| ------------------- | -------------------------------------------------------------------- |
| Tamaño de imagen principal | 800×800px a 1200×1200px en escritorio; ancho completo en móvil |
| Formato | AVIF (con respaldo en WebP/JPEG) |
| Precarga de LCP | Sí, `
```
**Tamaño**: usa botones con la etiqueta de tamaño.
```html
S
M
L
XL (Agotado — notifícame)
```
Reglas:
- Usa `aria-pressed` para el estado seleccionado.
- Desactiva visualmente las variantes agotadas; ofrece "Notificar cuando esté disponible."
- Actualiza la URL para incluir la variante seleccionada para compartir (`?variant=size-m`).
- UI optimista para el cambio de variante (cubierto en la [guía de INP](/guides/inp-optimization-product-pages)).
## Añadir al carrito
El CTA principal. Mejores prácticas:
| Elemento | Patrón |
| ----------------------- | --------------------------------------------------------------------- |
| Texto del botón | "Añadir al carrito" o "Añadir a la bolsa" (tu vocabulario de marca) |
| Color | Primario de la marca; alto contraste con el fondo de la página |
| Tamaño | Ancho completo en móvil; objetivo de toque mínimo de 48×48px |
| Fijo en móvil | Sí, anclado en la parte inferior al desplazarse más allá del pliegue inicial |
| Estado de carga | Spinner en el botón mientras el servidor confirma; nunca bloquear la página |
| Patrón de confirmación | Mini-carrito deslizante o toast; no una interrupción de página |
| Urgencia de stock | "Solo quedan 3" si es cierto; nunca falso |
| Precio cerca del botón | Sí, grande y claro |
Antipatrones:
- Múltiples CTAs principales ("Añadir al carrito" + "Comprar ahora" + "Compra rápida") — divide la atención.
- Interrupción modal después de añadir al carrito ("¿Continuar comprando o proceder al pago?") — añade un paso.
- Precio oculto (forzar desplazamiento hacia arriba para verlo).
## Señales de confianza
El conjunto de señales cerca del botón de compra:
1. **Umbral de envío gratuito**: "Envío gratuito en pedidos superiores a $50" — aumenta el tamaño de la cesta.
2. **Resumen de política de devoluciones**: "Devoluciones gratuitas en 30 días" — reduce la fricción de compra.
3. **Entrega estimada**: "Llega el miércoles 15 de mayo" — fechas concretas superan rangos.
4. **Insignias de seguridad**: Indicador de "Pago seguro" al estilo Stripe — menor pero acumulativo.
5. **Estrellas de reseñas agregadas + conteo**: "4.7 ★ de 218 reseñas" — señal de confianza principal.
## Prueba social
Patrones efectivos de prueba social:
- **Extractos de reseñas verificadas**: 2–3 reseñas sobre el pliegue con calificación estelar, autor, fecha.
- **Conteo de reseñas**: un gran número (218 reseñas) es más persuasivo que solo estrellas.
- **"X personas vieron esto hoy"**: escasez de baja presión. Usa datos reales, no aleatorios.
- **Notificaciones de compra reciente**: ventana emergente mostrando "Sarah de Londres compró esto hace 3 horas." Real, opt-in para el comprador. Frecuencia: cada 30–60 segundos, máximo.
- **Fotos generadas por usuarios**: cuadrícula al estilo Instagram de clientes usando/el producto.
Evitar:
- Reseñas falsas.
- Urgencia de stock falsa ("¡Solo queda 1!" cuando hay 200).
- Temporizadores de cuenta regresiva agresivos ("¡La oferta termina en 3:21!").
Estos retroceden — los compradores modernos los reconocen y la confianza disminuye.
## Compras frecuentes juntas
Una verdadera palanca de conversión. Patrón:
```
Este producto: Bolso Mensajero de Cuero Marrón $149
+ Cinturón de Hebilla de Latón $89
+ Tarjetero de Cuero $49
─────────────────────────────────────────────────────
Total del paquete: $287
[ Añadir paquete al carrito → $258 ] (ahorra $29)
```
Implementación:
- Pre-computar pares de "compras frecuentes juntas" a partir de la co-ocurrencia de artículos de pedido + similitud coseno en `descriptionEmbedding`.
- Etiquetas `` reales apuntando a los productos recomendados (crawleables para SEO).
- Añadir paquete con un clic.
## Productos similares
Debajo de las compras frecuentes juntas. Usar:
- similitud coseno de pgvector en `descriptionEmbedding` para encontrar similares en la misma categoría.
- Opcionalmente filtrar por rango de precios.
- Etiquetas ` ` reales con `rel="related"`.
## Especificaciones y descripción
El contenido de formato largo es bueno para SEO y para compras de alta consideración. Estructura:
```markdown
## Descripción
[Texto de marketing completo — 2-4 párrafos]
## Especificaciones
| Material | Cuero de grano completo |
| Dimensiones | 13" × 11" × 4" |
| Peso | 1.8 lbs |
| Hardware | Latón sólido |
| Origen | Hecho en Italia |
## Qué hay en la caja
- Bolsa
- Correa de hombro desmontable
- Bolsa para polvo
- Guía de cuidado
## Cuidado
[Instrucciones de cuidado]
```
Este contenido también se incluye en el campo JSON-LD `description` del producto, mejorando la profundidad del resultado enriquecido.
## Sección de reseñas
Debajo de la sección de especificaciones. Mejores prácticas:
- Mostrar la media de todos los tiempos + conteo de manera prominente.
- Histograma de distribución (5 estrellas: 67%, 4 estrellas: 22%, 3 estrellas: 8%, 2 estrellas: 2%, 1 estrella: 1%).
- Ordenar y filtrar (más reciente, más útil, por estrella).
- Paginación o desplazamiento infinito (carga diferida).
- Responder a reseñas donde sea relevante.
- Insignia de compra verificada.
## Cómo se construye el PDP predeterminado de Ordiko
- Renderizado en servidor con React Server Components.
- Imagen principal de LCP precargada con `priority` y `fetchPriority="high"`.
- Selector de variantes con `useOptimistic` para retroalimentación instantánea.
- Añadir al carrito móvil fijo al desplazarse más allá del pliegue inicial.
- Confirmación de mini-carrito deslizante (sin interrupción de página).
- Señales de confianza (envío gratuito, devoluciones, pago seguro) renderizadas del lado del servidor.
- Resumen de reseñas verificadas y lista de reseñas (top 5 en JSON-LD).
- Compras frecuentes juntas a través de similitud coseno de pgvector.
- Productos similares en la misma categoría, enlaces crawlables.
- Descripción completa + especificaciones + reseñas debajo del pliegue.
INP predeterminado < 200ms p75 con esta configuración.
## FAQ
**¿Cuál es la optimización de PDP más subestimada?**
Un botón de añadir al carrito móvil fijo que permanece visible durante el desplazamiento. En PDP largos (que deberían serlo para SEO), los usuarios que desplazan reseñas o especificaciones necesitan un solo toque para comprar. Las tiendas que añaden un CTA fijo típicamente ven un aumento del 10–20% en la conversión móvil.
**¿Debería ocultar variantes agotadas?**
No. Muéstralas desactivadas visualmente pero aún presentes. Ocultarlas crea una UX inconsistente y señala que los clientes recurrentes no pueden encontrar un producto que compraron antes. Desactivar + 'Notifícame cuando esté disponible' convierte a los clientes en suscriptores de correo electrónico.
**¿Cuánta prueba social es demasiado?**
Una notificación emergente de compras recientes cada 30–60 segundos se siente útil. Cada 5 segundos se siente manipulativo. Un 'X personas vieron esto en las últimas 24h' está bien. La prueba social excesiva es la principal causa de erosión de confianza.
**¿Cómo aborda Ordiko la UX de PDP?**
El PDP predeterminado de Ordiko incluye un CTA móvil fijo, imagen principal precargada de LCP, muestras de color/tamaño con UI optimista, resumen de reseñas verificadas, compras frecuentes juntas (similitud coseno de pgvector en embeddings de descripción), y migas de pan + JSON-LD por defecto. INP < 200ms p75 con el tema predeterminado.