Theme Hummingbird PrestaShop 9 : Bootstrap 5, TypeScript et Frontend Moderne

Le theme Hummingbird est le nouveau theme par defaut de PrestaShop 9, remplacant le theme Classic. Construit avec Bootstrap 5 et TypeScript, il offre une experience d'achat plus rapide et moderne avec la prise en charge native du WebP/AVIF et un tunnel de commande ameliore.

Quel est le thème Hummingbird?

Hummingbird est le thème officiel par défaut expédié avec PrestaShop 9. Il représente une reconstruction complète de l'avant en utilisant les technologies Web modernes.

Principales caractéristiques techniques

• Bootstrap 5 — mis à jour depuis Bootstrap 4 utilisé dans le thème Classic. Meilleur réseau, utilitaires flexbox et composants.
• TypeScript — remplace le JavaScript clair pour une meilleure sécurité de type et la maintenance
• Méthode BEM — structure CSS plus propre, plus facile à remplacer et à personnaliser
• Native WebP et AVIF — formats d'images modernes fournis automatiquement pour des charges de pages plus rapides
• Chargement différé jQuery — jQuery charge asynchrone, améliorant les scores Core Web Vitals

Amélioration des performances

Hummingbird thème scores significativement mieux sur Google PageSpeed Insights par rapport à Classic thème:

• Taille du faisceau CSS plus petite en raison des optimisations BEM et Bootstrap 5
• Temps de blocage JavaScript réduit
• Meilleure peinture la plus riche (LCP) via WebP images

Amélioration du débit de départ

Le processus de paiement a été redessiné en Hummingbird avec un UI pas à pas plus propre, moins de distractions et une meilleure réactivité mobile, tous destinés à réduire l'abandon des chariots.

Hummingbird versus Classic Thème

Puis-je utiliser Classic Thème sur PrestaShop 9?

Oui. Le thème Classic fonctionne toujours sur PrestaShop 9, mais il ne bénéficie pas du nouveau pipeline WebP/AVIF ni des optimisations de performance Hummingbird. Si vous avez un thème personnalisé basé sur Classic, il continuera généralement à travailler avec des ajustements mineurs.

Ressources connexes

Lisez notre 9 guide complet ou comparez PrestaShop 9 vs PrestaShop 8.

Comment personnaliser le thème Hummingbird

La modification directe des fichiers thématiques Hummingbird est découragée — les mises à jour écraseront vos modifications. L'approche recommandée est de créer un thème enfant.

Créer un thème pour l'enfant

1. Copier le dossier thème Hummingbird: /themes/hummingbird/ → /themes/mytheme/
2. Modifier /themes/mytheme/config/theme.yml et modifier le nom et la référence parent
3. Ne conservez que les fichiers que vous voulez surcharger dans votre thème enfant — tous les autres reviendront au parent
4. Override CSS en ajoutant vos styles à /themes/mytheme/assets/css/custom.css

Les variables CSS débordent

Hummingbird utilise des propriétés personnalisées CSS (variables) pour les couleurs et l'espacement, ce qui facilite la personnalisation:

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

Comparaison de la page: Hummingbird vs Classic Thème

Les scores dépendent de l'hébergement, des modules et du contenu. Hummingbird avantage est plus visible sur mobile.

Passage de Classic à Hummingbird

1. Allez à Design → Thème & logo dans votre back office
2. Installez le thème Hummingbird (téléchargez à partir des addons officiels PrestaShop si non préinstallés)
3. Cliquez sur Utilisez ce thème à côté de Hummingbird
4. Effacer tous les caches : Back Office → Paramètres avancés → Performance → Effacer le cache
5. Testez soigneusement votre magasin — pages de produits, commande, vue mobile

Avertissement : Si vous avez un thème enfant personnalisé basé sur Classic, passer à Hummingbird montrera le nouveau design par défaut. Vous aurez besoin de reconstruire vos personnalisations comme un thème enfant Hummingbird.

Hummingbird pour les développeurs — Structure de classe BEM

BEM (Block, Element, Modifier) est une convention de nommage CSS qui rend les feuilles de style plus prévisibles et plus faciles à surcharger :

/* 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;
}

Foire aux questions

Le thème Classic est-il toujours disponible en PrestaShop 9?

Oui. Le thème Classic continue de fonctionner en PS9. Hummingbird est le nouveau défaut, mais vous n'êtes pas obligé de changer. Cependant, vous manquerez le support WebP/AVIF, Bootstrap 5, et l'amélioration de la caisse qui vient avec Hummingbird.

Puis-je utiliser des composants Bootstrap 4 avec Hummingbird?

Hummingbird utilise Bootstrap 5, qui a cassé les changements vs Bootstrap 4 (notamment, jQuery n'est plus nécessaire et certains noms de classe ont changé). Bootstrap 4 composants auront généralement besoin de mises à jour pour travailler avec Hummingbird.

Est-ce que Hummingbird fonctionne avec tous les modules PrestaShop?

La plupart des modules de la réception fonctionnent avec Classic et Hummingbird. Cependant, les modules qui injectent des classes de thème spécifiques CSS ciblant Classic peuvent avoir besoin de mises à jour. Consultez notre Guide de compatibilité du module PS9 pour plus de détails.

Comment Hummingbird gère-t-il les images WebP?

PrestaShop 9 avec Hummingbird génère automatiquement les versions WebP et AVIF de vos images de produits. Le thème sert le meilleur format pris en charge par le navigateur du visiteur — navigateurs modernes obtenir WebP/AVIF, navigateurs plus anciens obtenir JPEG / PNG repli. Pas besoin de configuration.