Cart & Mini-cart

El mini-cart drawer mantiene al usuario en contexto mientras sigue navegando, lo que beneficia la conversión en desktop. En mobile el drawer ocupa el 100% de la pantalla y elimina por completo el contexto previo, comportándose como una página separada pero con peores anclas de UX y sin URL propia. El estándar es resolver por dispositivo: drawer lateral que se cierra al hacer click fuera en desktop, y redirección a una página de carrito con su propia URL al tap del icono en mobile. Para productos de alto valor, configurables o con comparación de variantes, la página activa el modo mental de "compra deliberada".

Al agregar un item el usuario necesita confirmación visible de que la acción ocurrió y de que la variante correcta (talla, color, cantidad) quedó capturada. NN/g es explícito: los overlays transitorios que se desvanecen solos impiden revisar qué entró exactamente al carrito. El feedback óptimo combina badge numérico en el icono del carrito, un overlay persistente o página interstitial con imagen del producto y variante, y un botón "Agregar" que cambia de estado. Nunca forzar al checkout: ofrecer "Seguir comprando" e "Ir al carrito" lado a lado.

Los controles de cantidad con botones +/− son superiores a los campos de texto libre o dropdowns: eliminan errores de tipeo y reducen la fricción de actualización. Baymard reporta que el 61% de los sitios fallan en implementar selectores de cantidad óptimos. Los cambios deben reflejarse automáticamente en el resumen, sin un botón separado de "Actualizar carrito". Al eliminar un item, ofrecer un enlace de "deshacer" durante unos segundos evita la frustración de tener que re-buscarlo: la eliminación accidental es uno de los errores más caros del flujo.

Los costos sorpresa al final del checkout son el principal motivo de abandono de carrito: Baymard atribuye al "extra costs too high" (envío, impuestos, comisiones) el 48% de los carritos abandonados en 2024, el motivo #1 por sexto año consecutivo. Mostrar el envío estimado, los impuestos aplicables y el total final dentro del carrito, idealmente con una calculadora por código postal, elimina la fricción cognitiva y establece confianza antes de que el usuario invierta tiempo en el formulario de pago. Si el envío es gratis a partir de cierto monto, indicar cuánto falta eleva el ticket promedio.

Más de un tercio de los compradores necesitan más de 24 horas para completar una compra y más del 50% usan el carrito como lista de deseos temporal. Persistir el carrito vía cookie (sesiones anónimas) y vía cuenta (autenticadas) recupera intenciones reales sin fricción; la recomendación de duración ronda los 60 días para acomodar patrones multi-plataforma. Cuando el usuario regresa, las alertas honestas de cambio de precio o disponibilidad ("stock limitado", "precio actualizado") respetan la transparencia y evitan sorpresas en el checkout. El antipatrón es un carrito que se vacía al cerrar la pestaña.

Un carrito vacío sin orientación es una oportunidad perdida. Mostrar productos populares, artículos vistos recientemente o categorías relevantes convierte el estado vacío en una pantalla de descubrimiento. Un mensaje directo ("Aún no tienes nada aquí, exploremos") junto a un CTA prominente que lleve al catálogo o a la última categoría visitada reduce el abandono total del sitio. Lo contrario, una página en blanco con solo la frase "Tu carrito está vacío", deja al usuario sin acción siguiente y lo empuja a cerrar la pestaña.

Las recomendaciones de productos complementarios en el carrito pueden generar entre el 10% y el 30% del revenue de un sitio (Forrester, citado en Contentsquare), pero solo si el usuario puede ignorarlas sin friccionar su camino al checkout. El principio central: el CTA de checkout debe ser siempre el elemento más prominente; los cross-sells son elementos secundarios con jerarquía visual inferior. No mostrar más de 2-3 sugerencias y nunca usar modales que bloqueen la navegación. Un "+ Agregar" debe actualizar el carrito en sitio, sin redirigir.

El botón de checkout debe ser el elemento visualmente dominante del carrito: color de acento, tamaño generoso y espacio en blanco alrededor. En mobile conviene hacerlo sticky al scroll para que siempre esté al alcance. El total final, con todos los costos incluidos, debe aparecer inmediatamente arriba o dentro del mismo bloque del CTA, la prominencia del botón y la visibilidad del total se apoyan en el mismo 48% de abandono por costos sorpresa de Baymard. El antipatrón es un "Checkout" mediano al fondo de una lista larga, sin total a la vista en el mismo viewport.