PrestaShop - Modifiche di base al tema

Sebbene il tema di base predefinito di PrestaShop È abbastanza funzionale, un negozio non può andare online in questo modo, primo perché corriamo il rischio che un altro negozio abbia lo stesso aspetto e secondo perché forse il tema di base contiene cose che non ci servono o sono disposte in modo non conforme al nostro negozio.
Per questo la personalizzazione è la strada che seguiamo sempre sia inserendo un nuovo tema che cambiando quello esistente, in modo che la disposizione degli elementi e i colori possano essere differenti.
Primi cambiamenti
Inizieremo ad apportare modifiche semplici ma molto efficaci che renderanno il tema completamente diverso da come è di default, per questo seguiremo i seguenti passaggi:

• Stiamo per cambiare il logo, lo facciamo dall'amministratore del back office, per questo caricheremo l'immagine nella sezione: Preferenze -> Aspetto.
• Allora dobbiamo andare a Back Office -> Moduli -> Strumenti -> Home Editor.
• Abbiamo sostituito il logo centrale durante la configurazione del modulo.

Dopo questo inizio ora andremo a modificare alcuni elementi di posizione per un maggiore effetto di personalizzazione:

• Cambiamo la posizione del blocco Categoria: nella colonna di sinistra.
• Disattiviamo i prodotti speciali.
• Modifichiamo le informazioni in categorie.

Vediamo lo screenshot seguente così da poter esaminare le modifiche che abbiamo fatto, noteremo che alcune cose sono state spostate da destra a sinistra e che altre colonne non ci sono più e quindi altre si sono alzate in posizione:

Ora il tema predefinito sembra molto diverso, se ancora non otteniamo un buon risultato, non preoccuparti poiché è qualcosa di nuovo e come tale dobbiamo esercitarci un po' prima di diventare esperti del settore.
Modifica del CSS
Un altro cambiamento molto efficace è la modifica dei file CSS con cui possiamo cambiare, ad esempio, il colore di sfondo del negozio.
Ai fini di questo esempio useremo Firefox e i tuoi strumenti di sviluppo o se preferisci il firebug.
Per attivare la modifica del CSS con gli strumenti per sviluppatori faremo semplicemente clic con il pulsante destro del mouse sul negozio e selezioneremo l'opzione Ispeziona elemento, quindi nel menu che appare selezioneremo editor di stile.
Ora se stiamo usando firebug, diciamo solo ispeziona elemento con firebug e poi andiamo alla scheda CSS.
Nella finestra che è apparsa e una volta nella sezione CSS andremo a individuare il file globale.css e proveremo a cambiare il codice da colore di sfondo.

 corpo {colore di sfondo: [b] blu [/ b]; dimensione del carattere: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; colore: # 5d717e; allineamento del testo: centro} 

Grazie a questi strumenti, il cambiamento viene effettuato in tempo reale e abbiamo l'opportunità di visualizzarlo in modo da vedere i nostri progressi nel momento:

Come possiamo vedere, lo sfondo blu è un cambiamento molto drastico, ma efficace, ovviamente non ha un bell'aspetto poiché le lettere e altri elementi devono essere regolati, tuttavia vediamo la cosa importante ed è che un semplice colore può fare un differenza.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo