Hummingbird vs Classic: ¿Qué tema de PrestaShop deberías usar?

Dos temas oficiales, dos filosofías diferentes

PrestaShop incluye dos temas oficiales: Classic y Hummingbird. Classic ha sido el tema predeterminado desde que PrestaShop 1.7 se lanzó en 2016. Hummingbird llegó con PrestaShop 8.x como una alternativa moderna diseñada para el rendimiento y la preparación hacia el futuro. Elegir entre ellos no es simplemente cuestión de cuál se ve mejor. Los dos temas representan enfoques fundamentalmente diferentes de la arquitectura front-end, y tu elección afecta al rendimiento, la compatibilidad con módulos, el esfuerzo de personalización y la mantenibilidad a largo plazo.

Este artículo ofrece una comparación exhaustiva basada en la arquitectura, datos reales de rendimiento, consideraciones prácticas y las situaciones específicas en las que cada tema tiene sentido. Ya sea que estés iniciando una nueva tienda o considerando una migración, esto te ayudará a tomar una decisión informada.

Arquitectura: Qué cambió y por qué

Classic fue construido sobre Bootstrap 4, jQuery y plantillas Smarty. Sigue un enfoque tradicional de renderizado en el servidor donde el servidor genera páginas HTML completas y las envía al navegador. JavaScript se usa principalmente para elementos interactivos como el carrito, la página de producto y el checkout. El CSS se compila desde archivos Sass y se entrega como una sola hoja de estilos grande.

Hummingbird fue construido como una reimaginación desde cero. Usa Bootstrap 5, abandona jQuery en favor de JavaScript vanilla e introduce una arquitectura basada en componentes. El CSS es más modular, el JavaScript es más ligero y el peso total de los recursos es significativamente menor.

La eliminación de jQuery es el cambio arquitectónico más trascendental. jQuery añadía aproximadamente 87KB (30KB comprimidos con gzip) a cada carga de página y fomentaba un estilo de codificación donde los módulos manipulaban libremente el DOM sin coordinación. Hummingbird reemplaza jQuery con APIs modernas del navegador como fetch, querySelector, classList y delegación de eventos. Esto significa que el tema en sí es más rápido, pero los módulos que dependen de jQuery necesitan actualizaciones.

Bootstrap 5 trae sus propios cambios. Elimina jQuery como dependencia (alineándose con el enfoque de Hummingbird), usa propiedades CSS personalizadas (variables) para una tematización más fácil, mejora el sistema de rejilla con mejores utilidades responsive y actualiza los patrones de marcado de componentes. Pasar de Bootstrap 4 a 5 afecta cualquier CSS personalizado o sobreescrituras de plantillas que referencien clases específicas de Bootstrap.

Comparación de rendimiento: Números reales

El rendimiento es la razón principal por la que PrestaShop creó Hummingbird, y los números respaldan la decisión. Probar ambos temas en una instalación idéntica de PrestaShop 8.1 con los mismos productos, módulos y configuración de servidor revela diferencias significativas.

En una página de producto típica medida con Lighthouse en una conexión móvil simulada, Classic obtiene puntuaciones en el rango de 45-55 para Rendimiento, mientras que Hummingbird obtiene entre 65-75. Las métricas específicas cuentan una historia más clara.

First Contentful Paint (FCP) mejora aproximadamente entre 0,5 y 1,0 segundos con Hummingbird. Esto se debe principalmente al menor peso del CSS y a la ausencia de jQuery bloqueando el renderizado. Largest Contentful Paint (LCP) mejora en un margen similar porque la ruta crítica de renderizado es más corta.

Total Blocking Time (TBT) experimenta la mejora más dramática. El JavaScript basado en jQuery de Classic crea un bloqueo significativo del hilo principal mientras el navegador analiza y ejecuta la biblioteca más todos los scripts de módulos dependientes de jQuery. El enfoque de JavaScript vanilla de Hummingbird reduce el TBT entre un 40 y un 60% en configuraciones típicas.

Cumulative Layout Shift (CLS) es aproximadamente equivalente entre ambos temas cuando están correctamente configurados, ya que la estabilidad del diseño depende más de las dimensiones de las imágenes y la implementación de la carga diferida que de la elección del framework.

El tamaño total de transferencia cuenta otra parte de la historia. Una instalación predeterminada de Classic transfiere aproximadamente entre 350 y 450KB de CSS y JavaScript en la primera carga de página. Hummingbird reduce esto a 200-300KB. La diferencia se acumula a lo largo de toda la sesión de navegación mientras los visitantes navegan por tu tienda.

Estos números asumen una instalación limpia. En la práctica, los módulos de terceros a menudo añaden su propio CSS y JavaScript, lo que puede reducir o ampliar la brecha dependiendo de qué tan bien estén optimizados esos módulos para cada tema.

Compatibilidad de módulos: El gran inconveniente

Aquí es donde las ventajas de Hummingbird vienen con una advertencia significativa. Muchos módulos de PrestaShop fueron construidos pensando en la arquitectura de Classic. Dependen de jQuery, usan patrones de marcado de Bootstrap 4 y asumen estructuras de plantilla específicas que Classic proporciona.

Cuando instalas estos módulos en Hummingbird, varias cosas pueden romperse. La funcionalidad JavaScript que depende de jQuery fallará silenciosamente o lanzará errores. Los diálogos modales, menús desplegables y otros componentes de Bootstrap 4 pueden no renderizarse correctamente con el marcado y nombres de clases modificados de Bootstrap 5. Las sobreescrituras de plantillas que asumen la estructura de plantilla de Classic no funcionarán con las plantillas reorganizadas de Hummingbird.

La gravedad de este problema depende de tu conjunto de módulos. Los módulos principales de PrestaShop son compatibles con ambos temas. Los módulos de terceros bien mantenidos de desarrolladores activos normalmente soportan Hummingbird. Sin embargo, los módulos más antiguos, los módulos de nicho o los módulos de desarrolladores que han dejado de actualizar sus productos pueden funcionar solo con Classic.

Antes de elegir Hummingbird, debes probar cada módulo que planees usar. Instálalos en un entorno de staging con Hummingbird activo y prueba exhaustivamente cada funcionalidad. Presta especial atención a la funcionalidad dependiente de JavaScript como carritos AJAX, campos de personalización de productos, vistas rápidas y pasos del checkout.

Algunos desarrolladores de módulos incluyen archivos de plantilla separados para Classic y Hummingbird. Cuando ves directorios como views/templates/hook/classic/ y views/templates/hook/hummingbird/ en un módulo, ese módulo soporta explícitamente ambos temas. Este es el estándar de oro para la compatibilidad.

Smarty vs Twig: Consideraciones de futuro

PrestaShop ha anunciado su intención de hacer la transición de Smarty a Twig como motor de plantillas para el front office. Esta transición se ha discutido durante años y está parcialmente implementada en el back office. Hummingbird está diseñado teniendo en cuenta esta transición, aunque a partir de PrestaShop 8.x y 9.x, ambos temas todavía usan Smarty para las plantillas del front office.

La relevancia para tu elección de tema es indirecta pero importante. La estructura de plantillas de Hummingbird está organizada de manera que hará la eventual migración de Smarty a Twig más fluida. Si construyes personalizaciones extensas sobre la estructura de plantillas de Classic, podrías enfrentar un esfuerzo de migración mayor cuando (no si) PrestaShop complete la transición a Twig.

Dicho esto, esta transición ha estado "llegando pronto" durante varios años. Tomar una decisión hoy basándose únicamente en un futuro cambio de motor de plantillas es prematuro. Elige basándote en necesidades actuales y concretas y acepta que cierto esfuerzo de migración será necesario independientemente del tema que elijas cuando la transición a Twig suceda.

Enfoque de personalización

Personalizar Classic está bien documentado y es ampliamente conocido. Existen cientos de tutoriales, miles de publicaciones en foros y años de conocimiento comunitario sobre cómo modificar Classic. El tema usa Sass directo para los estilos, jQuery tradicional para la interactividad y plantillas Smarty que son fáciles de leer y modificar.

Personalizar Hummingbird requiere habilidades actualizadas. Necesitas sentirte cómodo con CSS moderno (propiedades personalizadas, selectores modernos, container queries), JavaScript vanilla (sin la muleta de jQuery) y el enfoque utility-first de Bootstrap 5. La curva de aprendizaje es más pronunciada si tu equipo está acostumbrado al desarrollo basado en jQuery.

Sin embargo, las propiedades CSS personalizadas de Hummingbird hacen que ciertos tipos de personalización sean mucho más fáciles de lo que eran con Classic. ¿Quieres cambiar el color primario en todo el tema? Modifica una sola propiedad CSS personalizada. Con Classic, necesitabas rastrear cada variable Sass, recompilar y lidiar con conflictos de especificidad.

Hummingbird también usa una estructura HTML más semántica, lo que facilita apuntar a elementos con selectores CSS y mejora la accesibilidad. Los archivos de plantilla están mejor organizados con una separación de responsabilidades más clara.

Soporte de temas hijo

Ambos temas soportan temas hijo, que es la forma recomendada de personalizar un tema de PrestaShop sin modificar directamente los archivos del tema padre. Los temas hijo te permiten sobreescribir plantillas específicas, añadir CSS y JavaScript personalizados, y mantener tus personalizaciones a lo largo de las actualizaciones del tema.

El mecanismo de tema hijo de Classic es maduro y está bien probado. Creas un directorio de tema hijo, defines un theme.yml que referencia a Classic como padre y sobreescribes selectivamente los archivos que necesitas cambiar. Este flujo de trabajo ha sido estable desde PrestaShop 1.7.

El soporte de temas hijo de Hummingbird funciona de la misma manera a nivel de framework pero tiene algunas diferencias prácticas. Debido a que las plantillas de Hummingbird están estructuradas de forma diferente, las sobreescrituras de un tema hijo basado en Classic no pueden reutilizarse. Necesitas crear nuevas sobreescrituras basadas en la estructura de plantillas de Hummingbird.

PrestaShop 8.x mejoró el manejo de temas hijo en general, facilitando la sobreescritura de recursos (CSS y JavaScript) y plantillas parciales. Estas mejoras benefician por igual a los temas hijo tanto de Classic como de Hummingbird.

Si estás encargando un tema personalizado a un desarrollador, comenzar con Hummingbird como padre es la mejor opción a largo plazo. La arquitectura más limpia significa menos deuda técnica, y el enfoque moderno de CSS significa que se necesitan menos sobreescrituras para las personalizaciones comunes.

Ruta de migración: De Classic a Hummingbird

Si actualmente estás usando Classic y considerando un cambio a Hummingbird, esto es lo que la migración realmente implica.

Las sobreescrituras de plantillas necesitan reconstruirse desde cero. No puedes simplemente copiar tus sobreescrituras de Classic a un tema hijo de Hummingbird. La estructura de archivos de plantilla, los nombres de variables y los nombres de bloques son diferentes. Necesitas examinar cada sobreescritura, entender qué logra y recrearla usando la estructura de plantillas de Hummingbird.

El CSS personalizado necesita revisión y probablemente una revisión significativa. Si tu CSS apunta a clases de Bootstrap 4, esos nombres de clase pueden haber cambiado en Bootstrap 5. Si tu CSS usa patrones dependientes de jQuery (como estilizar elementos basándose en clases añadidas por jQuery), estos se romperán. Si tu CSS usa nombres de clase específicos del tema Classic, estos pueden no existir en Hummingbird.

El JavaScript personalizado necesita reescribirse. Cualquier código jQuery debe convertirse a JavaScript vanilla. Esta es a menudo la parte más laboriosa de la migración porque el código jQuery tiende a estar profundamente entrelazado con patrones de manipulación del DOM que necesitan ser repensados.

La compatibilidad de módulos necesita verificarse para cada módulo instalado. Como se discutió anteriormente, los módulos que dependen de jQuery o Bootstrap 4 pueden necesitar actualizaciones o reemplazos.

Un cronograma realista para migrar una tienda Classic moderadamente personalizada a Hummingbird es de 40 a 80 horas de trabajo de desarrollador. Este no es un proyecto de fin de semana. Planifícalo como un esfuerzo de desarrollo formal con un entorno de staging, pruebas exhaustivas y un plan de reversión.

Cuándo elegir Classic

Elige Classic cuando tu tienda depende de módulos de terceros más antiguos que no han sido actualizados para compatibilidad con Hummingbird. Elígelo cuando tu equipo de desarrollo se sienta más cómodo con jQuery y Bootstrap 4 y no tengas presupuesto para capacitación o contratación. Elígelo cuando estés construyendo con un plazo ajustado y necesites la selección más amplia posible de temas y módulos compatibles del marketplace de PrestaShop.

Classic también es la opción más segura para tiendas que ejecutan PrestaShop 1.7.x o versiones tempranas de 8.0.x. Hummingbird fue introducido más tarde en el ciclo 8.x y puede no estar completamente disponible o estable en versiones más antiguas de PrestaShop.

Si tu tienda ya está funcionando con Classic con personalizaciones extensas y rindiendo adecuadamente, puede que no haya una razón convincente para migrar. Las ganancias de rendimiento de Hummingbird son reales pero pueden no justificar el esfuerzo de migración si tu tienda ya carga rápidamente y convierte bien.

Cuándo elegir Hummingbird

Elige Hummingbird cuando estés iniciando una nueva tienda PrestaShop 8.x o 9.x desde cero. Las ventajas de rendimiento son gratuitas cuando no tienes personalizaciones heredadas que migrar. Elígelo cuando el rendimiento sea una prioridad máxima para tu negocio, particularmente si tu audiencia es principalmente de usuarios móviles en conexiones lentas donde cada kilobyte importa.

Elige Hummingbird cuando quieras preparar tu tienda para el futuro. A medida que PrestaShop continúa evolucionando hacia prácticas modernas de front-end, Hummingbird recibirá la mayor atención de desarrollo y será el primero en beneficiarse de las nuevas funcionalidades.

Elígelo cuando tengas desarrolladores cómodos con JavaScript y CSS modernos. La arquitectura de Hummingbird es más limpia y más mantenible para equipos con habilidades actuales de front-end.

Y elígelo cuando te importe la accesibilidad. El HTML semántico, los atributos ARIA y el soporte de navegación por teclado de Hummingbird son notablemente mejores que los de Classic. Si tu tienda necesita cumplir los estándares de accesibilidad WCAG, Hummingbird te da un mejor punto de partida.

La cuestión de los temas de terceros

Muchos propietarios de tiendas se saltan ambos temas oficiales por completo y compran un tema de terceros del marketplace PrestaShop Addons o de vendedores independientes. Estos temas están casi siempre basados en la arquitectura de Classic porque Classic ha estado disponible durante mucho más tiempo y representa la base instalada más grande.

Si estás usando un tema de terceros, la cuestión Classic vs Hummingbird es en gran medida académica para tu tienda actual. El desarrollador de tu tema tomó las decisiones arquitectónicas por ti. Sin embargo, al evaluar nuevos temas de terceros, verifica si están construidos sobre las bases de Classic o Hummingbird. Los temas construidos sobre Hummingbird rendirán mejor y mantendrán la compatibilidad por más tiempo.

Ten cuidado con los temas de terceros que afirman estar "basados en Hummingbird" pero en realidad solo toman prestado su estilo visual mientras mantienen la arquitectura dependiente de jQuery de Classic por debajo. Verifica las dependencias de JavaScript del tema y el framework CSS para confirmarlo.

Veredicto: No hay respuesta incorrecta, pero hay una mejor

Para nuevas tiendas en PrestaShop 8.x o posterior, Hummingbird es la recomendación clara. Es más rápido, más moderno, está mejor mantenido y está más preparado para el futuro. La preocupación por la compatibilidad de módulos está disminuyendo a medida que el ecosistema se pone al día, y comenzar desde cero significa que no tienes costes de migración heredados.

Para tiendas existentes que ejecutan Classic con personalizaciones significativas, la decisión requiere un análisis de coste-beneficio. Calcula el esfuerzo de migración honestamente, mide tu rendimiento actual para entender la ganancia potencial, y decide si la mejora justifica la inversión. A veces la respuesta es sí, a veces no, y a veces la respuesta correcta es esperar a tu próximo rediseño importante para hacer el cambio.

Independientemente del tema que elijas, los principios de buen rendimiento front-end se aplican por igual: minimiza el tamaño de los recursos, carga diferida del contenido debajo del pliegue, optimiza las imágenes y audita regularmente la velocidad de tu página. Una tienda Classic bien optimizada superará a una tienda Hummingbird mal configurada en todo momento. El tema proporciona los cimientos, pero la ejecución determina el resultado.