El proyecto en un vistazo
El reto
FEWI es marca de calzado modular del mismo grupo que POPA, cuya propuesta de valor es que el usuario componga su sandalia eligiendo una base (piso + plantilla, plana o cuña) y varios cortes intercambiables. Hasta ahora ese proceso de personalización vivía en una página tradicional de producto "a medida".
El problema: dificultaba la conversión. El usuario tenía que entender por su cuenta cómo combinar varios productos del catálogo. El objetivo del proyecto fue sustituir esa página por un quiz interactivo guiado que llevase al usuario paso a paso desde la primera visita hasta el carrito, integrando la promoción comercial de la marca ("con 3 cortes, la base es gratis") y mostrando todo el catálogo en un único flujo coherente con el diseño de Figma proporcionado.
Stack y arquitectura
- Plataforma: Shopify (theme custom), con sincronización vía GitHub.
- Frontend: Liquid (sections + snippets), CSS con container queries (cqh/cqi), y JavaScript vanilla mediante un Web Component
<quiz-controller>. - Estado: máquina de estados con persistencia en
localStorage(clavefewi:quiz-state), de modo que el usuario puede cerrar el popup y retomar el flujo donde lo dejó. - Fuente de verdad del diseño: archivo de Figma del cliente, consumido directamente desde el editor mediante el MCP de Figma para asegurar paridad pixel-perfect entre diseño y código.
El quiz se compone de 10 pasos (bienvenida, talla, primera vez, vídeo educativo, intent, categoría, transición, selector de corte, catálogo expandido y resumen), con dos rutas de navegación que se bifurcan en función de si el usuario es nuevo o recurrente.
Decisiones técnicas relevantes
Bifurcación de flujos (Ruta A vs Ruta B)
Los usuarios primerizos pasan por un vídeo educativo y un selector de tipo de plataforma. Los usuarios recurrentes, según si quieren un nuevo modelo o renovar cortes existentes, saltan o no la pantalla de transición de base. La máquina de estados modela esta bifurcación con dos métodos centralizados (#goToNextStep y #goToPrevStep) que mantienen la simetría del Back/Next.
Catálogo expandido (PDC)
La pantalla central del quiz renderiza, en una sola vista, todas las colecciones de cortes ordenadas por categoría (Plana o Cuña), con la sección del corte seleccionado en primer lugar. Al pulsar un producto se abre un PDP drawer lateral en desktop o como hoja inferior en mobile, con carrusel de imágenes con drag-to-scroll y dots de navegación.
Filtro de stock global
Los cortes agotados se ocultan completamente del catálogo (no se muestran en gris). Si una sección entera queda sin productos disponibles para la talla del usuario, se oculta. Esto evita la frustración del click → no disponible.
Promoción contextual
Un toast minimizable se mantiene visible durante los pasos de selección, recordando la promo "con 3 cortes, la base es gratis". Se minimiza a una burbuja en la esquina si el usuario lo desea, sin desaparecer del todo.
Resumen iterativo
Tras cada producto añadido, el usuario es llevado al resumen, donde ve su selección actual y puede decidir si añadir más cortes o pasar al pago. Cuando se cumple la promo, el precio de la base aparece tachado junto a "GRATIS".
Iteración con cliente
El proyecto se desarrolló en sprints cortos con feedback continuo. Cada iteración incluyó:
- Validación visual contra Figma frame por frame.
- Pruebas en dispositivos reales aportadas por el cliente (iPhone 16 Plus, MacBook Pro Retina 14" y 16").
- Ajustes de UX a partir de pruebas con usuarios: gating de botones que sólo deben activarse tras una selección, redirección automática al resumen tras añadir un producto, y refinado del
touch-actionen mobile para que el scroll vertical no quedase bloqueado por el carrusel horizontal.
Resultado
El quiz reemplaza una página estática poco intuitiva por un flujo guiado de 10 pasos que combina educación de marca, presentación de catálogo, promoción comercial y configuración de producto en un único componente. La arquitectura de máquina de estados con persistencia local permite que cualquier ajuste de copy, precios o productos se haga desde el theme editor de Shopify sin tocar código, manteniendo así la autonomía del cliente para evolucionar el contenido.
¿Tu producto necesita configuración guiada?
Construimos quizzes interactivos en Shopify que guían al cliente desde la entrada hasta el carrito sin fricción.
Hablamos