Come installare un tema in Magento 2

installare-tema-magento2-blog

Vuoi installare un nuovo tema su Magento 2 ma non sai da dove iniziare?
La scelta e l’installazione corretta del tema sono fondamentali per ottenere uno store veloce, performante e SEO friendly.
In questa guida scoprirai 3 metodi pratici per installare un tema su Magento 2, oltre a una serie di consigli per configurarlo e testarlo al meglio.

Cosa devi sapere prima di iniziare

Prima di installare qualsiasi tema su Magento 2, è importante seguire alcuni passaggi preliminari:

  1. Fai un backup completo
    Esegui un backup dei file e del database del tuo store per evitare la perdita di dati in caso di errori durante l’installazione.
  2. Verifica la compatibilità del tema
    Assicurati che il tema sia compatibile con la versione di Magento in uso e con le estensioni già installate.
  3. Attiva la modalità di manutenzione
    Imposta il tuo store in maintenance mode per evitare che i clienti visualizzino il sito durante l’installazione.
  4. Accedi alla root del progetto
    Collega il tuo server via FTP, SFTP o SSH e prepara l’ambiente seguendo le istruzioni fornite dal vendor del tema.

Come installare un tema in Magento 2

Per installare un tema su Magento 2 ci sono 3 metodi che si possono utilizzare. Vediamoli tutti e 3 nel dettaglio.

Metodo 1 – Installazione manuale

Per prima cosa dovrai:

  • Eseguire un backup del tuo store
  • Vai sul marketplace dove trovare il tuo tema e scarica l’archivio del tema (ZIP o TAR)
  • Estrai i file per accedere alle cartelle “app” e “pub”

ora dovrai caricare i file:

  • Connettiti al server via SFTP.
  • Accedi alla root del tuo Magento (/var/www/html o simile).
  • Carica le cartelle app e pub sovrascrivendo i file se richiesto.

a questo punto dovrai configurare il server:

  • Apri il terminale e connettiti via SSH
  • Accedi con le credenziali del proprietario del file system Magento
  • Accedi alla radice di Magento utilizzando il comando cd.
  • Passa alla modalità sviluppatore:
php bin/magento deploy:mode:set developer

Elimina i contenuti del generated/code e dei metadati generati.

Ora puoi installare ed attivare il tema:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento maintenance:disable

Poi, dal backend:

  • Vai su Content -> Design -> Configuration
  • Seleziona lo store view desiderato
  • Imposta il nuovo tema dal menu “Applied Theme” e salva le modifiche.

Metodo 2 – Installazione tramite Composer

Per prima cosa verifica i seguenti requisiti:

  • Imposta Magento in modalità developer
  • Ottieni il nome e versione del pacchetto Composer del tema

Procedi ora all’installazione:

Da terminale, nella root del progetto:

composer require <vendor>/<name>:<version>
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f

Poi verifica in Content -> Design -> Themes che il tema sia correttamente registrato.

Metodo 3 – Installazione del tema Hyvä

Hyvä è oggi uno dei temi più performanti per Magento 2, pensato per migliorare la velocità e l’esperienza utente.

Se vuoi installarlo per prima cosa occorre verificare i seguenti requisiti:

  • Occorre avere una versione Magento 2.4.6 o superiore
  • PHP 8.2
  • Node.js 14+ e npm 6+

Procedi ora all’installazione tramite Composer:

composer require hyva-themes/magento2-theme-module
composer require hyva-themes/magento2-default-theme

e infine procedi alla configuraizione:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

Dal backend, vai su Content -> Design -> Configuration e applica il tema Hyvä.

Come configurare il tuo nuovo tema Magento 2

1. Logo personalizzato

Per inserire il tuo logo, vai su:

  • Content -> Design -> Configuration -> Configuration
  • Vai su Edit nella tua store view
  • Espandi la sezione Header e li carica il tuo logo.
schermata di caricamento logo su tema magento 2
  • Imposta dimensioni, alt text e salva.

2. Colori e stile

  • Trova i file CSS del tema in app/design/frontend/Vendor/Theme/web/css.
  • Apri il file CSS
  • Modifica i valori colore secondo la tua brand identity.
  • Per Hyvä, aggiorna il file tailwind.config.js.
  • Svuota la cache per applicare le modifiche.

3. Layout e template

  • Vai su app/design/frontend/Vendor/Theme/Magento_Theme/layout per modificare la struttura delle pagine.
  • Apri e modifica il file XML
  • Modifica il layout e la struttura come preferisci

4. Impostazioni SEO

  • Abilita le URL Rewrites da Stores -> Configuration -> General -> Web -> SEO.
  • Configura la sitemap XML da Stores -> Configuration -> Catalog -> XML Sitemap.
  • Minifica CSS e JS per migliorare la velocità del sito seguendo il percorso: Stores -> Configuration -> Advanced -> Developer-> CSS/Javascript Setting

Come scegliere il tema giusto per Magento 2

Il primo fattore da considerare è la compatibilità. Assicurati che il tema sia pienamente supportato dalla tua versione di Magento e che sia aggiornato per funzionare con PHP 8.2 e le ultime patch di sicurezza. Un tema non aggiornato può causare errori, rallentamenti e conflitti con estensioni o moduli personalizzati.

Altro elemento fondamentale è il fatto di essere responsive. Oggi la maggior parte degli utenti acquista da smartphone o tablet, perciò il tema deve adattarsi perfettamente a qualsiasi dispositivo e dimensione dello schermo. Preferisci sempre soluzioni mobile-first, pensate per garantire una navigazione fluida e un’esperienza d’acquisto ottimale anche da mobile.

Dal punto di vista tecnico, è essenziale valutare le performance. Un tema leggero, con codice pulito e ottimizzato, influisce positivamente sui tempi di caricamento e sulle metriche di Core Web Vitals, con un impatto diretto anche sul posizionamento SEO. Temi moderni come Hyvä sono stati progettati proprio per garantire velocità e un frontend semplificato, riducendo drasticamente le richieste HTTP e migliorando l’esperienza utente.

Un altro aspetto spesso sottovalutato riguarda la personalizzazione. Scegli un tema che consenta di modificare facilmente layout, palette di colori, font e componenti grafici, così da adattarlo al tuo brand senza dover intervenire pesantemente sul codice. Alcuni temi includono anche strumenti visuali o funzioni AI per gestire le sezioni della homepage in modo dinamico.

Infine, non trascurare il supporto tecnico e le recensioni. Opta per un tema sviluppato da vendor affidabili, con una documentazione chiara, aggiornamenti regolari e un servizio di assistenza efficiente. Le valutazioni degli utenti e le opinioni della community Magento possono offrirti indicazioni preziose sulla qualità del tema e sull’affidabilità del fornitore.

Come testare il tema dopo l’installazione

Dopo aver installato e configurato il nuovo tema, è essenziale dedicare del tempo alla fase di test per assicurarsi che tutto funzioni correttamente. Un controllo accurato permette di evitare problemi di usabilità, errori di visualizzazione e rallentamenti che potrebbero compromettere l’esperienza dei clienti.

Inizia con il test cross-browser. Apri il tuo store su diversi browser, come Chrome, Firefox, Safari ed Edge, e verifica che il layout, le immagini e le funzionalità si visualizzino correttamente ovunque. Alcuni elementi grafici o script possono comportarsi in modo diverso a seconda del browser, quindi è importante individuare e correggere eventuali incongruenze.

Prosegui con il test di responsività, controllando come il sito si adatta a varie dimensioni di schermo. Simula la visualizzazione su smartphone e tablet attraverso gli strumenti per sviluppatori o, meglio ancora, naviga direttamente da dispositivi reali. Verifica che menu, pulsanti, form e carrelli siano facilmente accessibili anche su display più piccoli.

Un altro passaggio fondamentale è il test delle funzionalità. Esamina ogni sezione del tuo store: le pagine prodotto, il carrello, il processo di checkout, il login clienti e le eventuali integrazioni con moduli o estensioni di terze parti. Tutte le funzioni devono essere operative e coerenti con il nuovo tema, senza interruzioni o comportamenti anomali.

Infine, dedica attenzione alla performance. Utilizza strumenti come Google PageSpeed Insights, GTmetrix o Lighthouse per misurare la velocità di caricamento e le metriche di Core Web Vitals (LCP, FID e CLS). Confronta i risultati con quelli del tema precedente e, se necessario, intervieni su immagini, codice CSS/JS o impostazioni di cache per ottimizzare ulteriormente i tempi di risposta.

Un tema ben testato e ottimizzato non solo migliora l’esperienza utente, ma contribuisce anche a un migliore posizionamento SEO e a una gestione più stabile e sicura del tuo store Magento 2.

In conclusione

Installare un tema in Magento 2 è un’operazione che, se fatta correttamente, migliora l’aspetto, la velocità e la SEO del tuo store.
Che tu scelga l’installazione manuale, via Composer o Hyvä, ricordati sempre di testare tutto prima di andare online.

Ti è piaciuto questo articolo? Votalo!

Torna in alto