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

Il tema Hummingbird e il nuovo tema predefinito di PrestaShop 9, che sostituisce il tema Classic. Costruito con Bootstrap 5 e TypeScript, offre un esperienza di acquisto piu veloce con supporto nativo WebP/AVIF e un checkout migliorato.

Qual è il tema?

Hummingbird è il tema di default ufficiale spedito con PrestaShop 9. Rappresenta una ricostruzione completa front-end utilizzando le moderne tecnologie web.

Caratteristiche tecniche chiave

• # — aggiornato da Bootstrap 4 utilizzato nel tema Classic. Meglio griglia, flexbox utilità e componenti.
• # — sostituisce JavaScript normale per una migliore sicurezza e manutenbilità del tipo
• Metodologia BEM — struttura CSS più pulita, più facile da sovrascrivere e personalizzare
• Nativo: M30 e M31 — formati di immagine moderni serviti automaticamente per carichi di pagina più veloci
• Deferito il carico M25¤ — jQuery carica in modo asincrono, migliorando Core Web Vitals punteggi

Miglioramenti delle prestazioni

Hummingbird tema segna significativamente meglio su Google PageSpeed Insights rispetto al tema Classic:

• Dimensioni del pacchetto CSS più piccole grazie alle ottimizzazioni BEM e Bootstrap 5
• Riduzione del tempo di blocco JavaScript
• Migliore vernice più grande (LCP) via WebP immagini

Flusso di Checkout migliorato

Il processo di checkout è stato ridisegnato in Hummingbird con un'interfaccia utente più pulita passo dopo passo, meno distrazioni e una migliore reattività mobile — il tutto finalizzato a ridurre l'abbandono del carrello.

# M15 # # vs #M22 # # Theme #

Posso usare il tema 'M19¤ 9?

Si'. Il tema Classic funziona ancora su PrestaShop 9, ma non beneficia della nuova WebP/AVIF pipeline o Hummingbird ottimizzazioni delle prestazioni. Se si dispone di un tema personalizzato basato su Classic, generalmente continuerà a lavorare con modifiche minori.

Risorse correlate

Leggi il nostro PrestaShop 9 guida completa o confronta PrestaShop 9 vs PrestaShop 8.

Come Personalizzare il Tema

Modifica diretta dei file tema Hummingbird è scoraggiato — gli aggiornamenti sovrascriveranno i cambiamenti. L'approccio raccomandato è quello di creare un tema bambino.

Creare un tema per bambini

1. Copiare la cartella tema Hummingbird: /themes/hummingbird/ → /themes/mytheme/
2. Modifica /themes/mytheme/config/theme.yml e modifica il nome e il riferimento dei genitori
3. Tenere solo i file che si desidera sovrascrivere nel tema del bambino — tutti gli altri cadranno al genitore
4. Override CSS aggiungendo i tuoi stili a /themes/mytheme/assets/css/custom.css

CSS Variabili Override

Hummingbird utilizza proprietà personalizzate CSS (variabili) per colori e spaziatura, rendendo la personalizzazione facile:

/* 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 Confronto: Hummingbird vs Classic Tema

#

Passare da M22 a Hummingbird

1. Vai a Design → Tema & Logo nel tuo ufficio posteriore
2. Installare il tema Hummingbird (download dal ufficiale PrestaShop Addons se non preinstallato)
3. Clicca Utilizzare questo tema accanto a Hummingbird
4. Cancella tutte le cache: Back Office → Parametri Avanzati → Performance →
5. Metti alla prova il tuo negozio a fondo — pagine di prodotto, checkout, vista mobile

Attenzione: Se si dispone di un tema bambino personalizzato basato su Classic, passare a Hummingbird mostrerà il nuovo design predefinito. Dovrai ricostruire le tue personalizzazione come tema bambino Hummingbird.

Hummingbird per sviluppatori — Struttura di classe BEM

BEM (Block, Element, Modifier) è una convenzione di denominazione CSS che rende i fogli di stile più prevedibili e più facili da sovrascrivere:

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

Domande frequenti

Il tema è ancora disponibile in PrestaShop 9?

Si'. Il tema M22¤ continua a lavorare in PS9. Hummingbird è il nuovo default, ma non sei costretto a passare. Tuttavia, vi perderete su WebP/AVIF supporto, Bootstrap 5, e il checkout migliorato che vengono con Hummingbird.

Posso usare Bootstrap 4 componenti con Hummingbird?

Hummingbird utilizza Bootstrap 5, che ha rotture modifiche vs Bootstrap 4 (in particolare, jQuery non è più richiesto e alcuni nomi di classe cambiato). Bootstrap 4 componenti di solito bisogno di aggiornamenti per lavorare con Hummingbird.

Hummingbird Lavora con tutti i moduli M19¤?

La maggior parte dei moduli dell'ufficio anteriore funziona con Classic e Hummingbird. Tuttavia, i moduli che iniettano specifiche classi a tema CSS Classic potrebbero aver bisogno di aggiornamenti. Controlla il nostro Guida alla compatibilità del modulo PS9 per i dettagli.

Come funziona Hummingbird WebP immagini?

PrestaShop 9 con Hummingbird genera automaticamente WebP e AVIF versioni delle immagini del prodotto. Il tema serve il miglior formato supportato dal browser del visitatore — i browser moderni ottengono WebP/AVIF, i browser più vecchi ottengono JPEG/PNG fallback. Nessuna configurazione necessaria.