Come creare un tema child per Prestashop 1.7

Come creare un tema child per Prestashop 1.7

In questo articolo ti mostrerò come creare un tema child per Prestashop 1.7 per realizzare il tuo tema personalizzato in maniera facile e veloce!

Se non sei un neofita, sicuramente saprai che Prestashop 1.7 ha introdotto diverse modifiche al back office e al front office, tra cui anche la gestione dei temi (probabilmente per incentivare l’acquisto di temi a pagamento).

Alla fine di questa breve guida anche tu sarai in grado di creare il tuo tema child per Prestashop 1.7 e potrai utilizzare la stessa procedura per creare tutti i temi personalizzati di cui hai bisogno.

Cominciamo!

1 – Scarica e installa Prestashop 1.7

Lo so, sembra banale ma è la prima cosa da fare. Scarica e installa l’ultima versione disponibile di Prestashop, preferibilmente in locale.

Una volta scaricato, spostati nella cartella themes e assicurati che il tema predefinito sia presente (nel mio caso classic).

prestashop themes

Cartella themes di Prestashop 1.7

2 – Duplica il tema predefinito

Crea una nuova cartella e rinominala con il nome del tuo tema: a questo punto nella cartella themes avrai due cartelle, la tua e quella del tema predefinito.

Apri la cartella del tema child appena creata e crea al suo interno una nuova cartella chiamata config.

Adesso apri il tuo text editor (se non ne utilizzi uno puoi usare semplicemente il blocco note) e scrivi le stringhe seguenti:

parent: classic
name: pwd
display_name: Tema child per classic
version: 1.0.0
assets:
  use_parent_assets: true

Sostituisci PWD con il nome del tuo tema e fai lo stesso per la stringa display_name, fatto ciò salva il file con nome theme.yml all’interno della cartella config.

Questo è il file di configurazione del tuo tema child ed è indispensabile per il corretto funzionamento del tema figlio.

tema child prestashop

File di configurazione del tema child in Prestashop 1.7

3 – Aggiungi un’immagine di anteprima

Impostare un’immagine di anteprima per il tuo tema child è semplicissimo: ti basterà creare un’immagine in png formato 500*663px e salvarla come preview.png all’interno della cartella del tuo tema child.

L’immagine di anteprima verrà visualizzata nella sezione Temi del backoffice di Prestashop insieme al tuo tema.

A questo punto hai tutto, ma voglio regalarti un’ultima chicca…

4 – Crea un Custom.css per il tuo CSS personalizzato

Il tema classic predefinito di Prestashop 1.7 contiene un file custom.css che puoi utilizzare per sovrascrivere il css di default con il tuo css personalizzato.

Nel nostro caso, andremo a duplicare questo file nella cartella del nostro tema child, così da tenere le cose ben separate ed evitare che venga sovrascritto durante eventuali aggiornamenti.

Spostati nella cartella del tuo tema child e crea la cartella assets.

Al suo interno, crea un’altra cartella denominata css. Qui dentro andremo a creare il nuovo file custom.css vuoto, da riempire con il tuo css personalizzato.

Il css che scriverai dentro questo file andrà a sovrascrivere il css del tema “padre”: in questo modo potrai personalizzare il tuo tema come preferisci nel modo più semplice possibile!

Ricapitolando…

Se hai seguito la mia guida passo-passo, dovresti ritrovarti con una roba del genere:

themes
  -- classic
  -- classic-child (la tua cartella)
    -- assets
      -- css
        -- custom.css
    -- config
      -- theme.yml
  -- preview.png

Non riesci a seguire i vari passaggi?

Niente paura: so che un’immagine vale più di mille parole, per questo ho deciso di creare un video per mostrarti passo-passo come fare.
Eccolo qui!

Ora non ti resta che effettuare il login al back office di Prestashop e abilitare il tuo nuovo tema child nella sezione “Temi”.

Buon lavoro! 🙂

Post correlati