Checklist de la ficha de producto: lo que frena la compra

Checklist de la ficha de producto según Baymard y WebAIM: precio, envío y devoluciones, fotos, reseñas, compra en el móvil, pop-ups, buscador y teclado.

Equipo editorial de FixReports14 min de lectura

Los compradores abandonan una ficha de producto sobre todo cuando no consiguen saber el coste total, no encuentran las condiciones de envío y devolución, no pueden valorar el producto a partir de sus fotos y reseñas o no logran llegar al botón de compra y usarlo con facilidad, especialmente en el móvil. Las ventanas emergentes que tapan la página, las páginas de políticas difíciles de encontrar, un buscador interno que no responde a preguntas sencillas y los controles que no funcionan con el teclado también impiden comprar. Las cifras siguientes son datos de estudios del sector de Baymard Institute y WebAIM, basados en grandes muestras de sitios web y compradores; describen patrones habituales, no predicciones para una tienda concreta.

Puntos clave

  • En la encuesta de Baymard de 2026 a 1083 adultos de EE. UU. que habían comprado online en los tres meses anteriores, el 40 % dijo haber abandonado una compra en el proceso de pago porque los costes adicionales, como el envío, los impuestos y las comisiones, eran demasiado altos (Baymard Institute (se abre en una pestaña nueva)).
  • El estudio comparativo de fichas de producto de Baymard concluyó que el 67 % de los principales sitios de comercio electrónico no ofrece ninguna estimación del coste 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 ese mismo estudio, el 62 % de los sitios móviles tenía una experiencia de usuario (UX) en la ficha de producto «mediocre» o peor.
  • WebAIM detectó fallos de WCAG en el 95,9 % del millón de páginas de inicio más populares en febrero de 2026 (WebAIM (se abre en una pestaña nueva)).
  • En una revisión de Baymard de 2021 de 33 sitios de comercio electrónico con mayor facturación, el 45 % tenía funciones que no se podían usar con el teclado (Baymard Institute (se abre en una pestaña nueva)).

¿Por qué abandonan los compradores una compra?

La respuesta más habitual es que los compradores solo estaban mirando; después vienen los costes adicionales, la entrega lenta, la poca confianza en el tratamiento de los datos de la tarjeta y la obligación de crear una cuenta.

La página de Baymard sobre el abandono del carrito sitúa la tasa media de abandono documentada en el 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, etiquetado como datos de 2026, procede de una encuesta a 1083 adultos de EE. UU. que habían comprado online en los tres meses anteriores. Los encuestados 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 online en el proceso de pagoPorcentaje de encuestados
Solo estaba mirando / no estaba listo para comprar42 %
Costes adicionales demasiado altos (envío, impuestos, comisiones)40 %
La entrega era demasiado lenta20 %
No me fiaba de dar los datos de mi tarjeta de crédito a ese sitio web19 %
El sitio web quería que creara una cuenta18 %
Proceso de pago demasiado largo o complicado17 %
El sitio web tenía errores o dejó de funcionar17 %
La política de devoluciones no era satisfactoria13 %
No podía ver ni calcular de antemano el coste total del pedido12 %
Rechazaron la tarjeta de crédito10 %
No había suficientes métodos de pago9 %

Son resultados de una encuesta de EE. UU. sobre el proceso de pago, no mediciones de tu tienda. Varios de estos motivos empiezan antes, en la ficha 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.

¿Queda claro el precio completo en la ficha de producto?

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

El estudio comparativo de fichas de producto de Baymard de 2026 concluyó que el 67 % de los sitios no ofrece una estimación del «coste total del pedido» cerca de la zona de compra, y que el 81 % no muestra un precio por unidad en los 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 rebajados, el precio original.
  • Un precio por unidad en los productos que se venden en varios tamaños.
  • Si los impuestos o los aranceles están incluidos.
  • El coste de envío, o el importe de pedido a partir del cual el envío es gratis.

Shopify: en el tema Dawn, el bloque de precio añade «Taxes included.» y un enlace «Shipping calculated at checkout.» cuando existen esos ajustes y una política de envío (código fuente de Dawn (se abre en una pestaña nueva)). Es correcto, pero no es una estimación, así que añade tus tarifas reales o el importe mínimo para el envío gratis en un bloque de texto.

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

¿Encuentran los compradores la información de envío y devoluciones antes de añadir al carrito?

Pon un breve resumen del plazo de entrega, el coste 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 de Baymard sobre comportamiento de valoración y compra (Consideration & Purchase Behavior), con 1032 encuestados, el 60 % dijo que busca la información sobre la política de devoluciones en la ficha 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 citada arriba, el 20 % mencionó 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 (Centro de ayuda de Shopify (se abre en una pestaña nueva)). En Dawn, un bloque Collapsible row (fila desplegable) de la ficha de producto puede mostrar un texto o el contenido de una página (código fuente de Dawn (se abre en una pestaña nueva)), de modo 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)). No se publica hasta que la editas y la publicas.

¿Responden las fotos del producto a las dudas de los compradores?

Las imágenes deberían 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 concluyeron 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 ninguna imagen con modelo, algo que importa sobre todo en ropa, complementos y cosmética (Baymard Institute (se abre en una pestaña nueva)).

Comprueba también que la galería cambie a la imagen correcta al elegir un color, que el zoom funcione en el móvil y que cada imagen tenga un texto alternativo que describa lo que muestra esa vista, como «Camisa de lino, vista trasera».

¿Son las reseñas fáciles de encontrar y fiables?

Muestra la valoración media 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 descubrió que el 89 % de los sitios analizados no responde a las reseñas negativas, y que el 63 % no permite a los compradores pasar de las fotos de un autor a las del siguiente a lo largo de las reseñas (Baymard Institute (se abre en una pestaña nueva)). Los widgets de reseñas que cargan tarde también pueden desplazar la página hacia abajo, así que reserva su espacio.

Shopify: el bloque Product rating (valoración del producto) de Dawn muestra las estrellas de una app de reseñas, y el tema indica que hace falta 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», «Show “verified owner” label on customer reviews», «Reviews can only be left by “verified owners”» y «Enable star rating on reviews», es decir, activar las reseñas de productos, mostrar la etiqueta de «propietario verificado», permitir reseñas solo a propietarios verificados y activar la valoración con estrellas (código fuente de WooCommerce (se abre en una pestaña nueva)).

¿Es fácil llegar al botón «Añadir al carrito» y pulsarlo en el móvil?

En el móvil, los compradores deberían poder ver el precio, elegir una variante y pulsar «Añadir al carrito» sin tener que buscar, con controles lo bastante grandes para acertar.

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

Abre una ficha de producto en un móvil real y comprueba:

  • Primera pantalla. En un diseño móvil apilado, la galería suele ir primero, así que una imagen alta puede empujar el título, el precio y el botón por debajo 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) pone como ejemplo un pie de página fijo que oculta los elementos con el foco (W3C (se abre en una pestaña nueva)).
  • Objetivos táctiles. El criterio 2.5.8 de WCAG (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 móvil (Shopify (se abre en una pestaña nueva)).
  • Desplazamiento horizontal. 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 y de comparación anchas son causas frecuentes.

¿Estorban las ventanas emergentes a la compra?

Las ventanas emergentes que tapan la ficha de producto nada más llegar ocultan la información que buscaban los compradores, así que es mejor usar banners pequeños y limitar las invitaciones a suscribirse.

La guía de Google Search Central describe los intersticiales y diálogos intrusivos como elementos que impiden ver el contenido y recomienda banners pequeños en lugar de superposiciones a página completa (Google Search Central (se abre en una pestaña nueva)). Shopify señala que el contenido de las ventanas emergentes también puede provocar cambios de diseño (Centro de ayuda de Shopify (se abre en una pestaña nueva)). Cualquier diálogo que mantengas debe poder cerrarse con el teclado; el criterio 2.1.2 Sin trampas para el foco del teclado de WCAG (nivel A) exige que el foco pueda salir de un componente usando solo el teclado (W3C (se abre en una pestaña nueva)).

¿Encuentran los compradores tus páginas de confianza y de políticas?

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

En la encuesta de Baymard de 2026, el 19 % de los encuestados dijo haber abandonado una compra porque no se fiaba de dar los datos de su tarjeta a ese sitio web. Unas políticas claras y unos datos de contacto visibles son señales básicas de que una tienda es legítima.

Shopify: cuando añades las políticas en Settings > Policies, Shopify las enlaza automáticamente en el pie de página del proceso de pago; para mostrarlas en la tienda, añádelas a un menú en Content > Menus (Centro de ayuda de Shopify (se abre en una pestaña nueva)) o activa el ajuste Policy links (enlaces a las políticas) del pie de página de Dawn.

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

¿Encuentra el buscador de la tienda productos y respuestas?

El buscador debería devolver los productos correctos para nombres, errores ortográficos y sinónimos, y también responder a consultas como «devoluciones» o «envío».

El estudio comparativo de búsqueda de Baymard de 2026, con más de 170 sitios web y apps, calificó de «mediocre» o peor el 46 % de las experiencias de escritorio, el 58 % de las móviles y el 64 % de las de 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 superventas, 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 la búsqueda predictiva y la tolerancia a errores tipográficos activadas por defecto, y la app Search & Discovery añade 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.

¿Se puede comprar usando solo el teclado?

Todos los pasos, desde elegir una variante hasta llegar al proceso de pago, deberían funcionar solo con el teclado y con un indicador de foco visible.

WCAG 2.2 exige que toda la funcionalidad se pueda usar con el teclado (2.1.1, nivel A), que no haya trampas para el foco del teclado (2.1.2, nivel A), un indicador de foco visible (2.4.7, nivel AA) y que los elementos con el foco no queden totalmente ocultos por otro contenido (2.4.11, nivel AA) (W3C (se abre en una pestaña nueva)). A menudo faltan estos aspectos básicos. La revisión de Baymard de 2021 de 33 sitios con mayor facturación concluyó que el 45 % tenía funciones que no se podían usar con el 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 detectó una media de 56,1 errores por página de inicio, y de 71,0 en los sitios de su categoría de compras (Shopping) (WebAIM (se abre en una pestaña nueva)).

Una prueba de cinco minutos:

  1. Carga una ficha de producto y pulsa Tab sin tocar el ratón.
  2. Comprueba que siempre ves dónde está el foco.
  3. Elige una talla y un color, y cambia la cantidad.
  4. Pulsa «Añadir al carrito» y comprueba que el foco pasa al carrito lateral y que este se cierra 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 análisis gratuito revisa muchos de estos puntos en aproximadamente un minuto. El Informe de Conversión convierte comprobaciones de página como la visibilidad del precio, el botón de añadir al carrito en el móvil, la información de envío y devoluciones, las ventanas emergentes, los enlaces a las políticas en el pie de página, el buscador, el recorrido de compra con teclado y el desplazamiento horizontal en recomendaciones priorizadas. Se basa en comprobaciones de página, no en tus datos de ventas, y no garantiza ninguna venta.

Preguntas frecuentes

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

En la encuesta de Baymard de 2026 a 1083 adultos de EE. UU., la respuesta más frecuente fue «solo estaba mirando» (42 %). Entre los demás motivos, los costes adicionales como el envío, los impuestos y las comisiones 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. Los estudios describen barreras habituales en grandes muestras de sitios web 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ío y devoluciones en una ficha de producto?

Cerca del precio y del botón de compra, como un breve resumen con un enlace a la política completa. En los estudios de Baymard, el 60 % de los encuestados dijo que busca la información sobre la política de devoluciones en la ficha de producto.

¿El botón «Añadir al carrito» tiene que verse en el móvil sin desplazarse?

Ninguna norma lo exige, pero los compradores deberían ver el precio y llegar al botón rápidamente. Una barra de compra fija es una opción, siempre que no oculte los elementos con el foco 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 o el botón de añadir al carrito con el teclado o con un lector de pantalla no puede comprar. El nivel AA de WCAG 2.2 cubre estos aspectos básicos.

Fuentes

Todas las guías