No results found
Nell’apposito tutorial avete scoperto le qualità di PrestaShop, che è un prodotto disponibile nella formula SaaS per realizzare siti di e-commerce con facilità e versatiltà, grazie all’innumerevole offerta di moduli, ed anche con una spesa ridotta rispetto a ciò che offre la concorrenza.
In questo tutorial estenderemo il discorso ai temi e quindi alla grafica, che è un argomento obiettivamente molto vasto perché va a toccare l’utilizzabilità, il marketing, il branding e via di seguito.
Il Web Design è uno strumento attraverso il quale trasferire i valori del brand aziendale allo shop on-line, ossia per valorizzare e presentare nella maniera migliore e più efficace sul piano di profitti, il prodotto.
In origine questo concetto era trascurato e i prodotti venivano presentati in maniera spartana, il sito aveva il pulsante di acquisto e il classico “paga con PayPal”. Qualcosa di più si aveva con i Marketplace.
In un decennio le dinamiche sono cambiate, nel senso che è aumentata la concorrenza, perché oggi i siti di e-commerce sono tantissimi e molti agguerriti, soprattutto, le normative stanno mettendo nelle condizioni di essere dei venditori almeno per quella che è la comunità europea, quindi i parametri sono assolutamente diversi da un tempo.
Il livello di confronto lo ha posto Amazon, che ha definito degli standard operativi degli Shop ai quali bene o male gli altri si sono adattati.
Il primo passaggio, ossia la porta di ingresso di un sito di e-commerce è la home-page, che è quella con la quale andiamo a presentare al pubblico il negozio on-line.
Non è necessariamente la landing page ma è comunque una pagina dove tutti gli utenti, soprattutto quelli più utilizzati, fanno passare ed è soprattutto, nella sua componente dell’header (quindi la parte alta) e del footer (la parte bassa), quella che si va a ripetere su tutte le singole pagine dello Shop.
Una considerazione sulla quale bisogna riflettere è che molto spesso non è vero che l’utente cerca il sito che abbia il prodotto che gli interessa al prezzo più basso, perché altrimenti non si spiegherebbe perché esistono siti che attraggono clienti pur non avendo i prezzi migliori. Cò che fa la differenza è l’attenta costruzione grafica, la presentazione e l’idea che il sito fornisce attraverso il proprio aspetto.
PrestaShop offre una grafica prestabilita, di base, già utilizzabile per costruire un sito di e-commerce. Il template di PrestaShop innanzitutto ha una caratteristica, ossia è un tema boxed, quindi è chiuso in una colonna della larghezza di 1.170 pixel (immagine seguente).
I temi boxati sono qualcosa che appartiene al passato perché ultimamente si sta cercando di sfruttare tutto lo spazio del monitor e poi chiaramente si fa adattare questo disegno al dispositivo utilizzato dall’utente per la connessione (PC, tablet, smartphone e relativi sistemi operativi) quindi a dispositivi fissi o mobile, ciascuno dei quali può contare su una versione desktop o mobile.
Quindi il tema è strettamente legato alla grafica e la grafica deve essere fluida, ossia deve adattarsi al device che l’utente utilizza.
La prima parte è composta da due blocchi: il primo, sopra, che chiamiamo NAV, è la parte contenente il Contattaci e dove vedete il logo dell’azienda (riferitevi sempre all’immagine precedente). Poi c’è una sezione Slide.
Generalmente il NAV contiene alcuni strumenti, funzioni e comandi tipo cambio della lingua e della valuta, l’accesso all’area personale ed è seguito da un secondo NAV e da un terzo, dove si trovano le categorie principali del negozio, il “Chi siamo” e via di seguito.
Queste sono sezioni fondamentali ai fini SEO.
A seguire, sotto la parte superiore della pagina, il tema base di PrestaShop presenta un blocco di vetrine; il tema base di prestashop prevede in realtà una singola vetrina (con un nome predefinito, tipo PRODOTTI POPOLARI, che può essere cambiato a piacimento) nella quale vengono inseriti un certo numero di prodotti. Con riferimento all’immagine seguente, abbiamo la possibilità di collocare un certo numero di colonne di prodotti.
Le vetrine influiscono in termini di comunicazione con l’utente che accede alla pagina, ma anche in termini di veelocità del sito, nel senso che mettere troppi prodotti in vetrina è speso fonte di problemi, lentezza di accesso alle pagine ecc.
In basso nella pagina, sopra il footer, c’è una zona dove si possono inserire dei banner e dove si va a inserire anche un testo. Il testo è una componente fondamentale di una home-page ben costruita; per esempio se la home-page è strutturata in più lingue, occorrerà inserire i testi tradotti per ogni pagina corrispondente alla rispettiva lingua.
Il testo non si mette solo perché l’utente poi forse lo legge il testo ha una logica SEO ed ha una funzione complessa all’interno di uno Shop.
In ultimo abbiamo il clasico footer, che è il posto della home-page dove ci sono in genere i link alle pagine fondamentali, ma anche dove viene inserita i dati dell’azienda, la partita IVA (cosa fondamentale per uno Shop on-line) e tutti i dati commerciali (immagine seguenti). Ci sono anche i link alla Policy aziendale, alla Privacy e, se il sito non è molto grande perché non ha troppe categorie di prodotto, anche un micro elenco di categorie.
Questa è la grafica che ci propone PrestaShop per impostazione predefinita; a questo punto abbiamo due strade: se conosciamo java, il css, il php, possiamo costruire il nostro Shop, eventualmente aggiungendo moduli specifici. Tale soluzione richiede tantissime ore di lavoro per fare la personalizzazione e comunque anche in ragione dei budget investiti non si arriva mai a grafiche entusiasmanti. Considerate che la creazione di un tema da zero ha un costo che non si ferma ai tre zeri, il che può portare a non essere concorrenziali.
La seconda strada consiste nel partire da un prodotto predefinito e acquisire e montare moduli pronti che risolvono ciascuno una parte del problema.
Una nota importante riguarda i loghi: quando si va a realizzare la grafica occore che l’azienda cliente metta a disposizione un pacchetto di loghi adeguato: tanto per intenderci, se vedete lo spazio di PrestaShop è orizzontale, quindi il logo si mette di lato o al centro.
Una delle difficoltà che si incontrano con PrestaShop riguarda l’inserimento di loghi verticali, i quali creano problemi a livello grafico; questo perché PrestaShop è costruito a blocchi orizzontali, ossia praticamente delle righe che si sovrappongono e il contenuto di una singola riga non può uscire, sforare nella riga successiva, quindi un logo verticale diviene fonte di tantissimi problemi.
Molto spesso abbiamo Shop che se aperti su uno smartphone, a causa di un logo costruito male occupano quasi metà della superficie del telefono.
Andiamo a vedere i temi acquistabili e ancora personalizzabili e che opportunità forniscono; prima di tutto in fase di studio dello Shop bisogna domandarsi cosa vogliamo metterci; ebbene, normalmente si scompone la vetrina i tre parti, ossia si mettono i prodotti novità, i più venduti (best seller) e le offerte. Inoltre vanno evidenziati i collegamenti alle categorie principali, poi quelli che tecnicamente vengono chiamati blocchi rassicurativi, ossia i tempi di rimborso, di spedizione entro la giornata ecc. nonché il testo SEO spiegato prima, che va nella parte inferiore dello Shop.
Approfondiamo un attimo il discorso: la vetrina delle novità è importante se nello Shop i prodotti non hanno una rotazione non eccessivamente rapida e soprattutto dove non ci sono tutta la settimana centinaia di prodotti nuovi; se i prodotti cambiano troppo alla svelta non è facile gestire la cosa in maniera automatica e conviene decidere di volta in volta quali prodotti evidenziare, costruendo una vetrina personalizzabile.
Lo stesso discorso può valere per la vetrina dei bestseller: questi sono automatizzati, nel senso che i più venduti vengono ricavati e proposti automaticamente, tuttavia se lo Shop ha molti prodotti e quindi i valori delle vendite di ciascuno cambiano frequentemente, alla fine la vetrina diventa poco utile per l’utente, perché da una visita fatta un gionro a quella del giorno seguente può non trovare più tra i best seller il prodotto che cercava. Anche in questo caso bisogna creare una vetrina personalizzabile dove il commerciante inserisce a mano i prodotti da evidenziare come best seller.
Lo stesso discorso vale per la vetrina delle offerte, giacché è limitante inserirle nella home-page.
Quindi queste vetrine in uno Shop che funziona bene non sono mai vetrine automatiche, nel senso che bisognerà comporle manualmente sulla base delle esigenze aziendali e dell’efficacia dell’accesso da parte dell’utente a ciò che effettivamente si vuole proporre.
Questo implica l’adozione di vetrine più complesse di quella base di PrestaShop, nella quale possiamo solo inserire il numero di prodotti senza condizioni.
Un’interessante alternativa è mettere nella vetrina i prodotti che l’utente ha visto nelle precedenti visite e di categorie che sono già state visitate dall’utente.
Un'altra cosa utile in una home-page strutturata con criterio sono dei banner alle categorie: se c’è una certa categoria le si associa un’immagine nella home-page, cliccando sulla quale si va alla pagina della categoria stessa. Questo è molto importante soprattutto per i siti in versione mobile, dove di norma nell’angolo a sinistra si utilizza il menu con l’icona a righe, che molti utenti non sono in grado di utilizzare. Quindi avere blocchi di immagini che riconducono alle categorie permette di indirizzare gli utenti più facilmente alle categorie stesse.
In PrestaShop vi sono sostanzialmente due generi di tema grafico: quello con Builder e quello senza; la differenza è fondamentale per moltissime ragioni. Innanzitutto i temi senza builder generalmente sono molto simili all’originale di PrestaShop ma non possono essere modificati sostanzialmente nella struttura, nella posizione delle immagini e nelle funzioni. In questo caso si tratta di un pacchetto abbastanza rigido perché vi si può cambiare i colori, l’altezza di una slide, ma la struttura rimane quella.
Invece i temi con builder sono molto più interessanti per lo sviluppatore, in quanto consentono maggiore personalizzazione dello Shop. Sono però molto esigenti in tema di risorse di calcolo e quindi vanno scelti se si può contare su risorse di un certo livello, anche perché sono peraltro molto complessi e spesso anche ricchi di bug.
Quindi per avventurarsi in un tema con un builder complesso occorre avere le necessarie competenze, perché se è vero che chi vende moduli con temi con builder offre anche il supporto tecnico, di solito non è sufficiente a colmare le lacune dello sviluppatore poco preparato.
Riepilogando, i temi senza builder sono più leggeri da elaborare lato server, però le personalizzazioni vanno fatte lato codice e spesso si limitano alla home-page; inoltre in molti casi quando si comperano temi grafici senza builder le personalizzazioni grafiche si ottengono con l’aggiunta di moduli, che peraltro hanno limitazioni o non funzionano a dovere.
Uno dei principali temi senza builder è Transformer (immagine seguente) che ha un elevato assortimento di impaginazioni, la possibilità di scegliere tra una trentina di home-page diverse (ma poco personalizzabili, perché si può cambiare colore, font ma non la struttura), ha dei moduli propri e transazioni del carrello personalizzabili, oltre che una facile e ricca scelta dei colori. Infine ha una versione mobile dicretamente personalizzabile.
Tra i temi con con builder possiamo evidenziare Wharehouse, che ha un builder pur limitato perché non ci si può fare tutto; offre un numero elevato di temi grafici (anche qui una trentina) e consente personalizzazioni avanzate, pur con limiti riguardo alla modifica del layout (non si possono, ad esempio, trascinare i blocchi). È ottimizzato a livello SEO e lo vedete nell’immagine seguente.
Un tema con builder per professionisti è LEO THEME (immagine seguente) che in questo momento stanno utilizzando in molti, anche perché offre sul sito web corrispondente oltre 400 temi personalizzabili.
Quelli disponibili per PrestaShop sono in realtà circa 150 (per la versione 1.7), però ciascun tema prevede dei sotto-temi. Utilizza molti moduli delicati e dispone di tantissime impaginazioni.
Le opzioni di utilizzo sono due: prendere uno degli innumerevoli temi e fare personalizzazioni essenziali (colori, font ecc.) oppure mettere mano a livello di programmazione; in ogni caso la personalizzazione va eseguita a livello di css. Quindi si entra nella cartella del tema, si va nella sotto-cartella dei css, e si modifica il global o si va a creare un css personalizzato.
LEO THEME è l’ideale perché consente il miglior rapporto tra possibilità di soddisfare le esigenze grafiche e il costo di sviluppo
Poco fa si è accennato al Builder, quindi è opportuno spiegare di cosa si tratta: sostanzialmente è uno strumento che permette di vedere la pagina in sviluppo come se ci si trovasse dietro lo schermo, quindi consente di vedere semplicemente gli elementi e i blocchi che vanno a comporre il sito e scorrendo il mouse sui vari blocchi appare una sorta di toolbar azzurra contenente pulsanti con i quali ad esempio è possibile spegnere un blocco che non si vuole visualizzare, aprirlo o modificarlo, cancellarlo, trascinarlo per spostarlo e via di seguito (immagine seguente).
Nell’immagine seguente viene proposto un pezzo del builder di un tema grafico; considerate che un builder completo è lungo 5-6 volte quello che vedete in tale immagine (ogni blocco è un pezzo di builder). Comunque, notate come PrestaShop sia costruito in orizzontale, quindi ogni blocco ha una logica orizzontale.
Il builder permette comunque di alterare sensibilmente tale meccanismo, tale struttura, tanto che consente di dividere il blocco in colonne, che sono i blocchi evidenziati dal pallino rosso alla sinistra dell’immagine seguente. Quello proposto è l’equivalente di uno Shop dove sopra ci sono le immagini e sotto quattro vetrine: la prima è “argento colloidale” la seconda “oro colloidale” la terza “altri colloidali” ecc. Senza grandi difficoltà è possibile aggiungere altre tab, altre vetrine ecc. L’esempio propone il “retro” di uno Shop reale e nelle tre colonne sopra abbiamo altrettante immagini (dentro ogni immagine è possibile inserire una classe, creare un blocco separato per il testo, inserire testo HTML e nell’HTML creare dei pulsanti).
Questo riguarda builder riguarda solo ed esclusivamente la costruzione della home-page, che nell’immagine seguente viene proposta dal “davanti” ossia da dove la vede chi vi accede dal web.
Un altro vantaggio di LEO THEME è che con esso si può fare la personalizzazione di tutti i componenti principali e chiaramente tra questi abbiamo i menu; quindi esiste un modulo che a sua volta è un builder vero e proprio attraverso il quale è possibile personalizzare il menu, tanto da poter creare un menu orizzontale (è quello in nero nell’immagine precedente) ed anche un menu orizzontale, quindi un incrocio di due menu.
Lato mobile, in casi come questo il menu nero (orizzontale) diventa il pulsante con le righe solitamente posto a sinistra, mentre il menu che vedete stesso in verticale si apre a centro pagina (sotto l’header o il Nav dello Shop stesso). Questo meccanismo permette di fare tante cose: oltre a due menu, anche dei blocchetti dove inserire dei sottomenu e dove mettere le voci delle sottocategorie, dei prodotti e molto altro.
Nell’immagine seguente potete vedere un esempio di menu sviluppato partendo da quel piccolo menu, quindi da quelle che erano delle semplicissime voci sviluppate in verticale è stato scritto un java ed un css dedicato e con dei blocchi si è creato un layout che permette all’utente di passare tra i vari blocchi, ogni blocco carica un testo o un’immagine e tutto il complesso testo + immagine diventa cliccabile e conduce alla categoria.
In questo caso si è anche assolta la funzione SEO (inserendo un testo in alto nella pagina). Si è anche riusciti a presentare, malgrado il numero limitato di voci di menu (Bambini, Ragazzi/Adulti, Smart travel, Accessori e Ricambi), quindi 5 macrovoci, si riesce a presentare una trentina di categorie in maniera esaustiPersonalizzazione Pagina Prodottova.
Il Builder permette di eseguire anche altre personalizzazioni e tra queste quella della pagina prodotto; se guardate l’immagine seguente trovate due pagine prodotto affiancate che sono simili ma non uguali, perché innanzitutto pur essendo uguale la struttura abbiamo automatizzato in maniera che se nella pagina prodotto con un apposito modulo viene montato un video (parte a destra nell’immagine) il blocco degli accessori si stringe in tre colonne, altrimenti si estende in quattro colonne, per tutta la larghezza della pagina.
Uno degli altri aspetti fondamentali di disporre nel tema grafico un Builder tipo quello di LEO THEME è la possibilità di avere, nello stesso Shop, pagine completamente diverse, quindi possiamo passare dalla pagina classica strutturata in verticale, con foto a sinistra e blocco di testo a destra, a una pagina con due foto. Per esempio nel caso dell'abbigliamento con un builder del genere possiamo fare una pagina con 4 o 6 foto già aperte, quindi l'utente che sta vedendo un capo d'abbigliamento lo può vedere davanti, di fianco, indossato da dietro e può vederne anche particolari come tasche, tessuto ecc.
Builder come quelli di LEO THEME offrono una serie di funzioni aggiuntive che sono precluse dal solo PrestaShop, salvo integrarle con specifici moduli: una possibilità è avere il modulo per le recensioni sui prodotti, che è un servizio integrativo.
Un’altra possibilità è offerta dal modulo per la Lista dei desideri, ossia il poter archiviare da qualche parte i prodotti che sono di interesse e quindi rivederli tutti assieme, magari per farne un confronto.
Altra cosa che fanno questi bellissimi Builder è che creano una cosa molto particolare che vedete in basso a sinistra nell’immagine seguente: si tratta di un elemento che è insieme un carrello e un blocco riassuntivo del prodotto, che può essere collocato non solo in basso, ma anche a destra o a sinistra. Questo permette non solo cosa ha comprato, ma anche una descrizione.
I Builder possono anche intervenire sul processo di acquisto: PrestaShop si è adeguato con le ultime versioni a quello che è lo standard diffuso da Magento a Wordpress, Shopify; bene o male tutti i carrelli ormai sono composti da un blocco di sinistra stabile e da uno di destra che è il riassunto del carrello.
Il fatto di utilizzare un tema con Builder consente di avere un blocco tipo quello che vedete nell’immagine precedente, ossia sviluppato in orizzontale anziché in verticale. PrestaShop lo fa in verticale, ma ce ne sono alcuni che diventano orizzontali.
Altra impostazione possibile con il Builder è quella che vedete nell’immagine seguente, sempre basata su LEO THEME: la finestra è diversa perché pur essendoci le tre colonne orizzontali, è stato adottato un accorgimento completamente diverso che permette di mostrare direttamente all’utente i componenti del pacchetto, in quanto viene proposto un prodotto composto da tre prodotti uguali. Potrebbero anche essere tre prodotti diversi e in quel caso anziché un tab ce ne sarebbero tre sovrapposti.
Ci siamo permessi di avere tre colonne su PC Desktop, che nella visualizzazione mobile diventano due quindi il blocco di acquisto va sotto e sullo smartphone i tre blocchi sono uno sopra all’altro.
Il sito è sato strutturato in modo che se si guarda il sito da mobile, per prima si vede la foto, per secondo il blocco di acquisto e per terzo ed ultimo il blocco che è quello centrale nella visualizzazione Desktop.
Con il builder si può anche avere degli shop-code, ossia si può creare un blocco di testo (ad esempio “riassunto delle condizioni di spedizione”) e aggiungerlo da codice a tutte le pagine di prodotto.
Andiamo oltre e vediamo l’immagine seguente, che propone un altro tipo di pagina prodotto personalizzata dove, sfruttando una tecnica simile a quella utilizzata nell’esempio dei ricambi per biciclette (tre figure indietro) si vanno a proporre i “prodotti correlati”; in questo caso si tratta di un sito per modellismo dove per ogni pagina prodotto vi sono, in basso, dei prodotti che potrebbero interessare il visitatore e, nello specifico, essendo la pagina prodotto relativa a un listello in legno, sotto ci sono 4 altri listelli simili.
Da qui è possibile vedere anche una descrizione miniatura del prodotto e, cliccando sul rispettivo pulsante accanto al prezzo, procedere direttamente all’acquisto aggiungendo al carrello la quantità desiderata, senza necessariamente andare a visitare la pagina corrispondente e perdere la pagina prodotto momentaneamente aperta, che potrebbe poi diventare difficile ritrovare se si passano tante pagine. Rimane comunque possibile visitare le pagine singole.
Vedete quindi come il tema grafico non sia del tutto casuale o poco rilevante, perché ad esempio deve essere accattivante e deve attrarre anche per le funzioni accessorie aggiunte e descritte nei precedenti paragrafi; inoltre deve rispondere all’esigenza dell’utente di visitare con facilità le pagine e possibilmente, da una singola pagina, accedere a prodotti correlati. Il tutto in tempi rapidi, giacché l’utente medio non vuole dedicare troppo tempo alla ricerca e se su un sito deve perdere troppo tempo (anche più di un minuto è motivo di passaggio ad altri Shop…) va a finire che passa a un altro.
