In questa lezione andremo a personalizzare l'interfaccia utente del nostro e-commerce shopify.

Ovviamente, come puoi immaginare, è difficile racchiudere in una singola lezione tutte le informazioni necessarie per poterlo fare.

Quindi il mio obiettivo è poterti dare tutta la mia esperienza e tutti gli strumenti che io solitamente uso per revisionare e implementare al meglio l'interfaccia grafica e tutte quelle che sono poi le best practice lato per poter creare un e-commerce bello ma soprattutto funzionale che converta.

Andiamo quindi nella sezione negozi online dove appunto possiamo atterrare direttamente sulla sezione Temi.

Devi infatti ricordarti che shopify um funziona, se così vogliamo dire, grazie alla sua capacità di stand, aver standardizzato tutta la parte di back end di codice puro e crudo di infrastruttura e di aver dato la possibilità, in maniera anche abbastanza semplice e agevole di personalizzare il frontend um come come funziona il um tutta la parte appunto di personalizzazione.

Come vedi qui ci sono diversi temi che vanno a diciamo creare ciò che l'utente vede.

Quindi, cliccando su visualizza il tuo negozio, noi possiamo vedere um ciò che l'utente vede um a livello appunto finale.

In questo caso, appunto questo e-commerce che vende prodotti relativi a tavole da surf piuttosto che skateboard e snowboard.

E possiamo appunto andare a personalizzare tutto da l'interfaccia appunto dell'homepage alla singola product page e così via.

Quindi possiamo insomma personalizzare tutto come funziona? Beh, semplicemente noi all'inizio vediamo abbiamo al nostro interno un tema base che è il tema che nel momento in cui appunto apriamo il nostro primo e-commerce um ci verrà mostrata in questo modo.

Quindi, qualora tu abbia appena aperto il tuo e-commerce, non spaventarti se vedi se vedi questo è il tema è il tema base tema base che può essere assolutamente personalizzato.

Quindi, qualora noi clicchiamo personalizza, ecco che ci si apre il tema.

Il tema uno quindi qui c'è la possibilità attraverso questo builder di selezionare tutte le varie sezioni che vogliamo andare a modificare e possiamo appunto andarle a nascondere, eliminare, spostare um a seconda di dove preferiamo e poi possiamo andare a appunto personalizzare ogni parte.

In questo caso vogliamo sostituire questo video.

Possiamo inserire un video da YouTube? Vogliamo inserire qui un prodotto? Selezioniamo il prodotto da da mostrare, quindi in questo caso le ginocchiere, ecco che vediamo che appare subito subito Questo non ci piace come come diciamo sta apparendo beh, ci sta perché appunto dobbiamo aggiungere la spazzatura per le immagini piuttosto che andarlo a personalizzare al all'interno per poterlo mostrare al meglio.

Quindi, um il diciamo il nostro builder dei temi è molto, molto semplice e molto intuitivo.

Ovviamente possiamo sia personalizzare il desktop che soprattutto aggiungo la parte mobile.

Ecco come infatti già la sezione di prima che non ci piaceva lato desktop, lato mobile appare molto più utilizzabile, molto più più consona a allo stile.

Però ecco, senza ombra di dubbio lavorare su un tema um ci richiede diverso tempo.

Concludo rapidamente questo tour cliccando qui, perché appunto possiamo personalizzare le pagine, prodotto le collezioni varie pagine interne e questa cosa la possiamo fare a seconda della tipologia di store che abbiamo, quindi in questo caso il predefinito che è la sezione Italia, ma possiamo anche andarla per personalizzare per i differenti paesi.

Ecco perché quando si inizia a lavorare su shopify, ripeto, a meno che non si abbia uno stile molto consono a quello di um di down, si cerca di approcciarsi con i temi gratuiti o a pagamento del Team Store di Shopify.

Ecco che appunto, sempre nella sezione temi abbiamo un un link rapido a quella che è la sezione temi di shopify, dove possiamo andare a filtrare in questo momento oltre centosessanta temi presenti? Questi sono temi eh già approvati dal team di shopify stesso da chi vengo? Da chi sono stati sviluppati sia da shopify, ma principalmente da agenzie che appunto, dopo una lunga serie di controlli fatta dal team di shopify, hanno la possibilità di proporre qui il proprio tema.

E chiaramente guadagnare perché alcuni sono a pagamento, anzi la maggior parte vedi solo dodici sono gratuiti e li possiamo filtrare direttamente da qui e sono spesso quelli appunto pubblicati dal team di shopify, anche se devo dire che ce ne sono diversi, molti molto, molto, molto carini.

Um come per esempio origin, per chi vuole magari lavorare nel settore del fashion, qui ci sono anche appunto degli degli, degli suggerimenti e possiamo cliccare il store per vedere come viene um viene visto dal punto lato utente questo reset sia il lato desktop che lato mobile bisogna vedere un po' tutta l' l'interfaccia come vengono le come si vedono tutte le varie animazioni, come funziona il carrello e così via.

Um tornando quindi a noi abbiamo i temi gratuiti ma il grosso fa parte dei temi chiaramente a pagamento.

Questo lo dico in maniera molto trasparente.

Se chiaramente vogliamo avere un approccio go to market molto rapido um grazie diciamo a questi temi io ho visto e-commerce lanciare in meno di un mese um dall'altra parte se ci sono progetti enterprise che richiedono sviluppi personalizzati, questi chiaramente um richiedono magari anche diversi mesi di sviluppo per poter uscire, quindi dipende sempre un po' da da chi utilizza questi questi temi e con quale con quale obiettivo? Tornando alla parte di x ora noi appunto come abbiamo visto prima, filtrare i temi sia per pricing ma soprattutto per industrie.

Questo a mio parere è molto comodo anche per chi magari vuole farsi il tema custom insieme magari a un team di sviluppatori o supportato da un'agenzia andare a vedere per esempio sulla parte di abbigliamento quelli che sono un po' degli spunti degli stimoli perché questi questi co- questi temi hanno anche tante funzionalità.

Eh già um predefinite importate.

Quindi se noi qua clicchiamo su possiamo vedere che c'è lo leggi, quindi se entri nel negozio ti chiederà appunto l'età eh e a seconda appunto dei degli stili.

Questo è uno stile molto, molto moderno e però ecco, vediamo che sicuramente può essere personalizzato per magari chi ha uno stile molto, molto originale.

Um, una cosa interessante è che per ogni tema ci sono anche più più stili, quindi questo stesso tema ti permette, una volta acquistato, di poterlo gestire su più varianti.

Ecco le di cui prima quindi um sullo stile stylish non c'era sullo stile linea che in questo caso è all'interno appunto riproposto come un negozio che vende um vini e vini principalmente.

Ecco che con piccole modifiche eh, lo stesso stile molto originale e dinamico viene riproposto all'interno di questo di questo e-commerce che personalmente mi piace mi piace tanto e rispetto a un che abbiamo visto in precedenza, ecco che si inizia a lavorare su qualcosa di molto più specifico nel momento in cui troviamo il tema che più ci piace ritorniamo all'area temi noi abbiamo due scelte o andarlo ad acquistare o, come suggerito da shock fai di provarlo.

Nel momento in cui clicchiamo tra i team, ce lo ritroveremo all'interno del nostro e-commerce, inserito appunto come prova del tema.

E qui la cosa secondo me fantastica è proprio la possibilità di andare a personalizzare il tema che va a recuperare le informazioni dal nostro e-commerce.

Quindi, a parte alcune sezioni come in questo caso, lo slider iniziale però può andare a recuperare in maniera automatica e dinamica i i i prodotti, per esempio.

Quindi andiamo per esempio a entrare qui e andare su product, che è la parte principale.

Noi selezioniamo un prodotto, non può essere questo lo andiamo a selezionare.

Ecco che il nostro, diciamo tema va a recuperarsi tutte le informazioni.

E anche questo che è un tema diciamo a pagamento, ma molto diciamo minimal riesce a recuperarsi i le informazioni, poi qui possiamo appunto andare a modificare la s.

La tipologia di layout in questo caso è carosello, ma possiamo fare a due colonne due colonne.

Penso che sia prevalentemente sul desktop um aument- inserire o meno il video loop.

Quindi ecco che si va a lavorare su un tema più um più attuale, più originale, più magari affine al nostro.

Al nostro tipo di di lavoro possiamo modificare, per esempio anche qui la barra di annuncio la bar cliccando qui andando a modificare promozione di Natale e um, ecco, questo sicuramente è uno dei miei consigli migliori andare già all'interno appunto dei temi a lavorare.

Una cosa che troviamo nella sezione temi è la parte di impostazione di temi, quindi possiamo direttamente inserire una volta per tutti quelli che sono per esempio, i colori, le immagini, i loghi, i colori principali um um piuttosto che il tipo di fondi che andiamo a usare i link ai social media e anche questo verrà sovrascritto in maniera automatica su tutto eh? Su su tutte le informazioni all'interno del nostro sito e infine un'altra cosa molto molto cioè abbastanza recente sono le incorporazione app app, ovvero ci sono diverse app, alcune delle quali le vedremo anche adesso, tipo page fly che vi permette di andare a personalizzare direttamente il tema inserendo delle pagine.

Ora qui non lo vediamo perché chiaramente questo è un tema a pagamento in prova, quindi non l'abbiamo ancora non possiamo ancora inserirle, ma se noi andiamo a personalizzare il tema attualmente attivo, andiamo su integrazione, app, incorporazione app ecco che vediamo che ci sono delle app che sono state già incorporate e che quindi nel momento in cui andiamo a modificare le singole sezioni, noi possiamo aggiungere nuove sezioni da qui, tra cui anche quindi qua vedi tutte le varie sezioni che possiamo inserire, tra cui anche sezioni che vengono proposte dalle app stesse.

Quindi in questo caso, se vogliamo inserire un um proposto da da quest'app, noi l'abbiamo inserita qui e lo possiamo andare a personalizzare.

Ecco che grazie a quest'app che è già stata predefinita e pre configurata, ci ritroviamo tutte queste prese da google all'interno del nostro e-commerce.

Questa è una cosa veramente valida perché non non dà veramente limiti alla alla creatività di una persona che vuole personalizzare l'e-commerce in in questo senso, se vogliamo concludere l'accezione diciamo dei dei temi, sicuramente non possiamo non parlare di tutte quelle app che chiaramente ci aiutano a personalizzare le nostre pagine.

Ne abbiamo viste alcune prima, ma le vediamo ancora più nello specifico direttamente sull'app store.

Um se noi cerchiamo page builder, ecco che vedremo una serie di app che oltre al tema a pagamento, come abbiam visto, ci aiutano a ad aumentare l'interfaccia del del nostro, del nostro e-commerce.

Le più usate sono queste prime tre shogun page fly e jame pages.

Ce ne sono anche altre, ognuno poi c'è chi si trova meglio con una piuttosto che con un'altra.

Ecco, fate attenzione a questo logo Bild for shopify che anche questa è una novità abbastanza recente perché sono le app che meglio si integrano a livello di codice con appunto il vostro shop, quindi magari con un jam pages riuscite a creare delle delle pagine belle, ma che magari vi rallentano di non poco l'e-commerce questo ve lo dico perché, come vedete sono anche le le app più spinte da shopify stesso.

La capacità di Revie.

Vedete come è spinta più in alto rispetto a Jame Pages che ha più più recensioni perché effettivamente Shopify sta cercando di fare tanta selezione su tutti coloro che propongono app all'interno del proprio App Store per cercare di mantenere lineare e omogenea questa cosa? Um per concludere, quindi, cosa abbiamo parlato a livello di temi per l'e-commerce su shopify? Beh, semplicemente che nel momento in cui noi abbiamo il nostro e-commerce su shopify, il primo tema che ci viene proposto è il tema che è molto flessibile molto um diciamo si auto aggiorna, come potete vedere direttamente.

Da qui però necessita di notevole personalizzazione, quindi, a meno che si abbia già magari un anche su sigma, un design da tenere in considerazione da copiare um con delle linee guida molto specifiche, ecco che lo si può andare a fare tra l'altro una cosa che non ho fatto vedere è la possibilità ovviamente, di andare a modificare il codice.

Quindi che sia o che sia un qualsiasi altro tema, anche quelli a pagamento.

Noi possiamo poi andare all'interno di ogni sezione del codice ad andare a modificare per esempio i footer con tutti i vari componenti che lo compongono e quindi farci proprio effettivamente un po' più da smanettoni il il tema come co- come preferiamo.

Diciamo che questo è un po' per le persone più avanzate che gli piace andare a entrare in in in profondità su questo e anche per tutti quei progetti che hanno chiaramente budget per poterlo fare.

Per tutti gli altri invece, o si utilizza done o si utilizza downe con delle app, come abbiamo visto prima che troviamo sull'appstore a livello di personalizzazione di oppure si utilizza uno dei temi gratuiti o a pagamento presenti nel team store che più ci piacciono