Guida PrestaShop, tutorial 5: modifica delle pagine statiche e della home page

Dopo aver modificato l'aspetto grafico del portale, proseguiamo popolando il sito con alcune pagine principali che riguardano l' attività di vendita: chi siamo, note legali, condizioni d'uso e Privacy Policy. Impariamo, inoltre, a personalizzare la home page sfruttando uno strumento gratuito messo a disposizione da PrestaShop

Nella lezione precedente abbiamo appreso come installare e configurare un tema per modificare l’aspetto grafico del portale di e-commerce. In questa lezione inizieremo a popolare il sito con contenuti e informazioni che riguardano la nostra attività commerciale. Per prima cosa ci occuperemo di implementare delle pagine statiche, sulla base di esempi già disponibili in PrestaShop, al fine di introdurre le informazioni principali riguardanti chi siamo, cosa facciamo, le note legali, la privacy e così via. Successivamente ci occuperemo della personalizzazione della home page guidati dallo strumento Editor di PrestaShop, che ci consentirà in pochi clic di modificare al meglio la pagina principale del sito. Introdurremo così i concetti di modulo e posizionamento che verranno meglio spiegati nella prossima lezione.

Una pagina per farci conoscere

Come ogni sito che si rispetti, anche in un portale di e-commerce è necessario inserire una pagina di presentazione dell’azienda. Generalmente questa funzione viene delegata alla pagina che va sotto il nome di Chi siamo (About us in inglese). Si tratta di una sezione che assume un ruolo importantissimo nel processo di vendita: all’interno di essa, infatti, gli utenti reperiranno informazioni sulla nostra attività, prima di procedere con un eventuale acquisto. È bene, quindi, che nella descrizione vengano messi in luce i punti forza dell’azienda e vengano elencati, punto per punto, i motivi per i quali un cliente dovrebbe affidarsi al nostro e-commerce, prediligendolo a quello del diretto concorrente. Chiarezza, semplicità e trasparenza: questi sono i concetti chiave che devono essere trasmessi ai clienti per ottenere successo.

PrestaShop, in quanto CMS, implementa una funzionalità che consente di creare e personalizzare delle pagine statiche. L’installazione completa del software include già alcune pagine di esempio che possono essere editate e personalizzate. Vediamo di seguito come accedere alle CMS pages e come modificare la pagina Chi siamo.

Dal menu principale del back office portiamoci sulla voce Preferenze e facciamo clic su CMS. In alto viene riproposta la lista delle Categorie da associare alle singole Pagine che sono elencate nel box a seguire. Notiamo immediatamente la presenza di cinque pagine di esempio. Per modificare chi siamo portiamoci sulla rispettiva riga e clicchiamo sull’icona di Modifica (foglio con penna) posizionato a sinistra. Avremo in tal modo accesso alla schermata di configurazione.

 PrestaShop chi siamo 

Non avendo generato ancora alcuna categoria in Catergoria CMS lasciamo l’opzione di default Home Page. Nel campo Meta titolo lasciamo pure invariato il nome Chi siamo. Si tratta del titolo che verrà associato alla pagina e sarà visualizzato nell’intestazione della scheda del browser. In Meta descrizione possiamo scegliere se lasciare invariato quanto riportato o se aggiungere qualche altra informazione.

Meta titolo e descrizione sono molto importanti dal punto di vista SEO, in quanto corrispondono al titolo e alla descrizione visualizzati nelle pagine di ricerca di Google. Per tale ragione, è bene riportare nella meta descrizione il nome della nostra azienda e le parole chiave che riguardano la nostra attività.

Meta titolo e meta descrizione

Nel campo Parole chiave inseriamo i termini principali che rappresentano la nostra attività (ad esempio nel caso di un e-commerce di prodotti elettronici potremmo inserire: e-commerce, elettronica, telefonia, e così via). È bene non inserire più di cinque/sei parole chiave. La maggior parte dei motori di ricerca non utilizzano più le meta keywords per indicizzare il sito, pertanto l’inserimento delle parole chiave non ha alcun fine nel processo di ottimizzazione SEO.

Il campo Friendly url viene compilato automaticamente, lasciamo quindi il valore di default.

Nel box di testo a seguire inseriamo il contenuto della pagina. Per non impazzire con la programmazione, PrestaShop mette a disposizione un editor di testo molto semplice e facile da utilizzare che consente di formattare al meglio la pagina. È possibile, infatti, inserire testi in formato titolo, grassetti, corsivi, sottolineature, immagini e altro ancora.

Dopo aver scritto la presentazione della nostra azienda ed aver associato qualche immagine, lasciamo impostata la funzione Mostrata e clicchiamo su Salva per rendere operative le modifiche apportate.

Una nuova categoria

Ad ogni pagina è possibile associare una categoria. Di seguito vediamo come creare la categoria Informazioni, alla quale assoceremo tutte le pagine contenti le info correlate al portale di vendita. Da Categorie CMS facciamo clic sul pulsante Aggiungi Nuovo.

PrestaShop categoria

Inseriamo quindi un Nome (nel nostro caso Informazioni), lasciamo impostata la voce Mostrata, inseriamo una breve Descrizione (ad esempio: apparterranno a questa categoria le pagine di info sul portale), indichiamo  sulla base dei suggerimenti riportati al paragrafo precedente il Meta Titolo, la Meta Descrizione e i Meta Keywords  e facciamo clic su Salva per rendere attiva la nuova categoria.

Le altre pagine principali del sito

A questo punto siamo pronti per modificare tutte le altre pagine del nostro sito ed associare ad ognuna di esse la rispettiva categoria.

Trattandosi di un portale di vendita online certamente sarà necessario implementare una pagina di Termini e condizioni d’uso. PrestaShop include già una pagina di esempio: apriamola facendo clic sull’icona di Modifica.

Dal menu a tendina Categoria CMS associamo alla pagina alla categoria Informazioni creata alla pagina precedente. Modifichiamo Meta titolo, Meta descrizione e Parole Chiave a piacimento e all’interno dell’editor di testo iniziamo ad elencare le regole mantenendo la formattazione proposta. Si tratta di una sorta di accordo legale che deve essere stipulato tra l’utente del sito Web e l’azienda che fornisce il servizio di vendita online. Utilizzando il sito l’utente dichiara di aver preso visione e di aver accettato i termini d’uso. È bene, quindi, esplicitare in maniera chiara quelle che sono le responsabilità a carico della nostra azienda e le responsabilità a carico dell’utente. Su Internet è possibile trovare tantissimi esempi a riguardo. Si può prendere spunto proprio da questi per personalizzarne il contenuto. In ogni caso è necessario, prima che il sito venga pubblicato, far revisionare i contenuti a chi di competenza (ad esempio il vostro avvocato), onde evitare in futuro spiacevoli sorprese. Ricordiamo che questa pagina rappresenta un accordo vero e proprio con l’utente, pertanto i contenuti potranno essere rivendicati in sede legale. Al termine dell’inserimento clicchiamo su Salva.

Altra pagina molto importante è quella relativa alla Nota Legale. Per modificarla basterà eseguire gli stessi passaggi visti poc’anzi. All’interno di questa sezione, generalmente viene indicata l’azienda a cui appartiene il sito Web, le informazioni sulla residenza legale e sulla partita IVA, informazioni sulla vendita, sulle tasse e sui prezzi applicati ai prodotti e altro ancora. Anche in tal caso è bene far revisionare i contenuti al proprio avvocato ed eventualmente al proprio commercialista.

La terza pagina proposta da PrestaShop riguarda le note sulla Privacy. Esporre la Privacy Policy è obbligatorio per tutti quei siti che tengono traccia dei visitatori, anche solo con Google Analitycs. Ne conviene che per un portale di e-commerce è assolutamente necessario non solo inserire la pagina di Privacy, ma anche porre un link ad essa ben visibile all’interno della home page. Apriamo quindi la pagina in modalità modifica e introduciamo il testo di interesse. Ricordiamoci che chiunque non espone la Privacy Policy sul proprio sito è soggetto a multe salatissime!

Ultima pagina da modificare riguarda le tipologie di pagamento che sono ammesse sul sito. Apriamo la pagina Pagamento sicuro e inseriamo, mantenendo la formattazione, tutte le informazioni relative le tipologie di pagamento attivate sul nostro portale. PrestaShop consente pagamenti tramite: assegno, bonifico bancario, carta di credito, PayPal e altri circuiti. Nelle prossime lezioni vedremo come attivare i moduli di pagamento, selezionando solo quelli di nostri interesse.

A questo punto le pagine principali del sito sono state configurate. Qualora volessimo aggiungerne delle nuove, basterà portarsi nella sezione CMS e cliccare su Aggiungi nuovo nel box Pagine in questa categoria. Terminato l’inserimento spostiamo l’attenzione sulla home page. Nella prossima pagina vedremo come personalizzare la pagina principale del sito grazie ad un editor gratuito messo a disposizione da PrestaShop.

Un editor per la home page

Per personalizzare la home page del sito di e-commerce, non è necessario essere dei programmatori. PrestaShop, infatti, mette a disposizione un modulo, l’Editor della Home page, che in pochi clic ci aiuta a inserire le informazioni desiderate nelle posizioni volute.

Per accedere a questa funzionalità all’interno del back office portiamoci, dal menu principale, nella voce Moduli e facciamo clic su Moduli. Nella nuova pagina Lista moduli, nel campo Ricerca inseriamo la stringa Editor. Non appena visualizziamo la voce Editor della home page da PrestaShop, selezioniamola e clicchiamoci su.

Accanto al nome del modulo noteremo l’etichetta Non installato. È necessario, quindi, procedere con l’installazione: per farlo basterà cliccare sul pulsante Installa.

 PrestaShop installazione Editor 

Al termine dell’installazione, che dura pochi secondi, verremo rimandati automaticamente alla pagina elencante tutti i moduli disponibili. Nel campo Ricerca inseriamo nuovamente la stringa Editor e non appena visualizzeremo la voce Editor della home page facciamo clic su di essa. Vedremo comparire accanto al nome del modulo l’etichetta Installato. Per accedere alla pagina di configurazione della home page, facciamo clic su Configura.

PrestaShop Editor home page

Per prima cosa ci viene richiesto il Titolo principale della pagina: inseriamo il nome del nostro negozio seguito da uno slogan (ad esempio nel caso di e-commerce di prodotti elettronici: MioSito – la tecnologia per tutti).

A seguire inseriamo il Sottotitolo, ossia una brevissima descrizione che spieghi di cosa ci occupiamo (ad esempio: Vendita di prodotti elettronici e telefonia).

Nel campo Testo introduttivo diamo, invece, delle informazioni approfondite riguardo chi siamo e di cosa ci occupiamo. In queste poche righe dobbiamo cercare di evidenziare i nostri punti forza, allo scopo di convincere i clienti, che giungono per la prima volta sul nostro sito, di affidarsi completamente al nostro e-commerce.

Possiamo scegliere di inserire una immagine a centro pagina che ci rappresenti. Da Logo della home page facciamo clic sul pulsante Elimina per cancellare l’immagine di default, e carichiamo una nuova foto tramite il pulsante Scegli file. In Link logo home page indichiamo la pagina alla quale vogliamo vengano reindirizzati gli utenti che cliccano salla foto (possiamo decidere di lasciare la home page o indirizzare verso la pagina Chi siamo). In Sottotitolo logo home page indichiamo un titolo per l’immagine che sarà visualizzato ogni qual volta si passi su di essa con il mouse.

Per applicare le modifiche facciamo clic su Salva. Per visualizzare quanto fino ad ora impostato visitiamo il front office del sito, facendo clic su Visualizza il mio negozio in alto a destra della pagina.  

Nella prossima lezione proseguiremo nella personalizzazione della home page, studiando la struttura della pagina e introducendo il concetto di moduli. Il risultato sarà la personalizzazione dei contenuti delle colonne laterali e del footer. Continaute a seguirci!