Temas para PrestaShop 9: Hummingbird, child themes y compatibilidad
El tema de una tienda PrestaShop no es solo diseño. También afecta a plantillas, estructura HTML, CSS, JavaScript, responsive, módulos, hooks, accesibilidad y mantenimiento futuro del front office.
Qué cambia en los temas de PrestaShop 9
Una tienda que procede de PrestaShop 8, PrestaShop 1.7 o de un tema desarrollado hace varios años puede utilizar tecnologías y convenciones distintas a las actuales.
Entre los puntos que conviene revisar están Bootstrap, plantillas, clases CSS, JavaScript, jQuery, módulos asociados al tema, overrides, hooks, comportamiento responsive y accesibilidad.
El objetivo no debería ser únicamente conseguir que el tema cargue sobre PrestaShop 9, sino comprobar que sigue funcionando correctamente en las áreas reales utilizadas por la tienda.
Esta guía forma parte de nuestra guía técnica sobre PrestaShop 9.
Hummingbird en PrestaShop 9
Hummingbird representa la base moderna de referencia para el front office de PrestaShop 9. No debe entenderse únicamente como un cambio visual.
Hummingbird como tema predeterminado
Hummingbird proporciona una arquitectura actual sobre la que desarrollar nuevas tiendas y personalizaciones de front office.
Su estructura está pensada para facilitar mantenimiento, modularidad, accesibilidad y evolución futura del proyecto.
Bootstrap 5.3
Hummingbird utiliza Bootstrap 5.3.
Este cambio es importante cuando una tienda procede de un tema o módulos desarrollados alrededor de Bootstrap 4.
Hay que revisar clases, atributos, componentes JavaScript y cualquier dependencia relacionada con el comportamiento anterior de Bootstrap.
BEM y arquitectura CSS
La estructura CSS utiliza convenciones orientadas a componentes, evitando depender en exceso de selectores globales.
Cuando se añade una personalización conviene respetar esa arquitectura para no crear reglas difíciles de mantener o que afecten a elementos no relacionados.
JavaScript sin jQuery
El código propio del tema utiliza JavaScript moderno y no necesita jQuery como dependencia estructural.
Esto no impide que determinados módulos puedan utilizarlo, pero un nuevo desarrollo debería evitar introducir dependencias innecesarias.
Accesibilidad
La accesibilidad debe formar parte del desarrollo del tema desde el principio.
Conviene comprobar HTML semántico, navegación mediante teclado, foco visible, formularios, botones, mensajes de error, modales, offcanvas y atributos ARIA cuando sean realmente necesarios.
Qué ocurre con Classic
Classic continúa siendo importante porque muchas tiendas, módulos y temas existentes fueron desarrollados alrededor de su arquitectura.
Compatibilidad hacia atrás
Una tienda existente puede tener motivos válidos para conservar un tema basado en Classic si continúa siendo mantenible y compatible con la versión objetivo.
Por qué no utilizarlo como base nueva
Para proyectos nuevos conviene valorar una base más actual.
Mantener una arquitectura antigua únicamente por costumbre puede introducir deuda técnica desde el inicio de un nuevo proyecto.
¿Es compatible un tema de PrestaShop 8 con PrestaShop 9?
No existe una respuesta universal.
Un tema puede necesitar pocos cambios o una adaptación profunda dependiendo de su arquitectura, antigüedad y personalizaciones.
Plantillas Smarty
Hay que identificar qué plantillas están sobrescritas y comprobar si esas versiones siguen siendo compatibles con la estructura actual.
Copiar plantillas completas durante años puede impedir que mejoras del tema padre lleguen correctamente al proyecto.
Overrides
Cada override debería tener una función conocida.
Conviene comprobar qué archivo sustituye, por qué se creó, si sigue siendo necesario y si la plantilla o componente original ha cambiado.
JavaScript
Los temas antiguos pueden depender ampliamente de jQuery, plugins históricos o selectores que han dejado de existir.
Deben revisarse eventos, plugins externos y comportamiento de componentes interactivos.
Bootstrap 4 frente a Bootstrap 5
Bootstrap 5 introdujo cambios en clases, atributos y JavaScript.
Un módulo o componente visual desarrollado alrededor de Bootstrap 4 puede requerir adaptación aunque el módulo sea compatible con el core.
Módulos ligados al tema
Algunos temas dependen de módulos específicos para menús, sliders, bloques comerciales, filtros u otros componentes.
La compatibilidad del tema debe estudiarse junto con la compatibilidad de esos módulos.
Crear un tema nuevo para PrestaShop 9
La arquitectura del tema debería elegirse según la profundidad real del proyecto.
Partir de Hummingbird
Para muchos proyectos es una base razonable porque ya proporciona componentes, responsive, Bootstrap 5.3 y una arquitectura actual.
A partir de ahí puede adaptarse la identidad visual y la experiencia a las necesidades de la tienda.
Crear desde cero
Un tema completamente propio ofrece control total, pero también implica asumir más trabajo sobre componentes, responsive, accesibilidad, integración con módulos y mantenimiento.
Cuándo elegir cada opción
Una personalización ligera no necesita convertirse en un tema completamente independiente.
Del mismo modo, un diseño que modifica casi todo el markup no debería forzarse dentro de un child theme lleno de sobrescrituras.
Child themes en PrestaShop 9
Un child theme permite heredar una base existente y modificar únicamente los elementos que realmente necesita el proyecto.
Qué heredan
El child aprovecha la estructura del tema padre y puede añadir estilos, JavaScript, plantillas y overrides específicos.
Cuándo utilizar un child
Es especialmente adecuado para ajustes relativamente contenidos: estilos, componentes concretos, pequeños cambios de layout o modificaciones específicas de plantilla.
Qué no conviene meter en un child
Cuando hay que reescribir gran parte del markup, copiar numerosas plantillas completas o sustituir prácticamente toda la arquitectura del padre, el child empieza a perder su ventaja.
En ese escenario puede resultar más mantenible partir de una base propia sobre Hummingbird.
Migrar un tema antiguo a Hummingbird
Migrar un tema no consiste en copiar archivos antiguos dentro de una nueva carpeta.
Conviene separar la identidad visual de la implementación técnica.
Mantener el diseño
Tipografía, jerarquía visual, imágenes, composición y elementos de marca pueden conservarse aunque la implementación interna cambie.
Reconstruir plantillas
Las plantillas deberían compararse con la arquitectura actual y sobrescribir únicamente aquello que realmente necesita personalización.
Revisar módulos
Los módulos que generan contenido en el front office deben comprobarse dentro del nuevo tema.
Especial atención merecen menús, buscadores, filtros, carrito, checkout, sliders, banners y módulos comerciales.
Revisar JavaScript
Hay que comprobar scripts antiguos, dependencias de jQuery, selectores, plugins y componentes Bootstrap.
Comprobar responsive y accesibilidad
El resultado debe validarse en escritorio, móvil y tablet, pero también mediante teclado, formularios, foco, menús, offcanvas y componentes interactivos.
Compatibilidad de módulos con Hummingbird
Un módulo puede ser compatible con el core de PrestaShop 9 y producir problemas visuales dentro de Hummingbird.
Esto ocurre especialmente cuando su front office fue desarrollado alrededor de Bootstrap 4, jQuery o estructuras específicas de temas anteriores.
Por eso conviene separar dos comprobaciones:
- compatibilidad del módulo con PrestaShop 9;
- compatibilidad de su salida visual y JavaScript con el tema utilizado.
Puedes ampliar este punto en nuestra guía sobre módulos compatibles con PrestaShop 9 .
Rendimiento del tema
Utilizar un tema moderno no garantiza automáticamente una tienda rápida.
El rendimiento depende también de CSS, JavaScript, fuentes, imágenes, módulos, servicios externos, sliders, caché y servidor.
Un child theme debería evitar cargar recursos globales cuando únicamente son necesarios en determinadas páginas.
También conviene comprobar que las personalizaciones no duplican funcionalidades que ya ofrece el tema padre.
Cuando existen problemas de velocidad puede ser necesaria una optimización técnica de PrestaShop .
SEO y Schema al cambiar de tema
Un cambio de tema puede modificar elementos SEO aunque las URLs sigan siendo las mismas.
Hay que revisar:
- H1, H2 y H3;
- title y meta description;
- canonical;
- robots;
- breadcrumbs;
- enlaces internos;
- HTML semántico;
- imágenes y ALT;
- datos estructurados.
Especial atención merece Schema. Un tema puede generar JSON-LD automáticamente y duplicarlo con módulos SEO o con una implementación propia.
Después de cambiar de tema debe comprobarse el HTML final y no únicamente la configuración del Back Office.
Para proyectos donde el posicionamiento forma parte del negocio también trabajamos SEO técnico para PrestaShop .
Cómo probar un tema antes de producción
La validación debería realizarse primero en staging.
Conviene comprobar al menos:
- HOME;
- categorías;
- productos;
- buscador;
- filtros;
- carrito;
- checkout;
- cuenta de cliente;
- formularios;
- CMS;
- contacto;
- 404;
- responsive.
También deben revisarse consola JavaScript, errores PHP, recursos que devuelvan 404, CSS innecesario y accesibilidad básica.
Hummingbird Child en un proyecto real
JUSARA LAB utiliza actualmente una arquitectura basada en PrestaShop 9 y Hummingbird Child.
Las personalizaciones se mantienen separadas del tema padre y se utilizan overrides únicamente cuando existe una necesidad concreta.
Este enfoque permite modificar elementos como breadcrumbs, estructura de headings, componentes del header, estilos propios y recursos específicos sin modificar directamente Hummingbird.
El objetivo no es evitar cualquier override, sino que cada override tenga una función conocida y pueda mantenerse cuando evoluciona el tema padre.
Temas dentro de una actualización o migración a PrestaShop 9
El tema debe evaluarse dentro del proceso completo de evolución de la tienda.
Si la tienda está actualmente sobre PrestaShop 8: cómo actualizar PrestaShop 8 a PrestaShop 9 .
Si procede de una versión antigua: cómo migrar PrestaShop 1.7 a PrestaShop 9 .
Si existen dudas sobre extensiones del front office: cómo comprobar módulos compatibles con PrestaShop 9 .
Desarrollo profesional de temas PrestaShop 9
La elección entre Hummingbird, un child theme o una arquitectura personalizada depende de la profundidad del proyecto y de cómo deberá mantenerse en el futuro.
Antes de desarrollar conviene analizar diseño, módulos, código heredado, rendimiento y necesidades reales de la tienda.