1.0 Introduzione
La maggior parte dei visitatori abbandona la cassa per il prodotto desiderato semplicemente perché trova il processo complesso e lungo da completare. Questo porta a un numero sempre maggiore di carrelli abbandonati. Per controllare i tassi di uscita e di abbandono del carrello, Knowband ha offerto OpenCart One Page Checkout Pro Plugin per negozi OpenCart. Inoltre, implementando One Page Checkout per il tuo sito e-commerce, puoi migliorare i tassi di conversione, poiché sostituisce la pagina di pagamento in più fasi con un checkout a pagina singola.
Visualizzazione mobile:
Caratteristiche principali dell’estensione One Page Checkout di OpenCart:
- L’estensione offre la funzionalità di pagamento come ospite, grazie alla quale gli utenti possono completare facilmente e rapidamente i propri ordini come clienti ospiti, senza dover creare un nuovo account sul negozio online.
- L’estensione OpenCart Fast Checkout consente ai clienti di accedere rapidamente al sito web utilizzando i propri account Google, Facebook e PayPal.
- I campi nella pagina di pagamento possono essere facilmente personalizzati dall’amministratore dal back-end dell’estensione OpenCart One Page Checkout Pro. L’amministratore del negozio può mostrare o nascondere qualsiasi campo dalla pagina di pagamento, oppure renderli facoltativi o obbligatori per gli utenti. L’amministratore può anche riorganizzare i campi di posizione con la funzionalità drag-and-drop.
- Il proprietario del negozio può personalizzare facilmente l’aspetto della pagina di pagamento, ad esempio modificando il colore dei pulsanti, il colore dello sfondo dei pulsanti, il colore del testo, ecc.
- OpenCart One Page Supercheckout offre compatibilità multi-negozio e multilingue.
- L’estensione OpenCart One Step Checkout supporta quasi tutti i principali metodi di spedizione e pagamento, aumentando la fiducia dei clienti nel scegliere il metodo desiderato dalla pagina di pagamento.
- L’e-merchant può applicare uno qualsiasi dei layout di pagamento disponibili tra 3 diversi layout: a 1 colonna, a 2 colonne o a 3 colonne. I campi possono essere facilmente riorganizzati tramite trascinamento.
- Il modulo OpenCart Quick Checkout offre l’integrazione con MailChimp, Klaviyo e SendinBlue, consentendoti di sincronizzare automaticamente il database dei tuoi utenti con i tuoi account senza alcun intervento manuale.
- L’e-merchant può anche personalizzare l’aspetto dell’estensione tramite CSS e JS personalizzati.
- Il modulo OpenCart Responsive One Step Checkout offre la funzionalità Modalità di test tramite la quale il proprietario del negozio può controllare e visualizzare le personalizzazioni effettuate prima di renderle attive sul sito web.
- Il modulo OpenCart Simplified Checkout offre la funzionalità Ship2Pay, che consente al proprietario del negozio di associare determinati metodi di pagamento ai metodi di consegna selezionati. Questa funzionalità nasconde tutti gli altri metodi di pagamento quando si seleziona un metodo di consegna specifico e mostra all’utente solo i metodi di pagamento associati al metodo di consegna selezionato.
2.0 Guida all’installazione di Estensione OpenCart One Page Checkout
Prima di iniziare il processo di installazione, è necessario acquistare il Estensione OpenCart One Page Checkout dallo store Knowband. Una volta effettuato l’acquisto, riceverai i seguenti file all’indirizzo email registrato.
- Codice sorgente dell’estensione OpenCart One Page Checkout in formato file compresso.
- Manuale utente dell’estensione OpenCart One Page Checkout.
Ora per installare OpenCart Single Page Checkout sul tuo negozio online, segui i passaggi indicati: 1. Decomprimi il file zip. Otterrai le cartelle mostrate nell’immagine qui sotto.
2. Copiare tutte le cartelle del file zip nella directory principale di OpenCart tramite il gestore FTP.
- Dopo aver decompresso la cartella, troverai un file supercheckout_pro.ocmod.xml come mostrato di seguito:
- Ora nel pannello di amministrazione, fai clic su Estensioni nel menu a sinistra. Quindi fai clic su Installazione estensioni ( Home->estensione).
- Ora carica il file supercheckout_pro.ocmod.xml. Una volta caricato il file, verrà visualizzato un messaggio di conferma.
- Dopo aver caricato il file vai su Home->Modifica
- Troverai un file con il nome Supercheckout Pro v2.8 (ciò significa che il tuo ocmod è stato installato correttamente). Fai clic sull’icona “+” corrispondente per abilitarlo. L’icona verde diventa rossa, come mostrato di seguito.
- Infine, clicca sul pulsante Aggiorna (obbligatorio).
Così, OpenCart One Page Checkout Pro Ora è installato correttamente ed è pronto per essere utilizzato nel tuo negozio. Vai al menu di amministrazione e clicca su Estensioni e poi su Moduli. Clicca sul pulsante Configura accanto a Knowband Supercheckout.
3.0 Interfaccia di amministrazione di Modulo di pagamento reattivo in un passaggio di OpenCart
Subito dopo aver installato One Page Checkout per il sito web OpenCart, puoi configurare i campi del modulo di pagamento in base alle tue esigenze. Devi navigare tra le impostazioni nell’ordine indicato: Pannello di Amministrazione > Estensioni > moduli > Knowband Supercheckout
L’interfaccia di amministrazione facile da capire di OpenCart One Page Checkout Pro è diviso in dieci sezioni, ovvero: 1. Impostazioni generali 2. Personalizzatore 3. Impostazioni di accesso 4. Indirizzo di pagamento 5. Indirizzo di spedizione 6. Metodo di spedizione 7. Ship2Pay 8. Metodo di pagamento 9. Carrello 10. Design 11. Newsletter Ciascuna di queste sezioni è stata discussa di seguito:
3.1 Impostazioni generali
- Attiva / Disattiva: Utilizzando questa opzione, è possibile abilitare o disabilitare la funzionalità completa del OpenCart One Page Checkout Pro plugin da OFF a ON.
- Abilita l’opzione Newsletter: Puoi abilitare o disabilitare l’opzione Newsletter nella pagina Supercheckout. Una volta abilitato questo pulsante, si verificheranno i seguenti casi: a.) L’opzione Newsletter sarà visibile ai clienti che hanno effettuato il checkout come Ospite, solo se hai abilitato l’opzione Registra Ospite Automaticamente. b.) L’opzione Newsletter sarà sempre visibile ai clienti che stanno creando un nuovo account. c.) L’opzione Newsletter non sarà mai visibile ai clienti che hanno effettuato l’accesso.
- Registra automaticamente l’ospite: Puoi abilitare questa opzione per registrare automaticamente i clienti ospiti nel tuo negozio. Abilitando questa opzione, puoi registrare i tuoi clienti nel negozio e inviare loro una password generata automaticamente via email.
- Registra conto: Abilitando questo campo, puoi visualizzare un campo password nella pagina Supercheckout, in modo che i nuovi utenti possano impostare facilmente la password desiderata per il proprio account.
- Seleziona l’opzione predefinita al momento del pagamento: Con questa opzione puoi impostare un’opzione predefinita nella sezione di accesso del tuo OpenCart Supercheckout di una pagina uscire dalle opzioni come Ospite, Accedi e Registrati.
- Disabilita ospite: È possibile abilitare o disabilitare la funzionalità ospite per gli utenti nella sezione di accesso di One Page Checkout.
- Aggiungi stile personalizzato: Con questa opzione, puoi aggiungere o includere uno stile personalizzato alla pagina Supercheckout. Per applicare del codice CSS personalizzato alla pagina Supercheckout, puoi scriverlo nella casella di testo a destra dell’etichetta “Aggiungi stile personalizzato”. Ad esempio, puoi cambiare il colore dei pulsanti nella pagina Supercheckout.
- Aggiungi un importo minimo per mostrare il banner di spedizione gratuita: Da questa scheda, l’amministratore può aggiungere un importo minimo richiesto, superato il quale i clienti avranno diritto alla spedizione gratuita del loro ordine.
- Abilita rilevamento automatico del Paese: Dopo aver abilitato questa funzione, l’estensione rileverà e inserirà automaticamente il paese dell’utente nella sezione relativa al paese.
- Validazione in linea: Grazie a questa funzionalità, l’estensione visualizza un errore ogni volta che l’utente omette di compilare un campo obbligatorio nella pagina di pagamento.
- Abilita Google Auto-address per compilare: Non appena l’utente inizia a digitare il suo indirizzo, l’estensione suggerisce il suo indirizzo se questa funzione è abilitata.
- Abilita o disabilita il nuovo modello: Con l’estensione OpenCart One Page Checkout, il proprietario del negozio può applicare il modello di checkout nuovo o vecchio, a seconda delle sue preferenze, dalle impostazioni generali.
- Modalità di test: Questa opzione ti aiuta ad abilitare o disabilitare la funzionalità della modalità di test di questo Estensione OpenCart One Page Checkout.
- URL di prova: Una volta abilitata la modalità di test, puoi impostare un URL di supercheckout in cui testare la funzionalità del checkout in una sola pagina.
Customizer
- Colore di sfondo della barra di spedizione gratuita: Questa sezione consente di modificare il colore di sfondo della barra Spedizione gratuita nella pagina di pagamento.
- CSS e JS personalizzati: Questa sezione consente di personalizzare l’aspetto della pagina di pagamento con CSS e JS personalizzati.
3.2 Accesso
In questa scheda troverai le opzioni per configurare le opzioni di accesso a Facebook, Google e PayPal, come mostrato di seguito.
- Abilita l’accesso tramite Facebook: Con questa opzione puoi abilitare/disabilitare l’opzione di accesso tramite Facebook su One Page Checkout.
- ID app Facebook: Questa opzione consente di impostare l’ID dell’app Facebook che può essere generato utilizzando l’account dello sviluppatore Facebook.
- Segreto dell’app Facebook: Utilizzando questa opzione, imposta la chiave segreta generata utilizzando l’account dello sviluppatore Facebook.
- Abilita l’accesso Google: Con questa opzione puoi abilitare/disabilitare l’opzione Google Login su One Page Checkout.
- ID app Google: Questa opzione consente di impostare l’ID GoogleApp.
- ID client Google: Questo campo consente di impostare l’ID client Google creato dalla console Google.
- Segreto dell’app Google: Utilizzando questa opzione, puoi impostare la chiave segreta dell’app generata tramite la console Google.
- Abilita l’accesso a PayPal: Con questa opzione puoi consentire ai tuoi clienti di accedere tramite i loro account PayPal.
- ID cliente PayPal: Questa opzione ti consente di aggiungere il tuo ID cliente PayPal.
- Segreto del cliente PayPal: Questa opzione ti consente di aggiungere il tuo ID segreto del cliente PayPal.
Per istruzioni dettagliate su come generare l’ID app, la chiave segreta dell’app e l’ID client, passare alla sezione successiva.
3.2.1 Come impostare l’accesso a Facebook?
L’app di Facebook può essere creata seguendo i passaggi indicati di seguito:
1: Vai all’URL indicato: https://developers.facebook.com/apps/
2: Fare clic sul pulsante “Crea app”.
3 e 4: Seleziona il “Costruisci esperienze connesse” opzione e fare clic sul pulsante “Continua”.
5 e 6: Aggiungi “Nome visualizzato dell’app”, “Email del contatto dell’app” e scegli “Hai un account Business Manager?”, quindi fai clic sul pulsante “Crea app”.
7 e 8: Dopo aver cliccato su Crea ID app, dovrai sottoporti a un controllo di sicurezza come mostrato:
9: Fare clic sulla scheda “Impostazioni”.
Gentilmente aggiungi elimina URL di richiamata. Puoi controllare la descrizione dell’URL di callback di eliminazione da qui: https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/
10-15: Nel menu a discesa saranno disponibili due opzioni, Base e Avanzata: clicca su “Base”. Inserisci quindi “Dominio app”, “URL privacy”, “URL termini di servizio”, “Aggiungi icona”, “Seleziona categoria” e clicca sul pulsante “Salva modifiche”.
Domini app:
tuodominio.com è correggere
tuodominio.com/store è scorretto
www.dominio.com è scorretto
16: Ora clicca su “+Aggiungi piattaforma”.
17: E seleziona Sito web come Piattaforma.
18 e 19: Ora inserisci l’URL del tuo sito.
20 e 21: Fare clic su “Prodotti+” e clicca sul pulsante Imposta dalla scheda di accesso di Facebook.
22: Seleziona il web come piattaforma per l’app.
23: Aggiungi l’URL del sito e fai clic su Salva.
24-26: Fare clic su Impostazioni e aggiungere URI di reindirizzamento OAuth validi.
URI di reindirizzamento OAuth validi:
https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1
27: Seleziona il “In fase di sviluppo” opzione.
28 e 29: Scegli una categoria dal menu a discesa e clicca sul pulsante “Cambia modalità”.
30: Copia l’ID app e il segreto dell’app e incollali nei campi forniti nel modulo.
Passo finale:
1. Accedi con JavaScript SDK.
Imposta questo campo su Sì.
2. Domini consentiti per JavaScript SDK
Imposta il dominio del negozio.
Nota: qui il dominio deve essere inserito nel tipo sottostante.
3.2.2 Come impostare Google Login?
Segui i passaggi seguenti per ottenere l’ID client e il segreto client. 1. Vai al collegamento “ https://console.developers.google.com/project ”. 2. Fare clic su “Crea un progetto”.
3. Inserisci il nome del progetto e il nome dell’organizzazione desiderati e fai clic su “Crea”.
4. Vai su API Manager, clicca sul menu a sinistra, clicca su API e servizi e poi clicca su Crea credenziali.
5. Selezionare l’opzione ID client OAuth.
6. Fare clic sul pulsante “Configura schermata di consenso”. Inserire “ID e-mail”, “Nome prodotto” e quindi fare clic sul pulsante “Salva”.
7. Selezionare l’opzione Esterna e fare clic sul pulsante “Crea”,
Utilizzare il seguente URL di reindirizzamento https://your_store_url/index.php?route=supercheckout/supercheckout 8. Aggiungere il nome dell’app e l’email di supporto utente.
9. Fare clic su Aggiungi dominio e aggiungere Dominio autorizzato, quindi fare clic su Salva e continua.
10. Fare clic sul pulsante Salva e continua.
Fare clic su +Aggiungi utenti.
11. Aggiungere un nome utente e fare clic sul pulsante Aggiungi.
13. Fare clic sulla schermata Contenuto giuramento e quindi sul pulsante Pubblica Aggiungi.
16. Aggiungi gli URL e poi clicca sul pulsante Crea.
17. Copia e incolla l’ID cliente e il segreto cliente nel campo di testo mostrato di seguito nel modulo di pagamento in una pagina di Prestashop
Come generare la chiave API di Google:
1) Vai su API Manager, clicca sul menu a sinistra, clicca su API e servizi, quindi clicca su Credenziali.
2) Fare clic su Crea credenziali e quindi selezionare la chiave API.
3) Copia la chiave API e inseriscila nel campo Google App Id della pagina di accesso del modulo di amministrazione.
3.3 Indirizzo di pagamento
Questa scheda contiene le impostazioni per i campi che devono essere visualizzati nella sezione Indirizzo di pagamento o di fatturazione nella pagina di pagamento, come mostrato di seguito.
- È composto da due sezioni: quella a sinistra è riservata ai clienti ospiti, quella a destra ai clienti registrati.
- Per visualizzare/nascondere un campo nella pagina di pagamento, seleziona la casella di controllo subito a sinistra dell’etichetta Mostra.
- Per rendere un campo obbligatorio (campo obbligatorio), seleziona la casella di controllo subito a sinistra di Richiedi etichetta.
- I campi possono anche essere riorganizzati in base alle esigenze. Per riorganizzarli, basta spostare il cursore sull’icona di trascinamento e trascinare il campo nella posizione desiderata, come mostrato di seguito.
- Dopo aver salvato, i campi verranno riorganizzati in base alle modifiche.
3.4 Indirizzo di spedizione
Questa scheda contiene le impostazioni per i campi che devono essere visualizzati nella sezione Indirizzo di spedizione nella pagina di pagamento, come mostrato di seguito.
- È composto da due sezioni: quella a sinistra è riservata ai clienti ospiti, quella a destra ai clienti registrati.
- Per visualizzare/nascondere un campo nella pagina di pagamento, seleziona la casella di controllo subito a sinistra dell’etichetta Mostra.
- Per rendere un campo obbligatorio (campo obbligatorio), seleziona la casella di controllo subito a sinistra di Richiedi etichetta.
- I campi possono anche essere riorganizzati in base alle esigenze. Per riorganizzarli, basta spostare il cursore sull’icona di trascinamento e trascinare il campo nella posizione desiderata, come mostrato di seguito.
- Dopo aver salvato, i campi verranno riorganizzati in base alle modifiche.
3.5 Metodo di spedizione
Questa scheda contiene le impostazioni per il metodo di spedizione visualizzato nella pagina di pagamento. Contiene le impostazioni per abilitare/disabilitare e impostare il metodo di spedizione predefinito, come mostrato di seguito:
- Visualizza i metodi di spedizione: Con questa opzione puoi mostrare/nascondere i metodi di spedizione nella pagina di pagamento. Per farlo, devi spostare il pulsante da ON a OFF o viceversa.
- Stile di visualizzazione: Questa opzione ti consente di selezionare lo stile di visualizzazione per i metodi di spedizione che hai aggiunto al tuo sito web. Puoi scegliere uno stile tra tre opzioni: Solo testo, Solo immagine o Testo con immagini.
- Visualizza il titolo del metodo di spedizione: Con questa opzione puoi abilitare o disabilitare il titolo per i metodi di spedizione visualizzati nella pagina di pagamento.
- Seleziona un metodo di spedizione predefinito: Questa opzione ti aiuta a selezionare qualsiasi metodo come metodo di spedizione predefinito per il tuo negozio.
- Titolo: Con questa opzione, puoi impostare titoli corrispondenti a ciascuno dei metodi di spedizione aggiunti e configurati per il tuo negozio. Puoi impostare il titolo in inglese o in francese.
- Logo: Questa opzione ti consente di impostare il logo desiderato corrispondente a ciascuno dei metodi di spedizione configurati per il tuo negozio.
3.6 Ship2Pay
La funzionalità “ship2pay” offerta dal modulo OpenCart Supercheckout disabilita automaticamente i metodi di pagamento in base al metodo di spedizione selezionato dal cliente. In altre parole, l’amministratore può associare determinate opzioni di pagamento ad alcune opzioni di spedizione specifiche del negozio.
3.7 Metodo di pagamento
Questa scheda contiene le impostazioni per i metodi di pagamento mostrati nella pagina di pagamento, come l’abilitazione/disabilitazione o la selezione di un metodo predefinito.
- Visualizza i metodi di pagamento: Con questa opzione puoi mostrare/nascondere i metodi di pagamento nella pagina di pagamento. Per farlo, devi spostare il pulsante da ON a OFF o viceversa.
- Stile di visualizzazione: Questa opzione ti consente di selezionare lo stile di visualizzazione per i metodi di pagamento aggiunti al tuo sito web. Puoi scegliere uno stile tra tre opzioni: Solo testo, Solo immagine o Testo con immagini.
- Seleziona un metodo di pagamento predefinito: Questa opzione ti aiuta a selezionare qualsiasi metodo come metodo di pagamento predefinito per il tuo negozio.
- Titolo: Con questa opzione puoi impostare titoli corrispondenti a ciascuno dei metodi di pagamento aggiunti e configurati per il tuo negozio. Puoi impostare il titolo in inglese o in francese.
- Logo: Questa opzione ti consente di impostare il logo desiderato corrispondente a ciascuno dei metodi di pagamento configurati per il tuo negozio.
3.8 Carrello
In questa sezione troverai i campi del carrello divisi in due sezioni: quella a sinistra è per i clienti ospiti, mentre quella a destra è per i clienti registrati o che hanno effettuato l’accesso.
- Per visualizzare/nascondere il carrello dalla pagina di pagamento, seleziona o deseleziona la casella di controllo presente davanti all’etichetta Visualizza carrello.
- Per abilitare/disabilitare una qualsiasi colonna nel carrello, seleziona/deseleziona la casella di controllo accanto alla rispettiva colonna.
- Per abilitare/disabilitare le immagini popup per il prodotto, seleziona/deseleziona la casella di controllo davanti alla rispettiva colonna.
- Per modificare le dimensioni del popup dell’immagine, immettere la larghezza e l’altezza del popup nella casella di testo davanti all’etichetta Dimensioni immagine prodotto.
- Le opzioni Coupon, Punti Premio e Buoni possono essere disattivate o attivate selezionando/deselezionando la casella di controllo corrispondente. Si prega di notare che la casella di testo dei punti premio sarà visibile nella pagina Supercheckout solo se saranno soddisfatte le seguenti tre condizioni: a.) Il cliente deve aver effettuato l’accesso. b.) Deve avere almeno 1 punto premio nel suo account. c.) Deve avere un prodotto nel carrello acquistabile con i punti premio.
Confermare:
- Questa scheda è a sua volta divisa in due sezioni: quella a sinistra è per i clienti ospiti e quella a destra per i clienti registrati o che hanno effettuato l’accesso.
- Per abilitare la casella dei commenti per l’ordine da parte del cliente, seleziona la casella di controllo davanti all’etichetta Lascia un commento per l’ordine; per disabilitarla, deseleziona la stessa casella di controllo.
- Per accettare i termini o qualsiasi altra informazione salvata nell’amministrazione del negozio, seleziona/deseleziona la casella di controllo accanto all’etichetta Accetto le condizioni.
3.9 Scheda Progettazione
Questa scheda contiene le impostazioni per la progettazione di OpenCart One Page Checkout Pro come mostrato di seguito:
1 colonne
2 colonne
3 colonne
Newsletter 3.10
Cliccando sulla scheda Newsletter del Modulo di pagamento reattivo in un unico passaggio di OpenCart, puoi configurare le impostazioni di MailChimp, SendinBlue e Klaviyo Integrator come mostrato di seguito:
- Abilita MailChimp: Puoi abilitare o disabilitare la funzionalità MailChimp Integrator per il tuo negozio. Puoi abilitare questa opzione se desideri aumentare le iscrizioni alla newsletter per il tuo negozio.
- Chiave API di MailChimp: Questa opzione ti aiuta a impostare la chiave API di Mailchimp per acquisire le email dei clienti.
- Elenco MailChimp: Una volta configurata la chiave con questo Estensione di checkout rapido di OpenCart: puoi recuperare e selezionare l’elenco MailChimp.
Lo stesso può essere fatto per SendinBlue e Klaviyo.
4.0 Interfaccia frontale di Estensione di pagamento in un unico passaggio di OpenCart
Quando l’utente clicca sul pulsante “Aggiungi al carrello” corrispondente a un prodotto ed effettua il checkout, sullo schermo vedrà la seguente schermata di supercheckout.
Tutorial 5.0 di Opencart One Page Checkout Pro di Knowband
Per semplificare al massimo l’installazione, la configurazione e l’impostazione, abbiamo creato un tutorial dettagliato e di facile comprensione per OpenCart One Page Checkout Pro di Knowband. Questa guida passo passo ti guiderà passo dopo passo in ogni fase, dal download e installazione del modulo alla configurazione di tutte le sue potenti funzionalità per un’esperienza di checkout più rapida, fluida e intuitiva. Che tu sia un nuovo utente di OpenCart o un utente esperto, il tutorial ti consentirà di personalizzare i campi, gestire le opzioni di accesso social, abilitare il checkout come ospite, configurare i metodi di pagamento e spedizione e ottimizzare il design generale senza problemi. Guarda il tutorial completo qui per garantire un’installazione impeccabile e un funzionamento ottimale dell’estensione One Page Checkout Pro.
Estensione OpenCart One Page Checkout: https://www.knowband.com/opencart-one-supercheckout-pro
Demo di amministrazione del checkout in una pagina di OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en
Demo frontale del checkout in una pagina di OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en
Checkout di una pagina OpenCart dal Marketplace ufficiale di OpenCart: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353