Slide-in

¿Qué es un slide-in?

Un slide-in es un panel o notificación que aparece en pantalla deslizándose desde un borde (normalmente el lateral o la parte inferior) y se superpone a la página sin necesidad de recargarla. A diferencia de una ventana emergente (popup) modal clásica, que aplica un fondo oscuro sobre toda la pantalla, un slide-in ocupa solo una parte del área visible, de modo que el usuario no pierde el contexto de la página subyacente.

¿Por qué es importante un slide-in?

Por lo general, un slide-in se considera menos intrusivo que una ventana emergente clásica porque no bloquea toda la pantalla. Esto hace que el formato sea ideal para mostrar un carrito de compra, una oferta o una suscripción al boletín de noticias sin interrumpir el proceso de compra del cliente. Si se programa bien, un slide-in puede aumentar los registros y el valor medio del pedido, mientras que uno mal implementado puede provocar un cambio de diseño acumulativo (CLS) y molestar a los usuarios en dispositivos móviles.

Casos de uso comunes

• Carrito deslizante (cart drawer): el carrito se desliza desde la derecha cuando un cliente añade un artículo, sin abandonar la página del producto.
• Suscripción al boletín de noticias: un panel discreto en una esquina en lugar de una ventana emergente popup que cubra toda la pantalla.
• Venta adicional y cruzada: productos relacionados o “comprados juntos habitualmente” que se muestran al añadir al carrito.
• Notificaciones: umbrales de envío gratuito, estado de existencias o una CTA con límite de tiempo.

Perspectiva de Shopify

El tema Dawn de Shopify y la mayoría de los temas modernos utilizan un carrito deslizante (cart drawer) que se abre desde el lateral. La adición de slide-ins para suscripciones o ventas adicionales suele realizarse a través de una aplicación o código personalizado. Realiza pruebas siempre en dispositivos móviles, asegúrate de que el panel se pueda cerrar con Esc y gestione el foco del teclado correctamente, y realiza pruebas split de los activadores como la profundidad de scroll, el tiempo de retraso y la intención de salida para que la conversión nunca afecte negativamente a la experiencia del usuario.