Checklist de página de producto: qué impide que te compren

Checklist de página de producto según Baymard y WebAIM: precio, envíos, devoluciones, fotos, reseñas, compra en celular, pop-ups, búsqueda y teclado.

Equipo editorial de FixReports14 min de lectura

Los compradores suelen abandonar una página de producto cuando no logran saber el costo total, no encuentran las condiciones de envío y devolución, no pueden evaluar el producto por sus fotos y reseñas, o no pueden llegar con facilidad al botón de compra y usarlo, sobre todo desde el celular. Las ventanas emergentes que tapan la página, las páginas de políticas difíciles de encontrar, un buscador interno que no responde preguntas sencillas y los controles que no funcionan con teclado también frenan las compras. Las cifras de abajo son datos de investigación del sector de Baymard Institute y WebAIM, basados en muestras grandes de sitios y compradores; describen patrones comunes, no predicciones para una tienda en particular.

Puntos clave

  • En la encuesta de 2026 de Baymard a 1083 adultos de Estados Unidos que habían comprado en línea en los tres meses anteriores, el 40 % dijo haber abandonado una compra en el checkout porque los costos adicionales, como envío, impuestos y cargos, eran demasiado altos (Baymard Institute (se abre en una pestaña nueva)).
  • El estudio comparativo de páginas de producto de Baymard encontró que el 67 % de los principales sitios de comercio electrónico no da una estimación del costo total cerca de la zona de compra, y que el 44 % no muestra ni enlaza la política de devoluciones desde el contenido principal del producto (Baymard Institute (se abre en una pestaña nueva), actualizado el 18 de marzo de 2026).
  • En el mismo estudio, el 62 % de los sitios móviles tenía una experiencia de usuario (UX) de página de producto “mediocre” o peor.
  • WebAIM detectó fallas de WCAG en el 95.9 % de las páginas de inicio del millón de sitios principales en febrero de 2026 (WebAIM (se abre en una pestaña nueva)).
  • En una revisión de Baymard de 2021 sobre 33 sitios de comercio electrónico con mayores ingresos, el 45 % tenía funciones que no se podían usar con teclado (Baymard Institute (se abre en una pestaña nueva)).

¿Por qué los compradores abandonan una compra?

La respuesta más común es que solo estaban mirando; después vienen los costos adicionales, la entrega lenta, la poca confianza en el manejo de la tarjeta y la obligación de crear una cuenta.

La página de abandono de carrito de Baymard sitúa la tasa promedio documentada de abandono en 70.22 %, calculada a partir de 50 estudios (página actualizada por última vez el 22 de septiembre de 2025). Su gráfico de motivos, identificado como datos de 2026, proviene de una encuesta a 1083 adultos de Estados Unidos que habían comprado en línea en los tres meses anteriores. Las personas encuestadas podían elegir más de un motivo (Baymard Institute (se abre en una pestaña nueva), a octubre de 2026):

Motivo para abandonar una compra en línea en el checkoutPorcentaje de encuestados
Solo estaba mirando / no estaba listo para comprar42 %
Costos adicionales demasiado altos (envío, impuestos, cargos)40 %
La entrega era demasiado lenta20 %
No confiaba en darle al sitio los datos de mi tarjeta de crédito19 %
El sitio me pedía crear una cuenta18 %
Proceso de checkout demasiado largo o complicado17 %
El sitio tenía errores o se cayó17 %
La política de devoluciones no era satisfactoria13 %
No podía ver ni calcular el costo total del pedido por adelantado12 %
La tarjeta de crédito fue rechazada10 %
No había suficientes métodos de pago9 %

Son resultados de una encuesta en Estados Unidos sobre el checkout, no mediciones de tu tienda. Varios de estos motivos empiezan antes, en la página de producto, donde los compradores ven por primera vez el precio, las condiciones de entrega y las de devolución. Solo tu propia analítica puede mostrar cuáles importan en tu caso.

¿El precio total queda claro en la página de producto?

El precio actual, el precio original si lo hay, lo que incluye o no incluye y una estimación del envío deben estar junto al botón de compra.

El estudio comparativo de páginas de producto de 2026 de Baymard encontró que el 67 % de los sitios no ofrece una estimación del “costo total del pedido” cerca de la zona de compra, y que el 81 % no muestra el precio por unidad en productos que se venden en distintas cantidades o tamaños (Baymard Institute (se abre en una pestaña nueva)). Comprueba que la página muestre:

  • El precio actual y, en los artículos en oferta, el precio original.
  • Un precio por unidad en los productos que se venden en varios tamaños.
  • Si incluye impuestos o aranceles.
  • El costo de envío, o el monto de pedido a partir del cual el envío es gratis.

Shopify: en el tema Dawn, el bloque de precio agrega “Taxes included.” (impuestos incluidos) y un enlace “Shipping calculated at checkout.” (envío calculado en el checkout) cuando esas opciones de configuración y una política de envíos existen (código fuente de Dawn (se abre en una pestaña nueva)). Es correcto, pero no es una estimación, así que agrega tus tarifas reales o el monto mínimo para envío gratis en un bloque de texto.

WooCommerce: las opciones “Enable the shipping calculator on the cart page” (activar la calculadora de envío en la página del carrito) y “Hide shipping costs until an address is entered” (ocultar los costos de envío hasta que se ingrese una dirección) en WooCommerce > Settings > Shipping afectan el carrito y el checkout, no la página de producto (código fuente de WooCommerce (se abre en una pestaña nueva)). Pon las tarifas en la plantilla de producto o en la descripción corta.

¿Los compradores encuentran la información de envíos y devoluciones antes de agregar al carrito?

Pon un resumen breve del tiempo de entrega, el costo de envío y el plazo de devolución cerca del botón de compra, con un enlace a la política completa.

En la encuesta Consideration & Purchase Behavior de Baymard, con 1032 participantes, el 60 % dijo que busca información sobre la política de devoluciones en la página de producto; sin embargo, el 44 % de los sitios analizados no la muestra ni la enlaza desde el contenido principal del producto (Baymard Institute (se abre en una pestaña nueva)). En la encuesta de abandono de 2026 mencionada arriba, el 20 % citó la entrega lenta y el 13 % una política de devoluciones poco satisfactoria.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: redacta tus políticas en Settings > Policies (Configuración > Políticas) (Centro de ayuda de Shopify (se abre en una pestaña nueva)). En Dawn, un bloque Collapsible row (fila desplegable) en la página de producto puede mostrar texto o el contenido de una página (código fuente de Dawn (se abre en una pestaña nueva)), así que una sola página de envíos y devoluciones puede aparecer en todos los productos.

WooCommerce: WooCommerce crea una página “Refund and Returns Policy” (política de reembolsos y devoluciones) como borrador (código fuente de WooCommerce (se abre en una pestaña nueva)). Permanece sin publicar hasta que la editas y la publicas.

¿Las imágenes del producto responden las dudas de los compradores?

Las imágenes deben mostrar el producto desde varios ángulos, a escala y en uso, porque muchos compradores juzgan el tamaño y el ajuste por las fotos y no por las especificaciones.

Las pruebas de Baymard encontraron que el 42 % de los usuarios intenta deducir el tamaño de un producto a partir de sus imágenes, mientras que el 37 % de los sitios analizados no ofrece una imagen “a escala” que muestre el producto junto a una persona o un objeto conocido. Además, el 23 % no ofrece una imagen con un modelo humano, algo que importa sobre todo en ropa, accesorios y cosméticos (Baymard Institute (se abre en una pestaña nueva)).

Comprueba también que la galería cambie a la imagen correcta cuando se elige un color, que el zoom funcione en celulares y que cada imagen tenga un texto alternativo que describa lo que muestra esa vista, por ejemplo, “Camisa de lino, vista trasera”.

¿Las reseñas son fáciles de encontrar y generan confianza?

Muestra la calificación promedio y el número de reseñas cerca del título del producto, enlázalos a las reseñas completas y responde a las reseñas negativas.

Baymard encontró que el 89 % de los sitios analizados no responde a las reseñas negativas, y que el 63 % no permite pasar de las fotos de un reseñador a las del siguiente entre reseñas (Baymard Institute (se abre en una pestaña nueva)). Los widgets de reseñas que cargan tarde también pueden empujar la página hacia abajo, así que reserva su espacio.

Shopify: el bloque Product rating (calificación del producto) de Dawn muestra estrellas desde una app de reseñas, y el tema indica que se necesita una app (código fuente de Dawn (se abre en una pestaña nueva)).

WooCommerce: en WooCommerce > Settings > Products, las opciones de reseñas incluyen “Enable product reviews” (activar las reseñas de productos), “Show 'verified owner' label on customer reviews” (mostrar la etiqueta de “propietario verificado” en las reseñas), “Reviews can only be left by 'verified owners'” (solo los “propietarios verificados” pueden dejar reseñas) y “Enable star rating on reviews” (activar la calificación con estrellas en las reseñas) (código fuente de WooCommerce (se abre en una pestaña nueva)).

¿El botón de agregar al carrito es fácil de alcanzar y tocar en el celular?

En el celular, los compradores deben poder ver el precio, elegir una variante y tocar “agregar al carrito” sin tener que buscar, con controles lo bastante grandes para acertar.

En el estudio comparativo de 2026 de Baymard, el 52 % de los sitios para computadora y el 62 % de los sitios móviles tenían una UX de página de producto “mediocre” o peor, y el 57 % de los sitios no usaba botones para elegir la talla, de modo que las tallas quedaban escondidas en menús desplegables (Baymard Institute (se abre en una pestaña nueva)).

Abre una página de producto en un celular real y comprueba:

  • Primera pantalla. En un diseño apilado para celular, la galería suele ir primero, así que una imagen alta puede empujar el título, el precio y el botón fuera de la primera pantalla.
  • Barras de compra fijas. Si usas una, no debe tapar los elementos que tienen el foco. El resumen del W3C sobre el criterio 2.4.11 de WCAG 2.2 (nivel AA) usa como ejemplo un pie de página fijo que oculta los elementos enfocados (W3C (se abre en una pestaña nueva)).
  • Objetivos táctiles. WCAG 2.5.8 (nivel AA) fija un mínimo de 24 por 24 píxeles CSS, con excepciones (W3C (se abre en una pestaña nueva)); la guía de temas de Shopify recomienda al menos 48 por 48 píxeles en celulares (Shopify (se abre en una pestaña nueva)).
  • Desplazamiento lateral. El criterio 1.4.10 Reflow de WCAG exige que el contenido funcione con 320 píxeles CSS de ancho sin desplazarse en dos direcciones (W3C (se abre en una pestaña nueva)). Las tablas de tallas anchas y las tablas comparativas son causas frecuentes.

¿Las ventanas emergentes estorban la compra?

Las ventanas emergentes que tapan la página de producto al llegar ocultan la información que el comprador vino a buscar, así que prefiere banners pequeños y limita las invitaciones a suscribirse.

La guía de Google Search Central describe los intersticiales y diálogos intrusivos como elementos que obstruyen la vista del contenido y recomienda banners pequeños en lugar de capas que cubren toda la página (Google Search Central (se abre en una pestaña nueva)). Shopify señala que el contenido de las ventanas emergentes también puede causar cambios de diseño (Centro de ayuda de Shopify (se abre en una pestaña nueva)). Cualquier diálogo que conserves debe poder cerrarse con el teclado; el criterio 2.1.2 No Keyboard Trap (nivel A) de WCAG exige que el foco pueda salir de un componente usando solo el teclado (W3C (se abre en una pestaña nueva)).

¿Los compradores encuentran tus páginas de confianza y de políticas?

Enlaza las páginas de reembolsos, envíos, privacidad, términos y contacto desde el pie de página de todas las páginas.

En la encuesta de 2026 de Baymard, el 19 % de las personas encuestadas dijo haber abandonado una compra porque no confiaba en darle al sitio los datos de su tarjeta. Las políticas claras y los datos de contacto son señales básicas de que una tienda es legítima.

Shopify: cuando agregas las políticas en Settings > Policies (Configuración > Políticas), Shopify las enlaza automáticamente en el pie de página del checkout; para mostrarlas en la tienda, agrégalas a un menú en Content > Menus (Contenido > Menús) (Centro de ayuda de Shopify (se abre en una pestaña nueva)) o activa la opción Policy links (enlaces a políticas) del pie de página de Dawn.

WooCommerce: publica el borrador de la página de reembolsos y después agrega tus páginas de políticas y de contacto al pie de página.

¿El buscador del sitio encuentra productos y respuestas?

La búsqueda debe devolver los productos correctos para nombres, errores de escritura y sinónimos, y también debe responder consultas como “devoluciones” o “envío”.

El estudio comparativo de búsqueda de 2026 de Baymard, con más de 170 sitios y apps, calificó como “mediocre” o peor el 46 % de las experiencias en computadora, el 58 % en celular y el 64 % en apps, y encontró problemas con las búsquedas que no son de productos, como una búsqueda de la política de devoluciones que devuelve productos, en el 66 % de los sitios (Baymard Institute (se abre en una pestaña nueva), actualizado el 29 de abril de 2026).

Prueba tu tienda con el nombre de un producto muy vendido, ese mismo nombre mal escrito, una palabra de categoría y “devoluciones”. En Shopify, la búsqueda de la tienda devuelve productos, entradas de blog y páginas, con búsqueda predictiva y tolerancia a errores tipográficos activadas de forma predeterminada, y la app Search & Discovery agrega filtros y la posibilidad de destacar productos (Centro de ayuda de Shopify (se abre en una pestaña nueva)). Por eso, una página normal que resuma los envíos y las devoluciones puede aparecer en esas búsquedas.

¿Alguien puede comprar usando solo el teclado?

Cada paso, desde elegir una variante hasta llegar al checkout, debe funcionar solo con el teclado y con un indicador de foco visible.

WCAG 2.2 exige que todas las funciones se puedan usar con teclado (2.1.1, nivel A), que no haya trampas de teclado (2.1.2, nivel A), que el indicador de foco sea visible (2.4.7, nivel AA) y que los elementos enfocados no queden totalmente ocultos por otro contenido (2.4.11, nivel AA) (W3C (se abre en una pestaña nueva)). Estos aspectos básicos suelen faltar. La revisión de Baymard de 2021 sobre 33 sitios con mayores ingresos encontró que el 45 % tenía funciones que no se podían usar con teclado y que el 48 % no mantenía visible el indicador de foco en todo momento (Baymard Institute (se abre en una pestaña nueva)). El análisis de WebAIM de febrero de 2026 encontró un promedio de 56.1 errores detectados por página de inicio, y de 71.0 en los sitios de su categoría de compras (WebAIM (se abre en una pestaña nueva)).

Una prueba de cinco minutos:

  1. Carga una página de producto y presiona Tab sin tocar el mouse.
  2. Comprueba que siempre puedas ver dónde está el foco.
  3. Elige una talla y un color, y cambia la cantidad.
  4. Presiona “agregar al carrito” y comprueba que el foco pase al carrito lateral y que este se cierre con el teclado.
  5. Llega al botón de pago.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Un escaneo gratuito revisa muchos de estos puntos en aproximadamente un minuto. El Reporte de Conversión convierte comprobaciones de página como la visibilidad del precio, el botón de agregar al carrito en celulares, la información de envíos y devoluciones, las ventanas emergentes, los enlaces a políticas en el pie de página, la búsqueda, el recorrido de compra con teclado y el desplazamiento lateral en recomendaciones priorizadas. Se basa en comprobaciones de las páginas, no en tus datos de ventas, y no garantiza ventas.

Preguntas frecuentes

¿Cuál es el motivo más común por el que los compradores abandonan una compra?

En la encuesta de 2026 de Baymard a 1083 adultos de Estados Unidos, la respuesta principal fue “solo estaba mirando” (42 %). Entre los demás motivos, los costos adicionales, como envío, impuestos y cargos, ocuparon el primer lugar con un 40 %, por delante de la entrega lenta con un 20 %.

¿Corregir estos problemas aumentará mi tasa de conversión?

Nadie puede prometerlo. La investigación describe barreras comunes en muestras grandes de sitios y compradores; que eliminarlas cambie tus resultados depende de tus productos, tus precios y tu tráfico, así que mide antes y después de cada cambio.

¿Dónde debe ir la información de envíos y devoluciones en una página de producto?

Cerca del precio y del botón de compra, como un resumen breve con un enlace a la política completa. En la investigación de Baymard, el 60 % de las personas encuestadas dijo que busca información sobre la política de devoluciones en la página de producto.

¿El botón de agregar al carrito tiene que verse sin desplazarse en el celular?

Ninguna norma lo exige, pero los compradores deberían ver el precio y llegar al botón rápido. Una barra de compra fija es una opción, siempre que no oculte los elementos enfocados ni otro contenido.

¿La accesibilidad forma parte de la conversión?

Sí, en un sentido muy simple: un comprador que no puede usar el selector de variantes ni el botón de agregar al carrito con teclado o con lector de pantalla no puede comprar. WCAG 2.2 nivel AA cubre estos aspectos básicos.

Fuentes

Todas las guías