Botón añadir al carrito fijo: cómo puntuamos la regla PDP-003

Un botón de añadir al carrito fijo mantiene en pantalla el control principal de compra mientras el comprador recorre una página de producto larga, normalmente como una barra compacta anclada al borde inferior en móvil o bajo la cabecera en escritorio. La regla PDP-003 de UXFix suspende cualquier página de producto en la que el control de añadir al carrito sale del viewport y nada persistente lo sustituye antes de que el comprador llegue al final de la página. Es una regla de flujo, de severidad media y de la etapa de decisión.

Qué comprueba realmente PDP-003

PDP-003 es una de las 115 reglas de nuestro libro de reglas fijo. La ejecutamos sobre la página de producto en producción con un viewport móvil de 390 píxeles y uno de escritorio de 1440 píxeles, haciendo scroll en incrementos fijos y registrando si en cada paso hay un control de añadir al carrito habilitado dentro del viewport.

La regla solo se aplica a páginas largas. Definimos como larga cualquier página de producto en la que el contenido situado bajo el botón principal de añadir al carrito supera dos alturas de viewport en móvil. Una página corta con el botón, un párrafo y un pie de página no necesita una barra fija y no se penaliza por no tenerla.

Los tres resultados se formulan como condiciones que puedes comprobar tú mismo con un teléfono y un pulgar.

Aquí, una "profundidad de scroll" equivale a una altura completa de viewport. Así que la condición de suspenso, en palabras sencillas, es: el comprador hace scroll dos veces, el botón ha desaparecido y no vuelve a aparecer hasta que sube del todo.

Consideramos un botón de "Comprar ahora" o de pago express como sustituto persistente aceptable solo si también añade el artículo al carrito o abre un panel de carrito. Un control de "Avísame" o "Ver similares" no cuenta, y tampoco una cabecera fija con un icono de carrito pero sin acción de añadir.

¿Por qué desaparece el botón de añadir al carrito en las páginas de producto largas?

Porque la página se hizo más larga y el botón no se movió. Hace diez años, una página de producto típica era una imagen, un título, un precio, un botón y un párrafo. Hoy esa misma página incluye una tabla comparativa, una guía de tallas, tres bloques de acordeón, un módulo de reseñas con filtros, un vídeo comprable y un carrusel de recomendaciones. El botón sigue arriba.

El estudio de eye-tracking de NN/g sobre scroll y atención encontró que los usuarios pasan el 57 % de su tiempo de visualización por encima del pliegue, y el 74 % dentro de las dos primeras pantallas. Eso suele leerse como "pon todo arriba". La lectura más útil para una página de producto es que el comprador que sí pasa de las dos pantallas es el que está haciendo un trabajo real de evaluación: leer reseñas y comprobar dimensiones. Ese comprador está más cerca de comprar que el que rebotó en el pliegue, y acabas de esconderle el botón.

En las auditorías de UXFix de 137 páginas móviles que suspenden, la página mediana coloca el módulo de reseñas 3,1 alturas de viewport por debajo del botón principal. Un comprador que lee dos reseñas y decide comprar tiene que retroceder unas cuatro pantallas, encontrar el botón y confirmar que la variante que eligió sigue seleccionada. Algunos lo hacen. Otros abren una pestaña nueva con un competidor. No podemos ver cuáles, y tu analítica tampoco si solo registras los eventos de añadir al carrito.

Esas cifras proceden de las 312 páginas de producto que UXFix auditó en el último trimestre, en su mayoría tiendas Shopify, WooCommerce y Salesforce Commerce Cloud con ingresos de entre 1 y 50 millones. La mayoría de los aprobados limpios estaban en temas que incluyen la barra por defecto.

Añadir al carrito fijo en móvil: cómo son un suspenso, un parcial y un aprobado

Los ejemplos siguientes están anonimizados a partir de auditorías reales. Cada uno se describe tal como se leería el pie de la captura de pantalla, para que puedas contrastar tu propia página con las mismas observaciones sin la imagen.

Suspenso: tienda de ropa, página de producto de 6.200 píxeles

Observado en un viewport de 390 por 844: botón principal a 620 píxeles del borde superior. Selector de talla encima. Debajo del botón, una historia sobre el tejido, un acordeón con la guía de tallas, un carrusel de "Completa el look", 48 reseñas con barra de filtros y un pie de página. El botón salió del viewport a 1,1 profundidades de scroll. Nada lo sustituyó. La cabecera era fija, pero solo contenía un logo, un icono de búsqueda y un icono de carrito con contador.

Lo que cuesta: el comprador que consulta la guía de tallas, que es el motivo más habitual para hacer scroll en moda, tiene que volver arriba para comprar. Si aún no había elegido talla, el selector de talla también está allí arriba.

Parcialmente afectado: tienda de suplementos, tema de Shopify con una app de pago de barra fija

Observado: apareció una barra en el borde inferior tras 1,4 profundidades de scroll. Mostraba el nombre del producto y un botón de "Añadir al carrito". No mostraba el precio, ni el sabor ni el tamaño del pack que el comprador había seleccionado. Al tocar el botón, la página saltaba de vuelta arriba para mostrar el selector de variantes, que es exactamente el viaje que la barra debía eliminar.

La barra también cubría los dos últimos enlaces del pie, "Envíos" y "Devoluciones", al final de la página. Eso es una deducción aparte en nuestra comprobación de accesibilidad del pie, pero también incumple la cláusula de tapado de PDP-003.

Aprobado: tienda de muebles, tema a medida

Observado: el botón principal estaba a 560 píxeles. En el momento en que cruzó el borde superior del viewport, una barra de 64 píxeles se deslizó desde abajo con una miniatura de 40 píxeles, el acabado seleccionado, el precio incluyendo la opción de entrega seleccionada en ese momento y un botón de "Añadir al carrito" a ancho completo con 48 píxeles de altura táctil. La barra respetaba el área segura del indicador de inicio del iPhone. Cuando el comprador ponía el foco en el campo de código postal del estimador de entrega, la barra se ocultaba hasta que el teclado se cerraba. En el pie, la barra permanecía, pero la página tenía 80 píxeles de relleno inferior, así que ningún enlace quedaba cubierto.

En escritorio, la misma tienda usaba una barra superior estrecha bajo la cabecera en lugar de una barra inferior, que es el patrón más habitual en escritorio e igualmente aceptable según la regla.

Cómo implementar un añadir al carrito fijo en Shopify y en temas a medida

En Shopify, varios temas actuales incluyen este comportamiento de forma nativa. Si tu tema ya tiene una opción de "sticky add to cart" o "sticky product form" en el editor de temas, actívala y luego audítala contra las condiciones de parcial anteriores. Las implementaciones nativas suelen acertar con el precio y a menudo fallan con la variante, así que prueba específicamente un producto con variantes.

Si tu tema no lo incluye, tienes dos caminos. Una app de la Shopify App Store es más rápida y es lo que usaban la mayoría de nuestras páginas parcialmente afectadas. Los defectos recurrentes eran la falta del estado de la variante, cubrir el pie e inyectar la barra tan tarde que provocaba un desplazamiento del layout. Una implementación a nivel de tema le lleva a un desarrollador unas horas y evita los tres, porque puede leer el mismo objeto de estado de variante que usa el formulario principal.

El patrón estructural es pequeño. Los detalles importantes están en el comportamiento, no en el marcado.

<div class="sticky-atc" data-sticky-atc hidden>
  <img class="sticky-atc__thumb" src="" alt="">
  <div class="sticky-atc__meta">
    <span data-sticky-variant>Size M / Navy</span>
    <span data-sticky-price>49.00</span>
  </div>
  <button type="button" data-sticky-submit class="btn btn--primary">Add to cart</button>
</div>

Tanto si lo construyes como si lo compras, comprueba estos comportamientos antes de publicar. Empieza por el disparador y el estado que lleva la barra.

• Dispara por visibilidad, no por un desplazamiento en píxeles. Usa un intersection observer sobre el botón principal y muestra la barra cuando este salga del viewport. Los desplazamientos en píxeles se rompen en cuanto un banner promocional cambia el layout.
• Refleja el estado de variante y cantidad. Cuando el comprador cambia la talla en el formulario principal, la barra se actualiza. Cuando toca el botón de la barra, envía el mismo formulario o llama a la API del carrito con el mismo ID de variante. No lo devuelvas arriba.
• Gestiona el estado sin selección. Si el producto requiere una variante y no se ha elegido ninguna, la barra debe abrir el selector de variantes en un panel o indicar "Elige una talla" y seguir visible. Lanzar un aviso de error desde el fondo de una página de 6.000 píxeles es un suspenso parcial.

Después, comprueba qué cubre la barra y qué le hace al layout.

• Reserva espacio. Añade a la página un relleno inferior igual a la altura de la barra una vez mostrada, para que nunca cubra el pie, el banner de cookies ni un lanzador de chat. Coloca el lanzador de chat por encima de la barra, no detrás.
• Evita el desplazamiento del layout. Inyecta la barra en el HTML inicial con el atributo hidden y alterna su visibilidad, en lugar de añadirla desde un script que carga después de que la página se pinte. La inyección tardía se nota en tu puntuación de Cumulative Layout Shift y en compradores que tocan por error lo que se movió.

A continuación, las dos cláusulas de accesibilidad por las que más deducimos.

• Respeta el teclado y el foco. Oculta la barra mientras un campo de texto tiene el foco en móvil. El criterio de éxito 2.4.11 de WCAG 2.2, Focus Not Obscured, exige que un elemento con foco no quede totalmente oculto por contenido creado por el autor, y una barra inferior sobre un campo con foco es la infracción de manual. La referencia rápida de WCAG tiene la redacción exacta.
• Cumple el tamaño de objetivo. WCAG 2.2 fija un mínimo de 24 por 24 píxeles CSS en el nivel AA y un objetivo de 44 por 44 para el criterio mejorado. Un pulgar sobre una barra en movimiento merece los 44. Deducimos como parcial cuando el botón tiene menos de 44 píxeles de alto.

Por último, comprueba la superposición en escritorio y lo que ve un agente.

• Mantén la barra fuera del camino de la cabecera fija en escritorio. Dos barras ancladas en un portátil de 1440 por 800 pueden comerse una cuarta parte del espacio vertical. En escritorio, una barra superior de 56 píxeles que sustituye a la cabecera cuando el botón desaparece es el patrón más limpio.
• Dale texto real para los agentes. Los agentes de compras con IA que leen el DOM buscan el mismo botón que el comprador. Los controles duplicados con etiquetas idénticas están bien siempre que ambos funcionen; una barra que es una imagen o un botón solo con icono, no. Nuestra lista de comprobación de rastreabilidad para agentes de IA cubre el resto de lo que los agentes necesitan de una página de producto.

¿Un botón de añadir al carrito fijo mejora la tasa de conversión?

Nos lo preguntan en casi todas las llamadas de auditoría, y la respuesta honesta es que puntuamos el cumplimiento, no la mejora. No hacemos tests A/B en las tiendas de los clientes, así que no tenemos un porcentaje controlado que darte, y no vamos a tomar uno prestado de la ficha de una app.

Lo que sí podemos decir se apoya en el libro de reglas. PDP-003 es de severidad media porque no bloquea una compra, sino que le añade fricción. El comprador siempre puede volver arriba. Compáralo con una regla de severidad alta, como un campo obligatorio sin etiqueta en el checkout, que algunos compradores no consiguen superar en absoluto. La investigación sobre páginas de producto de Baymard sitúa el añadir al carrito persistente en la misma categoría: un problema de usabilidad móvil que provoca scroll innecesario e interrumpe la secuencia de evaluación, más que un bloqueo duro.

El resultado medible que puedes seguir tú mismo es conductual. Antes de publicar la barra, registra dos eventos: los clics en añadir al carrito y la profundidad de scroll a la que ocurre cada clic. En una página que suspende, todos los clics ocurren en la primera pantalla, porque es el único lugar donde existe el botón. Después de publicar la barra, la distribución se extiende hacia abajo por la página. Los clics desde la barra a tres o cuatro pantallas de profundidad son compras de compradores que estaban leyendo reseñas o la guía de tallas cuando decidieron. Esos son los compradores a los que antes devolvías arriba.

Si esa distribución no se mueve nada al cabo de dos semanas, o bien tu página no es realmente larga para la mayoría de los compradores, o bien la barra tiene uno de los defectos parciales anteriores y la gente no la usa. Ambas cosas merecen saberse.

Una lista de comprobación de UX de PDP para la barra fija

Úsala antes de pedirnos una nueva auditoría, o como criterios de aceptación que entregas a un desarrollador o a un proveedor de apps. Cada línea corresponde a una cláusula de la rúbrica de PDP-003 o a una regla vecina que comprobamos en la misma página.

Primero, confirma que la regla aplica y que la barra aparece.

• El botón principal de añadir al carrito está habilitado y visible en el primer viewport en una pantalla móvil de 390 píxeles de ancho.
• Debajo de ese botón, la página se extiende más de dos alturas de viewport en móvil. Si no, no necesitas la barra y puedes parar aquí.
• Aparece un control persistente de añadir al carrito en cuanto el botón principal sale del viewport, tanto en móvil como en escritorio.
• El control persistente muestra la variante seleccionada y el precio actual, incluido cualquier descuento activo.

Segundo, comprueba qué pasa cuando el comprador lo usa.

• Tocar el control persistente añade la variante seleccionada al carrito o abre un panel de carrito. No navega a otra página ni sube el scroll.
• Sin variante seleccionada, el control abre el selector de variantes en el sitio o muestra un aviso en línea, y sigue visible.
• El control tiene al menos 44 píxeles CSS de alto en móvil y tiene una etiqueta de texto, no solo un icono.
• La barra se oculta mientras un campo de texto tiene el foco en móvil, y nunca cubre un elemento con foco en escritorio.

Tercero, comprueba el layout y los casos límite.

• La página tiene un relleno inferior igual a la altura de la barra, de modo que los enlaces del pie, el lanzador de chat y el banner de cookies siguen siendo accesibles.
• La barra está presente en el HTML inicial y se alterna su visibilidad, por lo que no provoca desplazamiento del layout al cargar.
• Las variantes agotadas deshabilitan el botón de la barra con una etiqueta clara en lugar de eliminar la barra. Nuestro artículo sobre páginas de producto agotado explica por qué eliminar el control por completo te cuesta el registro de aviso de reposición.
• La versión de escritorio no se apila con una cabecera fija hasta consumir más de 120 píxeles de un viewport de 800 píxeles de alto, que es el umbral de la rúbrica de UXFix.

Si quieres el contexto completo de esta regla, la lista de todo lo que comprobamos en las páginas de producto, carrito y checkout está en las 115 reglas de UX de checkout que auditamos. PDP-003 pertenece al grupo de página de producto, junto con la selección de variantes, la visibilidad del precio y los mensajes de stock, y es la que con más frecuencia se corrige en la semana siguiente a la entrega del informe, porque el arreglo es mecánico.

Preguntas frecuentes

¿Cuándo debería tener una página de producto un añadir al carrito fijo?

Cuando el contenido situado bajo el botón principal se extiende más de unas dos alturas de viewport en un teléfono. Ese es el umbral que usamos para PDP-003. Las páginas con módulos de reseñas, guías de tallas, tablas comparativas o descripciones largas casi siempre lo superan. Una página corta con un botón y dos párrafos no lo necesita, y añadir una barra ahí solo consume espacio de pantalla sin motivo.

¿Una barra de añadir al carrito fija perjudica la UX móvil?

Solo cuando está mal construida. La barra perjudica cuando cubre un campo con foco, oculta el pie, hace saltar el layout al cargar o pierde la variante, de modo que el toque devuelve al comprador arriba. Una barra que aparece solo después de que el botón principal desaparezca, muestra precio y variante, respeta el área segura y cede ante el teclado le cuesta al comprador unos 64 píxeles de una pantalla de 844 mientras lee, lo cual es un intercambio justo a cambio de no retroceder cuatro pantallas.

¿La barra fija debería ir arriba o abajo en móvil?

Abajo. Queda al alcance del pulgar, no compite con la barra de direcciones del navegador ni con tu cabecera fija, y coincide con el recorrido que ya hace la vista del comprador mientras baja. En escritorio, una barra superior estrecha que aparece bajo la cabecera o en su lugar es el patrón más habitual y aprueba PDP-003 igualmente, siempre que los dos elementos anclados juntos no consuman una parte grande del viewport.

¿Importa el añadir al carrito fijo para los agentes de compras con IA?

Menos que para los humanos, pero no es irrelevante. Los agentes que controlan un navegador real encuentran el botón principal por su etiqueta y pueden hacer scroll, así que la barra fija no es lo que los bloquea. Lo que sí les afecta es una barra que duplica el control con una etiqueta distinta, un botón solo con icono o un elemento inyectado tarde que cambia el DOM después de que el agente lo haya leído. Mantén las etiquetas idénticas y la barra en el HTML inicial, y la puntuación de agentes no se ve afectada.