Aggiornare il check-out online

Questa pagina è stata stampata il Sep 21, 2020. Per la versione aggiornata, visita https://help.shopify.com/it/manual/checkout-settings/checkout-upgrade.

Puoi personalizzare il check-out online per estendere il tuo brand, modificare la messaggistica, lanciare offerte e apportare altri miglioramenti all'esperienza dei tuoi clienti. Per assicurarti che le tue personalizzazioni siano compatibili con le modifiche in corso effettuate da Shopify, avrai bisogno di aggiornare periodicamente il check-out.

Per l'aggiornamento è necessario svolgere le seguenti attività preliminari:

  1. Usa in anteprima il nuovo check-out e verifica l'esperienza di check-out per i clienti. A seconda delle personalizzazioni che hai apportato al tuo check-out, potresti dover modificare anche i file checkout.liquid prima di procedere con l'aggiornamento.
  2. Quando sei soddisfatto delle modifiche apportate, aggiorna il negozio per l'uso del nuovo check-out di Shopify.

Anteprima del check-out e verifica degli errori

Prima di aggiornare il tuo negozio per utilizzare la nuova versione del check-out, assicurati di vedere le modifiche in anteprima.

Anteprima del check-out

Fingi di essere un cliente e crea dei check-out di prova. Se riscontri degli errori durante questi test, ciò significa che alcune personalizzazioni del check-out sono in conflitto con altri miglioramenti presenti nella nuova versione. In tal caso devi apportare modifiche al tuo file checkout.liquid prima di eseguire l'aggiornamento.

Risoluzione degli errori

Procedura:

  1. Dal pannello di controllo Shopify vai su Negozio online > Temi.
  2. Clicca su Azioni, quindi su Duplica.
  3. Da Altri temi trova il tema duplicato, quindi clicca su Azioni > Modifica codice. Puoi apportare le tue modifiche e testarle utilizzando questa versione duplicata e non pubblicata del tema.

  1. Apri il file checkout.liquid.

  2. Visualizza l'anteprima del file checkout.liquid dal tema duplicato utilizzando il nuovo check-out di Shopify:

    1. Vai alla pagina di Aggiornamento check-out del pannello di controllo Shopify, clicca su Anteprima check-out, quindi scegli il tema duplicato.
    2. Completa gli ordini di test nell'anteprima.

In caso di errori o se noti problemi nell'aspetto del check-out, devi modificare il file checkout.liquid per risolverli.

Eseguire l'aggiornamento al nuovo check-out di Shopify

L'aggiornamento del check-out è una procedura in due passaggi che richiede l'aggiornamento del check-out di Shopify e la sostituzione del tema pubblicato corrente con la copia duplicata contenente le modifiche.

Scegli un orario tranquillo per l'aggiornamento (ad esempio la mattina presto, la sera tardi o il fine settimana) per ridurre al minimo eventuali interruzioni.

Procedura:

  1. Nella pagina di aggiornamento del check-out fai clic sul pulsante Aggiorna check-out in fondo alla pagina.

  2. In caso di errori durante l'anteprima del tema, prima di tutto accertati che siano stati risolti (consulta Risoluzione degli errori sopra). Quindi, pubblica il tuo tema duplicato aggiornato:

    1. Nel tuo negozio online, fai clic su Temi.
    2. Trova il tema duplicato e fai clic su Azione > Pubblica.

Il check-out viene aggiornato e il tema duplicato diventa il tuo tema corrente.

Novità del check-out di Shopify

La nuova versione del check-out di Shopify contiene le seguenti modifiche e nuove funzionalità:

  • Variabili Liquid di sconto
  • Registrazione su Shop
  • Modifiche dell'ordine
  • Miglioramenti all'accessibilità
  • Spaziatura interna rimossa
  • Visualizzazione metodo di pagamento
  • Stringhe segnaposto rimosse
  • Visualizzazione dell'indirizzo cliente salvato
  • Autenticazione 3D Secure
  • Modifiche al campo JavaScript aggiuntivo di Google Analytics
  • Modifiche CSS
  • Messaggio di errore

Variabili Liquid di sconto

Durante tutta la procedura di check-out sono state introdotte diverse nuove variabili Liquid relative alla visualizzazione degli sconti. Queste modifiche aiutano a rappresentare sconti automatici e basati su script in una modalità comprensibile per i clienti.

Tabella che elenca le nuove variabili Liquid
Variabile Definizione
checkout.cart_level_discount_applications Restituisce una serie di applicazioni di sconto specifiche del carrello per il check-out.
line_item.discount_allocations Restituisce un elenco di tutte le assegnazioni di sconto che contengono l'importo scontato e il riferimento all'applicazione di sconto principale. line_item.discount_allocationsè disponibile per le voci su carrelli, check-out, ordini e ordini preliminari.
line_item.final_line_price Restituisce il prezzo complessivo di tutti gli articoli nella voce. Corrisponde a line_item.final_price moltiplicato per line_item.quantity.
line_item.final_price Restituisce il prezzo della voce che include tutti gli importi degli sconti per voce.
line_item.line_level_discount_allocations Restituisce un elenco delle assegnazioni di sconto per voce che contengono l'importo scontato e il riferimento all'applicazione di sconto principale. line_item.line_level_discount_allocations è disponibile per le voci su carrelli, check-out, ordini e ordini preliminari.
line_item.total_discount Restituisce l'importo totale di tutti gli sconti applicati alla voce. Questo attributo ha un valore solo se utilizzi l'app Editor di script.

Registrazione su Shop

Alla pagina dello stato dell'ordine è stato aggiunto un campo relativo al numero di telefono. Ai clienti viene richiesto di inserire un numero di telefono cellulare per ricevere gli aggiornamenti sulla spedizione via SMS. Questi SMS includono anche un link all'app Shop.

Modifiche dell'ordine

Quando la modifica dell'ordine viene resa disponibile per i merchant di Shopify Plus, sarà possibile acquisire ulteriori pagamenti in sospeso sugli ordini modificati tramite il check-out di Shopify. Puoi apportare alcune modifiche alla pagina di check-out per assicurarti che funzioni come previsto:

  • Il cliente non può modificare le informazioni di contatto, l'indirizzo di spedizione o il metodo di spedizione.
  • Voci aggiuntive che indicano il totale dell'ordine e l'importo già pagato.
  • Il pulsante Completa acquisto diventa Paga ora. Totale viene modificato in Importo da pagare.
  • Al posto delle informazioni sul percorso di navigazione che mostrano a che punto della procedura di check-out si trovi il cliente, il cliente vedrà un banner comprimibile che fornisce ulteriori informazioni sull'ordine: - L'importo aggiuntivo per il pagamento.
    • Prodotti aggiunti o rimossi dall'ordine.
    • Il numero dell'ordine

Immagine che mostra la pagina di check-out quando sono necessari ulteriori pagamenti

Queste modifiche diventano effettive solo quando un ordine viene modificato e si rende necessario un pagamento supplementare da parte del cliente.

Se le personalizzazioni del check-out utilizzano il percorso di navigazione per identificare il passaggio attuale del check-out, consigliamo di utilizzare l'oggetto Shopify.Checkout.step. Per maggiori informazioni, consulta Identificazione passaggio.

Miglioramenti all'accessibilità

Nel check-out sono stati introdotti diversi cambiamenti per garantire la conformità agli standard di accessibilità del Web. Questo rende più semplice la navigazione durante la procedura di check-out per i clienti che utilizzano tecnologie assistive, come lettori di schermo.

  • I percorsi di navigazione fanno ora parte di un elemento nav in tutti i passaggi di check-out. L'attributo aria-current è stato spostato all'elemento li dall'elemento span.
  • I riepiloghi degli ordini si trovano ora in un elemento aside.
  • L'ID campo codice sconto per i clienti da dispositivo mobile è stato modificato da checkout_reduction_code a checkout_reduction_code_mobile in tutti i passaggi di check-out.
  • Sono stati aggiunti attributi di accessibilità alla mappa per le pagine di Ringraziamento e di Stato dell'ordine. La mappa ora riporta role=region e aria-label assieme all'indirizzo di spedizione.
  • step e i div wrapper step__section sono stati aggiunti alle pagine di Stato dell'ordine, Esauritoe Ringraziamento.
  • Sono stati introdotti elementi di HTML5 semantici per la procedura di check-out e gli attributi role sono stati aggiornati. - Il riepilogo dell'ordine si trova ora all'interno di un elemento aside.
    • Il div per .main__header ora è un elemento header con role=banner.
    • Il div per .main__content ora è un elemento principale con role=main.
    • Il div per .main__footer ora è un elemento footer con role=contentinfo.
    • Il div per banner ora è un header con role=banner.

Spaziatura interna rimossa

Lo spazio bianco tra il nome del negozio e il numero dell'ordine nelle pagine di Stato dell'ordine, Esaurito e Ringraziamento è stato rimosso. Questa spaziatura interna aggiuntiva è stata rimossa dalla sezione div.section.section--page-title.

Visualizzazione metodo di pagamento

L'importo totale di un ordine appare ora ai clienti nella pagina dello stato dell'ordine, nella sezione Metodo di pagamento.

Immagine della pagina di stato dell'ordine che mostra l'importo totale dell'ordine

Stringhe segnaposto rimosse

I campi Segnaposto email e Segnaposto email o telefono sono stati rimossi dalle opzioni lingua delle impostazioni del tema. Tutte le modifiche necessarie possono essere apportate rispettivamente ai campi Etichetta email e Etichetta email o del telefono. Per accedere a questi campi, vai su Negozio online > Temi, quindi clicca su Azioni > Modifica lingue > Check-out e sistema.

Visualizzazione dell'indirizzo cliente salvato

Il modo in cui gli indirizzi salvati vengono visualizzati durante il check-out per i clienti che hanno effettuato l'accesso è cambiato.

Immagine che mostra un elenco di indirizzi salvati

Le opzioni di indirizzo sono visualizzate nel seguente ordine:

  1. L'indirizzo predefinito salvato.
  2. Gli indirizzi aggiunti di recente, dai più recenti ai meno recenti.
  3. L'opzione di utilizzo di un nuovo indirizzo.

Il menu a tendina mostra un massimo di cinque indirizzi.

Autenticazione 3D Secure

La tecnologia 3D Secure fornisce un ulteriore livello di sicurezza che i clienti devono completare prima di poter terminare l'acquisto e offre servizi quali Verified by Visa, Mastercard Identity Check o Amex SafeKey. Durante il check-out, alcuni clienti potrebbero essere reindirizzati al portale della propria banca per effettuare un'autenticazione aggiuntiva. Per maggiori informazioni, consulta la sezione Informazioni su PSD2 e sull'autenticazione avanzata dei clienti.

I merchant con sede all'interno dello Spazio Economico Europeo (SEE) e nel Regno Unito possono usare Cardinal per offrire check-out sicuro 3D. Consulta 3D Secure con Cardinal per maggiori informazioni.

La banca decide se applicare una verifica aggiuntiva durante il check-out e tale decisione non può essere controllata tramite il pannello di controllo Shopify. Per abilitare questa modifica non è richiesta alcuna azione.

Modifiche al campo JavaScript aggiuntivo di Google Analytics

JavaScript inserito nella sezione JavaScript aggiuntivo di Google Analytics nel tuo pannello di controllo Shopify in Negozio online > Preferenze è aggiunto al check-out come iFrame non visibile. Ciò non influisce sul JavaScript utilizzato per scopi di analisi, ma impedisce che vengano apportate altre modifiche al check-out. Se desideri aggiungere JavaScript personalizzato al tuo check-out per altri motivi, inseriscilo direttamente nel file checkout.liquid.

Modifiche CSS

heading-* e classi CSS text-container sono state aggiunte a tutti i passaggi di check-out.

Messaggio di errore

È stato aggiunto un banner di errore che informa i clienti quando il metodo di pagamento selezionato Express Checkout non è disponibile. Questo banner appare nella parte superiore del passaggio Recapiti del check-out.

Immagine

Il banner di errore che informa i clienti che una tariffa di spedizione precedente non è più valida è stato spostato. Questo banner ora appare direttamente sopra le opzioni di spedizione disponibili.

Immagine

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis