Shopify y Vercel están reconstruyendo Hydrogen como una base abierta y agnóstica al runtime. Hydroge…
Los empty states como palancas de conversión en los storefronts de 2026
Los empty states no son casos límite. Son fugas de conversión sistemáticas, mucho más frecuentes en los storefronts del mid-market de lo que la mayoría de los equipos de UX imagina. Carrito vacío: ocurre al inicio de cada sesión nueva. Resultados de búsqueda vacíos: ocurre con las erratas, con los huecos estacionales del catálogo, con los grupos de productos agotados. Resultado de filtro vacío: ocurre en el momento en que un cliente combina dos atributos que el catálogo no puede satisfacer. Wishlist vacía, historial de pedidos vacío, ficha de producto agotado: todos son momentos en los que el storefront no ofrece nada a un customer journey activo, y el camino de vuelta al carrito sigue abierto o bien la pestaña se cierra.
Responder a estos estados con un genérico «Sin resultados» es dejar potencial de conversión sobre la mesa, un potencial que no exige ningún deployment de backend. Los seis patrones que siguen describen, para cada empty state relevante en la práctica de un storefront, la condición de activación, la dirección del copy, la estructura del componente y el indicador de conversión.
Patrón 1: Search-Empty, sugerencias curadas en lugar de «Sin resultados»
Activación: El cliente escribe un término de búsqueda y el conjunto de resultados queda vacío, porque el término no coincide con el catálogo, contiene una errata o el surtido no cubre esa categoría.
Dirección del copy: Nada de «Sin resultados para “zapatillas de running rojas”». En su lugar: alternativas curadas justo debajo del campo de búsqueda. Tres o cuatro tarjetas de producto de categorías afines, una etiqueta breve tipo «Otros están buscando», un enlace directo a la categoría principal. El mensaje es: aquí no hay nada, pero esto es lo que viene ahora.
Estructura del componente: Un componente SearchEmptyState con dos slots: PrimaryMessage (texto estático, editable por el responsable de marketing en Studio) y ProductRecommendations (dinámico, alimentado vía storefront API con una señal de popularidad o de tendencia). El componente no replica la lógica de negocio, aporta el slot.
Indicador de conversión: Las páginas que muestran un bloque de contenido alternativo tras una búsqueda vacía mantienen al cliente en sesión más tiempo que un simple estado «Sin resultados». La métrica relevante es la reducción de la tasa de rebote, no una subida directa del checkout.
Patrón 2: Filter-Empty, una CTA «Quitar el último filtro»
Activación: El cliente ha aplicado dos o más filtros y el conjunto de resultados combinado está vacío. Caso habitual: color más talla más rango de precio, una combinación que el surtido no cubre.
Dirección del copy: Nada de una lista vacía y muda. En su lugar: una única CTA bien visible, «Quitar el último filtro» (y no «Restablecer todos los filtros», demasiado destructivo). Con una explicación breve: «Ahora mismo no hay nada en esta combinación, pero sin [último atributo] te esperan X resultados.» El número X es salida real de la query, no un valor de relleno.
Estructura del componente: El componente FilterEmptyState lee la pila de filtros actual desde el estado de la URL, identifica el parámetro de filtro añadido en último lugar y construye la CTA de forma programática. Las plantillas de copy y el styling del lado de marketing son editables; la lógica de filtrado permanece en la storefront API.
Indicador de conversión: Un camino de vuelta dirigido hacia un conjunto de resultados con contenido mantiene intacto el bucle de navegación por filtros. El cliente no abandona la selección de filtros, la corrige. La profundidad de clic y el add-to-cart desde resultados filtrados mejoran frente a los escenarios de reseteo completo.
Patrón 3: Cart-Empty, cross-selling con los últimos productos vistos
Activación: El cliente llega a la página del carrito, ya sea tras iniciar sesión sin ningún add-to-cart previo o tras haber eliminado todos los artículos del carrito.
Dirección del copy: Nada de un genérico «Tu carrito está vacío, sigue explorando». En su lugar: de tres a cinco productos vistos recientemente dentro de la propia página del carrito, como bloque de cross-selling. Etiqueta: «Estuviste mirando estos, ¿te siguen interesando?» Seguida de un enlace secundario a la home o a la promoción vigente.
Estructura del componente: Un componente CartEmptyState con un slot LastViewedProducts. El slot recupera del LocalStorage del navegador (o de una cookie de sesión) los slugs de las últimas PDP visitadas y carga los datos de producto correspondientes vía storefront API. No hace falta ningún servicio de personalización: lógica frontend pura con una llamada API estándar.
Indicador de conversión: El cross-selling con los últimos productos vistos en la página del carrito se dirige a clientes que ya han mostrado intención, y la probabilidad de conversión es medible y más alta que con recomendaciones de categoría genéricas. La métrica relevante es el «add-to-cart desde el empty state del carrito».
Patrón 4: Wishlist-Empty, un slot de onboarding
Activación: Un cliente recién registrado o recién identificado abre por primera vez la página de wishlist. La lista está vacía porque todavía no ha guardado ningún producto.
Dirección del copy: Esto no es un estado de error, es un momento de onboarding. Copy: «Tu lista de favoritos está lista, guarda los productos que quieras recuperar o comparar más adelante.» Añade dos o tres sugerencias de producto curadas entre los más vendidos del momento, bajo la etiqueta «Por dónde empiezan otros», con curación manual en Studio y sin ningún algoritmo.
Estructura del componente: El componente WishlistEmptyState distingue con claridad dos subestados: «recién registrado» y «wishlist vaciada». En el primer caso muestra el copy de onboarding con el slot de curación. En el segundo, una CTA sencilla de vuelta al catálogo («Encuentra nuevos favoritos»). Ambos estados son editables en Studio sin un deployment de engineering.
Indicador de conversión: Un estado de onboarding de wishlist bien cuidado acorta el camino hasta la primera interacción con la wishlist. Las wishlists con al menos tres artículos muestran una probabilidad de retorno medible y más alta que las wishlists que quedan vacías al final de la sesión.
Patrón 5: Order-History-Empty, la bienvenida al cliente nuevo
Activación: El cliente acaba de registrarse o de identificarse por primera vez. La página de historial de pedidos está vacía porque todavía no ha hecho ninguna compra.
Dirección del copy: Nada de una tabla vacía con «Aún no hay pedidos». En su lugar: un marco de bienvenida, un saludo personal breve («Bienvenido [Nombre], aquí aparecerán tus pedidos»), una CTA discreta («Empieza tu primera compra») y un enlace a los más vendidos del momento o a la home personalizada.
Estructura del componente: El componente OrderHistoryEmptyState comprueba si se trata realmente de una cuenta nueva (sin pedidos, sin IDs de pedido importados) y entrega el marco de bienvenida. El componente lee el nombre desde la sesión para la personalización, no hace falta ninguna llamada al CRM, basta con el token de autenticación. El copy y la CTA son editables en Studio.
Indicador de conversión: Un estado de bienvenida que orienta al cliente en la página de historial de pedidos no es un driver directo de checkout, pero sí una señal de confianza. En el análisis del customer journey, los clientes que tras registrarse encuentran un área de cuenta funcional (en lugar de tablas vacías) muestran tasas de primer pedido más altas en los primeros 7 días.
Patrón 6: Out-of-Stock-Empty, captura en lista de espera
Activación: El cliente llega a una PDP cuyo producto está totalmente agotado: todas las variantes, todas las tallas, todos los colores. El estado por defecto muestra «No disponible».
Dirección del copy: No es el final de la conversión, sino el inicio de un bucle de captura de intención. Copy: «Ahora mismo agotado, te avisamos en cuanto vuelva.» Un único campo de email. Sin bloques de formulario largos, sin login obligatorio de cuenta. Añadido opcional: «Te escribimos en cuanto vuelva a estar disponible.»
Estructura del componente: El componente OutOfStockEmptyState contiene un slot WaitListForm: un campo de email, un botón de envío y un texto de estado de éxito tras el envío. La dirección de email se transfiere al CRM o al ESP (HubSpot, Klaviyo) vía webhook, una sola llamada API desde el frontend, sin capa de middleware en backend. El copy, los colores y las etiquetas del formulario son editables en Studio.
Indicador de conversión: Las capturas en lista de espera en PDP agotadas convierten la intención en un contacto de marketing trazable. Las métricas relevantes son la «tasa de captura en PDP agotadas» y la «conversión tras el email de aviso de reposición».
El frontend layer como iterador de patrones: por qué estos patrones funcionan sin depender del sprint
Estos seis patrones comparten una propiedad: no requieren ningún deployment de backend. Son opciones puramente de frontend. Un editor Studio, como el que ofrece una Frontend Management Platform, permite a los equipos de marketing iterar cada uno de estos estados: ajustar el copy, testear el texto de la CTA, cambiar la curación, alinear el color del formulario con una campaña de temporada.
Esa es la diferencia entre un empty state entendido como una implementación puntual (sprint, deploy, listo) y un empty state entendido como un slot de conversión permanente. Engineering define la estructura del componente una sola vez. El componente vive en la arquitectura composable headless frontend. Marketing itera el copy, el timing y la curación, sin abrir un ticket.
Este no es un argumento «no-code». Engineering sigue siendo el owner de la estructura del componente. La pregunta real es cuántas veces has actualizado el copy de tu empty state de búsqueda desde que salió a producción. Si la respuesta es «una vez», hay potencial en el frontend layer. Y para los equipos que no quieren ceder en performance: los componentes se pueden definir dentro del presupuesto de CWV. Un slot de formulario out-of-stock no provoca una regresión de LCP si se carga en lazy loading correctamente.
Los empty states son superficies pequeñas. Pero aparecen miles de veces al día en cualquier storefront. Los equipos que optimizan de forma sistemática estos seis momentos recuperan conversión de mid-funnel en estados que hasta ahora perdían valor sin que nadie lo notara.
Para la UX de la búsqueda por facetas y los patrones de storytelling en PDP existen guías específicas: la capa de empty states se sitúa un nivel por debajo y complementa a ambas.
Lecturas recomendadas:
CTA: ¿Quieres averiguar qué empty states de tu storefront te están costando conversión ahora mismo? Reserva una auditoría UX rápida. 30 minutos, seis estados, una recomendación de componente concreta para cada uno.