Frontend & UX
Frontend y UX para Adobe Commerce que convierten
Luma, el tema clásico de Adobe Commerce (antes Magento), sigue soportado, pero carga mucho JavaScript y cuesta trabajo llevarlo a buenos Core Web Vitals. Hoy hay dos caminos modernos: Hyvä, gratis y de código abierto desde noviembre de 2025, y el storefront de Adobe sobre Edge Delivery Services. Te ayudamos a elegir el que conviene a tu operación y lo construimos con UX basada en datos.
Decisión
¿Qué frontend elegir para Adobe Commerce?
Estas son las cinco opciones reales hoy, con lo que implica cada una:
- Luma: el tema predeterminado de Adobe Commerce. Soportado y conocido, pero pesado; tiene sentido cuando la inversión en frontend es mínima o como paso intermedio.
- Hyvä: reemplaza a Luma con Tailwind CSS y Alpine.js sin salir del stack de Adobe Commerce. Es la opción más directa para la mayoría de las tiendas en PaaS y, desde noviembre de 2025, el tema es gratuito.
- Storefront de Adobe sobre Edge Delivery Services: componentes listos para carrito, checkout y cuenta, con el contenido servido desde el edge. Viene incluido con Adobe Commerce as a Cloud Service, funciona con Adobe Commerce Optimizer y en PaaS pide la versión 2.4.8 o superior.
- PWA Studio: el framework React + GraphQL de Adobe, que sigue recibiendo versiones. Conviene cuando necesitas funciones PWA reales o compartir interfaz con una app móvil en React.
- Headless a la medida: Next.js, Alokai (antes Vue Storefront) u otro framework sobre GraphQL, cuando el proyecto necesita una experiencia que ninguna opción estándar resuelve y hay equipo para mantenerla.
Hyvä
Hyvä: el reemplazo moderno de Luma
Hyvä reemplaza el frontend de Luma con Tailwind CSS y Alpine.js, sin jQuery, Knockout.js ni RequireJS. Carga una fracción del JavaScript que usa Luma, lo que facilita llegar a buenos Core Web Vitals, y los módulos de backend siguen funcionando igual.
Desde el 10 de noviembre de 2025 el tema Hyvä es gratuito y de código abierto, bajo licencias OSL 3.0 y AFL 3.0, según el anuncio oficial de Hyvä. Siguen siendo de pago Hyvä Checkout, Hyvä Enterprise y Hyvä Commerce. Ya llevamos varias tiendas implementadas con este stack en México y LATAM.
- Tailwind CSS para estilos y Alpine.js para interactividad
- Objetivo en fichas de producto: LCP menor a 1.5 s
- Objetivo de Lighthouse: 95 o más
- Revisión de compatibilidad de tus módulos de Luma antes de migrar
Edge Delivery Services
El storefront de Adobe sobre Edge Delivery Services
El storefront de Adobe Commerce combina Edge Delivery Services, componentes listos (drop-ins) para carrito, checkout y cuenta, y bloques de contenido editables. Es la apuesta de Adobe para storefronts muy rápidos, con el contenido servido desde el edge.
Requisitos, según la documentación de Adobe: viene incluido con Adobe Commerce as a Cloud Service, funciona con Adobe Commerce Optimizer y, en PaaS, pide Adobe Commerce 2.4.8 o superior con el Storefront Compatibility Package, Services Connector y Catalog Service. No es compatible con Magento Open Source. Para migrar por partes, Luma Bridge permite que las páginas de Luma y las del nuevo storefront compartan carrito y sesión.
- Revisamos si tu versión y tus servicios de Adobe Commerce cumplen los requisitos
- Diseñamos el storefront con drop-ins y bloques de contenido
- Planeamos la convivencia con Luma durante la migración
UX/UI
UX/UI que convierte
Un diseño bonito sin datos de conversión es arte, no diseño. Nuestro proceso de UX incluye investigación con usuarios reales, wireframes, prototipos navegables, pruebas de usabilidad moderadas y mapas de calor después del lanzamiento.
- Investigación con usuarios mediante entrevistas
- Wireframes y prototipos en Figma
- Pruebas de usabilidad con 5 a 8 usuarios
- Mapas de calor después del lanzamiento
- Pruebas A/B de variantes
- Iteraciones basadas en datos
Performance
Performance medible (Core Web Vitals)
Los Core Web Vitals forman parte de las señales de experiencia de página que Google toma en cuenta, y una tienda lenta pierde ventas. Nuestros builds apuntan a LCP menor a 2 s, CLS menor a 0.1 e INP menor a 200 ms, con monitoreo continuo de usuarios reales.
- LCP menor a 2 s (objetivo: 1.5 s)
- CLS menor a 0.1, sin saltos de contenido
- INP menor a 200 ms
- Imágenes con carga diferida en WebP o AVIF
- CSS crítico en línea
- Monitoreo de usuarios reales con web-vitals.js
Headless
Headless a la medida y PWA Studio
Además de Hyvä y Edge Delivery Services, construimos frontends headless a la medida cuando el proyecto lo justifica, y damos soporte a tiendas en PWA Studio, que sigue recibiendo versiones de Adobe.
- Next.js sobre GraphQL de Adobe Commerce
- Alokai (antes Vue Storefront)
- PWA Studio de Adobe
- Nuxt para proyectos que priorizan SEO
- React a la medida con render del lado del servidor
Accesibilidad
Accesibilidad (WCAG 2.1 AA)
La accesibilidad no es opcional: es requisito legal en varios países y es lo correcto. Todos nuestros frontends cumplen WCAG 2.1 nivel AA: contraste, navegación por teclado, lectores de pantalla y etiquetas ARIA.
- Contraste AA en todos los textos
- Navegación completa por teclado
- Compatible con lectores de pantalla (VoiceOver, NVDA)
- Etiquetas ARIA en componentes interactivos
- Foco visible y orden lógico
- Auditoría con axe-core en CI
Preguntas frecuentes
¿Hyvä es gratis?
¿Hyvä funciona con los módulos de Luma que ya tengo?
¿Hyvä o Edge Delivery Services?
¿Puedo migrar el frontend por partes?
Servicios relacionados
Adobe Commerce PWA Studio
PWA Studio, el framework React + GraphQL de Adobe para storefronts headless de Adobe Commerce: implementación, soporte, upgrades y migración a Hyvä o Edge Delivery Services.
Ver más →Diseño de tiendas en línea
Diseño y desarrollo de tiendas en línea a la medida: UX de conversión, mobile-first, performance y branding sobre Adobe Commerce (antes Magento), para escalar sin rediseñar.
Ver más →Conversion Rate Optimization (CRO)
Optimización de conversión de eCommerce: research, hypothesis-driven testing, personalización, UX de checkout, reducción de abandono de carrito. Metodología probada.
Ver más →Composable Commerce
Arquitectura composable / MACH sobre Adobe Commerce: API-first, headless, best-of-breed. Implementación con PWA Studio, frontend desacoplado y microservicios.
Ver más →¿Quieres discutir tu proyecto?
Evaluamos tu caso sin costo y te proponemos una ruta concreta.
Cuéntanos de tu proyecto
Ningún campo es obligatorio. Con que nos dejes cómo contactarte es suficiente.
¿Prefieres hablar ahora?
Lunes a viernes, de 7:00 a 21:00 h, hora de Ciudad de México.