¿Qué es Sticky Add to Cart?

Sticky Add to Cart es un control de compra que permanece visible mientras se recorre la ficha de producto. En lugar de desaparecer al desplazarse, el botón queda anclado en una barra en la parte superior o inferior de la ventana, a menudo junto al nombre del producto, la imagen, el precio y el selector de variante. El patrón es habitual en fichas de producto móviles, donde descripciones largas, reseñas y módulos de recomendación alejan el botón original del campo de visión. La barra suele aparecer cuando el botón en línea queda fuera de pantalla y se oculta al volver.

Definición

Sticky Add to Cart es un patrón de presentación y no una función de comercio independiente: invoca la misma acción de carrito que el botón en línea y comparte su estado, incluidos los estados deshabilitados para variantes no disponibles. Las variantes se diferencian por la cantidad de información que transportan. Una barra mínima muestra solo el botón, una barra completa repite miniatura, título, precio y selección de variante para poder elegir sin volver arriba. Las restricciones de diseño importan: la barra ocupa espacio vertical, puede chocar con la interfaz del navegador móvil, los avisos de consentimiento y los widgets de chat, y no debe cubrir campos de formulario. Los botones duplicados necesitan identificadores de analítica distintos.

Por qué es importante

En una storefront desacoplada la barra fija es un asunto de composición resuelto por completo en la capa de presentación, mientras que precios, stock y mutaciones de carrito permanecen detrás de la API de comercio. Renderizar la barra a partir del mismo estado de producto que alimenta el botón en línea evita divergencias al cambiar de variante. Al tratarse de un elemento fijo y a menudo animado, pertenece al presupuesto de hidratación de la página y no debería bloquear el hilo principal durante la carga inicial. Controlar la visibilidad con un intersection observer en lugar de un listener de scroll protege la estabilidad del diseño y la respuesta a la interacción.

Casos de uso

La ubicación típica es la ficha de producto en pantallas pequeñas, donde la barra aparece tras salir la sección principal del área visible. En escritorio el equivalente es una columna fija que mantiene precio y controles de compra junto al contenido largo. Las vistas rápidas y los configuradores de packs usan el mismo patrón para conservar la acción principal al alcance. En páginas de categoría, una barra fija puede resumir un conjunto de filtros o una acción de comparación. En el checkout el patrón transporta la acción de continuar. Si hay espacio, la barra también aloja información secundaria como plazos de entrega o estado de stock.

Relacionado

Más información: Mobile Commerce · Conversion Rate Optimization (CRO).