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
| Característica | #M22¤ (PS8) | #M15¤ (PS9) |
|---|---|---|
| CSS Framework | #M17# | #M16# |
| JavaScript | Plain JS | #M20# |
| Formatos de imagen | JPG/PNG | #M30#, AVIF, JPG, PNG |
| CSS Methodology | Mezcla | BEM |
| #M25# Cargando | Sincrónico | Diferido (sinc) |
¿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
- Copiar la carpeta temática #M15¤: #P0¤ → #P1#
- Editar
/themes/mytheme/config/theme.ymly cambiar el nombre y la referencia de los padres - Sólo guarde los archivos que desea anular en el tema de su hijo - todos los demás caerán de nuevo al padre
- 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
| métrica | #M22¤ Tema (PS8) | #M15¤ (PS9) |
|---|---|---|
| Resultado móvil | ~55–65 | ~75–85 |
| Pintura de mayor contenido (LCP) | ~3.5s | ~2.2s |
| Tiempo total de bloqueo (TBT) | ~450ms | ~180ms |
| CSS Bundle Size | ~180KB | ~120KB (BEM optimizado) |
| JavaScript (carga inicial) | ~280KB | ~200KB (diferido) |
| #M30# Soporte | Manual únicamente | Automatización nativa |
#
Cambiar de #M22¤ a #M15#
- Ve a tu oficina de atrás
- Instalar el tema Hummingbird (descarga desde los complementos oficiales PrestaShop si no preinstalados)
- #P0¤ junto a #M15#
- Borrar todos los caches: Back Office → Parámetros avanzados → Performance → Clear cache
- 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.