Tema Hummingbird PrestaShop 9: Bootstrap 5, TypeScript y Frontend Moderno

El tema Hummingbird es el nuevo tema por defecto de PrestaShop 9, sustituyendo al tema Classic. Construido con Bootstrap 5 y TypeScript, ofrece una experiencia de compra mas rapida con soporte nativo WebP/AVIF y un checkout mejorado.

¿Cuál es el tema?

#M15¤ es el tema oficial por defecto enviado con #M19¤ 9. Representa una reconstrucción de vanguardia completa utilizando tecnologías web modernas.

Características técnicas clave

• #P0¤ — actualizado de #M17¤ utilizado en el tema #M22¤. Mejor rejilla, utilidades de flexbox y componentes.
• #P0¤ - reemplaza el JavaScript plano para una mejor seguridad y mantenimiento
• #P0¤ — estructura CSS más limpia, más fácil de anular y personalizar
• #P0¤ — formatos de imagen modernos servidos automáticamente para cargas de página más rápidas
• #P0¤ — #M25¤ cargas asincrónicamente, mejorando #M9¤ puntuaciones

Mejoras de la ejecución

#M15¤ El tema marca mucho mejor en Google #M5¤ en comparación con el tema #M22¤:

• menor tamaño del paquete CSS debido a las optimizaciones BEM y Bootstrap 5
• Tiempo de bloqueo de JavaScript reducido
• Más Grande Pintura Contentful (LCP) a través de imágenes #M30¤

Flujo de checkout mejorado

El proceso de checkout ha sido rediseñado en Hummingbird con una interfaz de usuario más limpia paso a paso, menos distracciones y mejor capacidad de respuesta móvil, todo apuntado a reducir el abandono del carrito.

#M15# vs ¤M22# Theme

¿Puedo usar #M22¤ Tema en #M19¤ 9?

Sí. El tema Classic todavía funciona en PrestaShop 9, pero no se beneficia de las nuevas optimizaciones de rendimiento WebP/AVIF o Hummingbird. Si usted tiene un tema personalizado basado en Classic, por lo general seguirá trabajando con ajustes menores.

Recursos relacionados

Lee nuestro #P0¤ o compara #P1¤.

Cómo personalizar el tema #M15¤

Se desalienta la modificación directa de los archivos temáticos Hummingbird — las actualizaciones sobrescriben sus cambios. El enfoque recomendado es crear un tema del niño.

Crear un tema infantil

1. Copiar la carpeta temática #M15¤: #P0¤ → #P1#
2. Editar /themes/mytheme/config/theme.yml y cambiar el nombre y la referencia de los padres
3. Sólo guarde los archivos que desea anular en el tema de su hijo - todos los demás caerán de nuevo al padre
4. Override CSS agregando tus estilos a #P0¤

CSS Variables Override

Hummingbird utiliza propiedades personalizadas CSS (variables) para colores y espaciamiento, facilitando la personalización:

/* In your custom.css */
:root {
  --color-primary: #e63946;        /* Change brand color */
  --color-secondary: #457b9d;
  --font-family-base: "Inter", sans-serif;
  --border-radius-base: 8px;
}

PageSpeed Comparation: Hummingbird vs Classic Tema

#

Cambiar de #M22¤ a #M15#

1. Ve a tu oficina de atrás
2. Instalar el tema Hummingbird (descarga desde los complementos oficiales PrestaShop si no preinstalados)
3. #P0¤ junto a #M15#
4. Borrar todos los caches: Back Office → Parámetros avanzados → Performance → Clear cache
5. Pruebe su tienda a fondo — páginas de productos, checkout, vista móvil

#P0¤ Si tienes un tema infantil personalizado basado en #M22¤, cambiar a #M15¤ mostrará el nuevo diseño predeterminado. Necesitarás reconstruir tus personalizaciones como un tema infantil #M15¤.

#M15¤ para desarrolladores — BEM Class Structure

BEM (Block, Element, Modifier) es una convención de nombres CSS que hace que las hojas de estilo sean más predecibles y más fáciles de anular:

/* BEM examples in Hummingbird */
.product-miniature { }                    /* Block */
.product-miniature__title { }             /* Element */
.product-miniature__title--on-sale { }    /* Modifier */

/* Override example */
.product-miniature__price {
  color: var(--color-primary);
  font-weight: 700;
}

Preguntas frecuentes

¿Sigue disponible el tema #M22¤ en 9?

Sí. #M22¤ El tema continúa trabajando en PS9. #M15¤ es el nuevo defecto, pero no te obligan a cambiar. Sin embargo, te perderás el apoyo #M30¤/#M31¤, Bootstrap 5, y el mejor checkout que viene con #M15¤.

¿Puedo usar los componentes de #M17¤ con #M15¤?

#M15¤ utiliza #M16¤, que tiene cambios de ruptura vs Bootstrap 4 (en particular, jQuery ya no es necesario y algunos nombres de clase cambiaron). Los componentes Bootstrap 4 necesitarán generalmente actualizaciones para trabajar con Hummingbird.

¿Funciona con todos los módulos?

La mayoría de los módulos de la oficina delantera trabajan con Classic y Hummingbird. Sin embargo, los módulos que inyectan clases temáticas específicas de CSS Classic pueden necesitar actualizaciones. Revise nuestro Guía de compatibilidad del módulo PS9 para detalles.

¿Cómo se manejan las imágenes?

#M19¤ 9 con #M15¤ genera automáticamente versiones #M30¤ y #M31¤ de tus imágenes de producto. El tema sirve el mejor formato soportado por el navegador de visitantes — los navegadores modernos obtienen #M30¤/AVIF, los navegadores más antiguos obtienen retroceso JPEG/PNG. No se necesita configuración.