All’interno di questa guida andremo a vedere come poter realizzare un sito web e-commerce attraverso Framework360.
Per prima cosa è opportuno distinguere se vogliamo creare un sito web e-commerce con un singolo prodotto o con molteplici prodotti. Nella prima casistica, ovvero, qualora volessimo vendere un singolo prodotto, ci basterà andare nella voce Checkout del menù principale di Framework360 impostare il checkout ed inserire manualmente il nostro prodotto; di questo ce ne siamo occupati in una guida apposita che potrai consultare cliccando qui.
All’interno di questa guida, invece, ci occuperemo di come realizzare un sito web e-commerce per la vendita di molteplici prodotti.
Step 1: Installiamo il plugin Ecommerce
Per prima cosa dobbiamo installare il plugin Ecommerce, per fare ciò rechiamoci nella voce Plugin del menù principale di Framework360 seguendo i seguenti passaggi:
Personalizzazione > Plugin
Una volta all’interno della scherma dei plugin ricerchiamo, attraverso l’apposita aria per la ricerca, il plugin Ecommerce ed installiamolo.
Una volta installato il plugin all’interno del menù principale di Framework360 si aprirà una nuova sezione chiamata, appunto, Ecommerce attraverso la quale potremmo ampliare il nostro sito web con tutte le funzionalità multiprodotto.
Step 2: Impostiamo le preferenze del plugin Ecommerce
Dopo aver installato il plugin Ecommerce ci dobbiamo recare nella sezione Preferenze Plugin del menù principale di Framework360 ed andare all’interno della voce Preferenze Ecommerce seguendo i seguenti passaggi:
Personalizzazione > Preferenze Plugin > Ecommerce
Una volta all’interno della pagina di personalizzazione delle Preferenze Ecommerce, attraverso la voce Sistema recensioni potremmo decidere se attivare o meno la possibilità di far lasciare le recensioni ai nostri clienti.
Mentre, andando sulla voce Modera recensioni potremmo approvare noi personalmente le recensioni lasciate dai clienti prima dell’effettiva pubblicazione sul sito.
Infine, attraverso la voce Aggiornamento automatico del magazzino potremmo decidere se il magazzino dovrà scalare la quantità del venduto in automatico nel momento in cui il cliente effettua l’ordine o nel momento in cui l’ordine risulta pagato.
Step 3: Aggiungiamo un prodotto al nostro E-commerce
Per poter aggiungere un prodotto al nostro E-commerce rechiamoci all’interno della voce del menù principale di Framework360 Prodotti seguendo i seguenti passaggi:
Ecommerce > Prodotti
Una volta all’interno nella schermata Prodotti clicchiamo il pulsante verde in alto a destra Aggiungi.
All’interno della schermata di creazione del prodotto abbiamo diversi tab che ci permetto di personalizzare in maniera accurata la creazione del nostro prodotto.
TAB PRODOTTO
All’interno del tab Prodotto possiamo aggiungere:
- il nome del prodotto;
- la categoria di rifermento (tra un attimo ci occuperemo anche dell’aspetto della creazione della categoria);
- il prezzo;
- l’eventuale imposta da applicare al prezzo;
- Un eventuale sconto dell’articolo e il limite temporale dello sconto;
- la quantità di magazzino del prodotto;
- la quantità minima di prodotto acquistabile (utile per i siti che si occupano di vendita all’ingrosso);
- la descrizione breve e la descrizione estesa del prodotto;
- decidere se mettere in evidenza il prodotto;
- la tipologia di prodotto (standard, digitale o buono regalo);
- il codice del prodotto;
- l’EAN;
- Il peso del prodotto.
TAB ATRIBUTI E VARIAZIONI
Mentre, spostandoci nel tab Attributi e Variazioni possiamo andare a selezionare gli eventuali attributi del prodotto se il prodotto presenta delle variazioni, per esempio, di taglia o colore.
Per poter inserire degli attributi al nostro prodotto vi è la necessità che tali attributi siano stati creati a monte all’interno della apposita aria del menù principale di Framework360 chiamata Attributi. Per poter raggiungere l’area Attributi dobbiamo recarci sul menù principale di Framework260 e seguire i seguenti passaggi:
Ecommerce > Attributi
Una volta all’interno dell’area Attributi per poter aggiungere un nuovo attributo clicchiamo sul pulsante verde in alto a destra Aggiungi. A questo punto si aprirà la schermata di creazione dell’attributo in cui possiamo realizzare e definire variazione da noi desiderata.
Dopo aver creato il nostro attributo possiamo ritornare all’interno del tab Attributi e variazioni, presente all’interno della scherma di creazione prodotto in cui eravamo precedentemente, ed andare a selezionare l’attributo creato. Nella figura successiva vediamo un esempio in cui stiamo andando a selezionare l’attributo colore del nostro prodotto:
Una volta selezionato l’attributo desiderato, continuando a scorrere all’interno del tab Attributi e Variazioni potremmo andare ad inserire un’immagine, il codice, la quantità e il prezzo di ogni variante del nostro attributo. Nell’esempio rappresentato abbiamo la possibilità di inserire l’immagine del prodotto di colore rosso, l’immagine del prodotto di colore verde, e i relativi codici, quantità e prezzi, se quest’ultimi dovessero variare rispetto a quanto inserito nel tab Prodotto visto in precedenza.
TAB ARTICOLI COLLEGATI
All’interno del tab Articoli Collegati abbiamo la possibilità di andare ad inserire eventuali articoli collegati in:
- Up-Sell, ovvero, inserire un upgrade del prodotto (per esempio, se il prodotto in questione è un modello di scarpa l’up-sell potrebbe essere un modello di scarpa simile ma più costoso), verrà proposto al cliente di acquistare l’upgrade al posto del prodotto che sta guardando;
- Cross-Sell, ovvero, inserire un prodotto correlato a quello che il cliente sta guardando (per esempio, se il prodotto in questione è un modello di scarpa il cross-sell potrebbe essere un paio di calzini), verrà proposto al cliente la combo di acquisto di entrambi i prodotti.
TAB IMMAGINI
Nel tab immagini abbiamo la possibilità di caricare diverse immagini del prodotto. Ricordiamo che per inserire immagini differenti in base ad un determinato attributo, come visto in precedenza, dovremmo andare nel tab Attributi e Variazioni.
TAB SEO
Nel tal SEO abbiamo la possibilità di inserire un TAG Title ed un TAG Description per andare a decidere come apparirà il prodotto sul motore di ricerca.
TAB SOCIAL
Infine, all’interno del tab Social possiamo andare a decidere come il nostro prodotto apparirà sui social, quindi, stesso principio che abbiamo visto per il tab dedicato alla SEO ma per i Social Network.
Step 3: Andiamo a creare le categorie e sottocategorie dei nostri prodotti
Su come creare le categorie e le sottocategorie dei nostri prodotti abbiamo realizzato un articolo apposito che ti invito a consultare cliccando qui.
Step 4: Aggiungiamo i prodotti sul sito per renderli acquistabili
Una volta creati i prodotti non ci resta che andarli ad inserire sul sito web per renderli acquistabili.
Per prima cosa dobbiamo recarci sulla pagina del sito web all’interno della quale vogliamo far apparire i nostri prodotti che, per esempio, potrebbe essere l’home page del sito. Per fare questo rechiamoci all’interno della voce Pagine del menù principale di Framework360 seguendo i seguenti passaggi:
Sito Web > Pagine
Una volta all’interno della schermata riepilogativa di tutte le pagine del sito web andiamo a cliccare sulla pagina in cui vogliamo inserire i nostri prodotti per modificarla.
Bene a questo punto siamo all’interno della schermata di modifica della pagina da noi selezionata, andiamo ora ad aggiungere una riga e, attraverso il visual builder di Framework360, inseriamo all’interno della riga il blocco Lista Prodotti (presente all’interno del tab Ecommerce) come mostrato nelle figure successive:
A questo punto Framwork360 ci dirà che è necessario creare una struttura del blocco, per fare ciò rechiamoci all’interno del tab Struttura per creare una nuova struttura o importare una struttura precedentemente creata come mostrato nella figura successiva:
Una volta definita la nostra struttura se volessimo modificarne la visualizzazione (per esempio, definire se vogliamo che i prodotti devono apparire all’interno di una griglia o di un carosello e quanti prodotti devono essere visualizzati all’interno della griglia o del carosello nei vari posizionamenti cellulare, tablet e pc) dovremmo recarci all’interno del tab Generali alla voce Visualizzazione.
Step 5: Modifichiamo la pagina del prodotto
Una volta creato il prodotto Framework360 ci creerà in automatico la pagina in cui verrà visualizzato il prodotto, se volessimo modificare questa pagina non dovremmo fare altro che andare alla voce Pagine presente all’interno del menù principale di Framework360 seguendo i seguenti passaggi:
Sito Web > Pagine
Una volta all’interno della voce Pagine andiamo a ricercare la pagina del nostro prodotto e cliccandoci su potremmo modificarla attraverso il visual builder di Framework360.
Oppure, se non volessimo modificare manualmente le grafiche delle nostre pagine prodotto potremmo andare ad installare uno dei tantissimi template dedicati all’e-commerce che Framework360 ci mette a disposizione. Per cambiare il template ci dovremmo recare all’interno della voce Temi del menù principale di Framework360 seguendo i seguenti passaggi:
Personalizzazione > Temi
Step 6: Aggiungiamo il carrello all’interno del menù principale
Andiamo a vedere ora come poter aggiungere all’interno del menù del nostro sito, ovvero nell’header del sito, il carrello. Per fare questo rechiamoci all’interno della voce Blocchi Globali del menù principale di Framework360 seguendo i seguenti passaggi:
Sito Web > Blocchi Globali
Una volta all’interno della schermata dei Blocchi Globali andiamo a cliccare sul blocco Menù Principale per andarlo a modificare. A questo punto inseriamo all’interno del nostro menù una nuova colonna e andiamo a spostarci al suo interno, attraverso il visual builder di Framework360, il blocco Carrello come mostrato nella figura successiva. Il blocco carrello lo ritroviamo all’interno del tab Pagamenti del visual builder.
Dopo aver inserito il blocco Carrello andiamo a settarlo a nostro piacimento, sempre attraverso il visual builder, ed il gioco è fatto!
Se vuoi scoprire come realizzare l’header del tuo sito web con Framework360 abbiamo realizzato una guida apposita che puoi consultare cliccando qui.
Step 7: Impostiamo il Checkout
È arrivato il momento di impostare il Checkout. Un checkout è l’ultima parte di un sito web e-commerce che permette al cliente di acquistare i prodotti che ha precedentemente inserito nel carrello o che ad ogni modo è intenzionato ad acquistare.
Su come impostare il Checkout correttamente abbiamo realizzato un giuda apposita che ti invito a consultare cliccando qui.
Step 8: Colleghiamo i metodi di pagamento PayPal e Stripe
Bene, siamo arrivati all’ultimo passaggio della fase di acquisto, ovvero, il pagamento. Per poter permettere al cliente di effettuare il pagamento dobbiamo collegare al nostro sito web e-commerce un metodo di pagamento; i metodi maggiormente utilizzati sono PayPal e Stripe. Abbiamo realizzato due guide apposite all’interno delle quali spieghiamo come poter collegare a Framework360 questi due metodi di pagamento, per poterle consultare clicca sui link di seguito riportati:
- Come collegare PayPal al nostro sito web realizzato su Framework360
- Come collegare Stripe al nostro sito web realizzato su Framework360
Step 9: Creiamo un coupon di sconto
In ultimo, è opportuno specificare che Framework360 ci dà anche la possibilità di creare un coupon di sconto che i clienti possono utilizzare in fase di acquisto sul nostro e-commerce. Anche su questo argomento per maggiore chiarezza abbiamo ritenuto opportuno realizzare una guida apposita che potrai consultare cliccando qui.
