Aggiornare il check-out online

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. Utilizza 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 il 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.

Procedura:

1. Dal pannello di controllo Shopify, vai alla pagina Aggiornamento check-out e clicca su Anteprima del check-out.
2. Seleziona il tema corrente dall'elenco, quindi clicca su Anteprima.
3. Crea un check-out di prova proseguendo con la procedura di check-out come cliente.

Nota

Alcuni gestori dei pagamenti hanno un prezzo minimo per i check-out di prova. Per Shopify Payments questo ammonta a 0,50 CDN o 0,35 USD. gestori dei pagamenti di terze parti potrebbero avere soglie diverse.

Se viene visualizzato il messaggio di errore In questo momento non è stato possibile elaborare il pagamento, riprova tra qualche minuto, prova ad aumentare il prezzo dell'ordine di prova o a completare un check-out di prova con articoli gratuiti.

Se riscontri degli errori durante questi test, è possibile che alcune personalizzazioni del check-out siano in conflitto con i miglioramenti presenti nella nuova versione. In questo caso devi apportare modifiche al 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.

Nota

Ogni volta che modifichi o provi un tema, crea una copia duplicata e lavora con quella. Se commetti un errore mentre lavori con la tua copia duplicata, potrai eliminare il duplicato e creare un'altra copia dal tema originale, senza compromettere l'esperienza dei clienti.

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 dal 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.

Attenzione

assicurati di aver visualizzato l'anteprima del check-out prima di effettuare questo aggiornamento. Devi essere certo che l'aggiornamento non comprometta l'esperienza di check-out dei clienti e che questi possano pagare gli ordini nel nuovo check-out.

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à:

• Abbonamenti
• Upselling
• Mance al check-out
• Ritiro e consegna locali
• Campi internazionali aggiuntivi
• Monitoraggio dell'ordine con il pulsante Shop
• Aggiornamenti sulla pagina di stato dell'ordine
• Modifiche generali ai file
• Strutture/stati di caricamento
• Messaggio di errore
• Modifiche agli attributi dati
• Miglioramenti all'accessibilità

Abbonamenti

Al check-out di Shopify sono state aggiunte più sezioni, in modo che tu possa offrire prodotti in abbonamento mantenendo le personalizzazioni del check-out. Queste sezioni ti permetteranno di vendere prodotti in abbonamento e di elaborare i pagamenti ricorrenti direttamente nel check-out di Shopify.

Dopo aver completato l'aggiornamento del check-out, puoi offrire gli abbonamenti aggiungendo un'app per abbonamenti dell'App Store di Shopify o creare un'app personalizzata con nuove API di abbonamento.

Trovi maggiori informazioni sugli abbonamenti nel Centro assistenza Shopify.

• Quando gli abbonamenti sono abilitati, le modalità di spedizione utilizzate per gli abbonamenti vengono visualizzate separatamente rispetto a quelle per gli acquisti una tantum;
• .product_description_variant Span.product_description_selling_plan viene visualizzato come proprietà voce aggiuntiva se è presente un abbonamento associato al prodotto;
• un totale ricorrente accompagnato da un suggerimento viene visualizzato sotto il totale nel riepilogo dell'ordine;
• le opzioni di spedizione per l'abbonamento vengono visualizzate quando un prodotto in abbonamento è incluso nell'ordine.

Upselling

Nell'App Store di Shopify sono disponibili nuove app di upselling dopo l'acquisto. Queste app presentano ai clienti offerte dopo l'acquisto direttamente all'interno del check-out di Shopify; inoltre modificano l'ordine completato in modo che includa il prodotto venduto tramite upselling senza reinserire i dati di fatturazione o di spedizione.

Questo aggiornamento del check-out include modifiche ai file di check-out che consentono all'upselling dopo l'acquisto di funzionare con il check-out personalizzato.

Maggiori informazioni sull'upselling dopo l'acquisto.

• Una volta installata un'app per offerte dopo l'acquisto valida nel pannello di controllo Shopify, i clienti riceveranno offerte dopo l'acquisto.

Nota

La personalizzazione della pagina dopo l'acquisto viene effettuata all'interno dell'app di upselling di terze parti. La pagina non può essere personalizzata utilizzando checkout.liquid.

Mance al check-out

Le opzioni per le mance possono essere utilizzate per consentire ai clienti di aggiungere una mancia all'ordine online o per raccogliere donazioni anziché mance. Quando le mance sono abilitate, nella fase di metodo di pagamento del check-out viene visualizzata una sezione Aggiungi mancia. La sezione Aggiungi mancia include tre opzioni di mancia preselezionate oltre a un campo per inserire un importo per la mancia personalizzato.

Maggiori informazioni sull'offerta di opzioni per le mance.

• Quando le mance sono abilitate, nella fase di metodo di pagamento del check-out viene visualizzata una sezione Aggiungi mancia.

Ritiro e consegna locali

Ritiro e consegna locali sono nuovi metodi di consegna che consentono ai clienti di ricevere gli ordini localmente. Quando questi metodi di consegna sono abilitati, i clienti possono selezionare l'opzione di ritiro o consegna locale nella fase di spedizione del check-out.

Maggiori informazioni su come abilitare il ritiro e la consegna locali.

• I campi aggiuntivi per la consegna locale vengono visualizzati quando questa opzione è abilitata e selezionata dal cliente;
• se il ritiro locale è abilitato, al cliente viene mostrata una sezione per il metodo di consegna nella pagina Informazioni del check-out. Se la spedizione non è disponibile, vengono visualizzate solo le informazioni sul ritiro;

• i metodi di consegna vengono visualizzati come schede distinte; - selezionando Spedisci viene richiesto ai clienti di inserire i propri dati di spedizione e vengono mostrate le modalità di spedizione disponibili quando si clicca su Vai alla spedizione;

  • selezionando Ritiro viene mostrato un elenco di sedi di ritiro. I clienti cliccano sul pulsante di opzione per la sede di ritiro desiderata, quindi cliccano su Vai al pagamento;

• se nella fase di spedizione del check-out i clienti selezionano Ritiro, i dati di spedizione non vengono raccolti. Nella fase di pagamento del check-out viene richiesto ai clienti di inserire i dati di fatturazione;

• le istruzioni per la consegna locale vengono visualizzate sulla pagina di stato dell'ordine. Possono essere modificate andando nel pannello di controllo Shopify alla voce Impostazioni > Spedizione e consegna. Nella sezione Ritiro locale trova la sede che desideri modificare e clicca su Gestisci;

• la pagina di stato dell'ordine è stata aggiornata per mostrare l'avanzamento delle consegne e dei ritiri. Vengono visualizzati messaggi quando: - un ordine è stato preparato ed è pronto per la consegna;

  • una consegna è stata completata. Questo messaggio include anche un link per riordinare gli stessi articoli;
  • un ordine di ritiro è stato confermato, indicando che il cliente riceverà un'email quando sarà pronto per il ritiro;
  • un ordine di ritiro è pronto per il ritiro;
  • un ordine di ritiro è stato ritirato.

Campi internazionali aggiuntivi

Alcuni paesi hanno regolamenti di spedizione esclusivi che devi rispettare per consentire alle tue spedizioni di arrivare ai clienti. I campi aggiuntivi sono ora disponibili per i paesi con regolamenti di spedizione esclusivi e vengono visualizzati nella fase di metodo di pagamento del check-out.

Scopri di più sui campi internazionali aggiuntivi.

• I campi di check-out aggiuntivi vengono visualizzati solo dai clienti che si trovano in Brasile, Corea del Sud, Italia e Cina.

Monitoraggio dell'ordine con il pulsante Shop

Il pulsante Monitora l'ordine con Shop sulle pagine di stato dell'ordine e di ringraziamento è stato aggiornato con un nuovo design.

Maggiori informazioni sull'app Shop.

• È stato aggiunto un pulsante di testo che invita i clienti a monitorare l'acquisto sull'app Shop;
• sono stati aggiunti parametri per mostrare il monitoraggio di Shop Pay;
• è stato effettuato il rendering del pulsante Monitora l'ordine con Shop per i seguenti casi: - tentativo di consegna
  • conferma
  • consegnato
  • Fallito
  • in transito
  • non spedibile
  • in fase di consegna

Aggiornamenti sulla pagina di stato dell'ordine

Sono stati effettuati diversi aggiornamenti alla pagina dello stato dell'ordine.

• È stata creata una sezione dedicata alle informazioni sui buoni regalo che viene visualizzata quando è stato acquistato un buono regalo;
• sono state aggiunte informazioni sugli abbonamenti;
• è stata rimossa la classe icon-svg--align-text-bottom;
• data-step="thank-you" è stato modificato in data-step="thank_you". Se utilizzi questo attributo per identificare la pagina del check-out su cui si trova il cliente, invece utilizza l'oggetto JavaScript Shopify.Checkout.page.
• è stata aggiunta una scheda di stato dell'ordine.

Modifiche generali ai file

• div.content-box__row ora ha role="table";
• se il cliente è alla fase di ringraziamento e dispone del pacchetto QR, viene aggiunto show_qr.js;
• è stato aggiunto un controllo per assicurarsi che il cliente abbia accesso al check-out;
• i buoni regalo ora vengono mostrati con checkouts/order_status/gift_cards;
• la direzione dei recapiti è stata corretta con enforce_content_directionality;
• le informazioni di spedizione sono state spostate a checkouts/web/checkouts/contact_information/pickup;
• è ora supportata la visualizzazione di più voci di spedizione nella sidebar di riepilogo dell'ordine;
• tr.total-line verrà visualizzata solo se sono presenti totali aggiornati;
• sono ora supportate le voci di pagamento generiche;
• è ora supportata la modifica della valuta durante il check-out;

• #payment-gateway-subfields ora ha le classi: - .radio-wrapper content-box__row .content-box__row--secondary

  • .card-fields-container

• il suggerimento per la carta di credito è stato rettificato ed è ora in div.field__icon;

• l'etichetta Aria è stata rimossa dalla descrizione completa delle tariffe di spedizione;

• i campi modulo delle tariffe di spedizione sono stati spostati a checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Strutture/stati di caricamento

Gli stati di caricamento delle pagine di check-out sono stati aggiornati, aggiungendo strutture visibili durante il caricamento della pagina o nascondendo selettivamente alcuni elementi fino al completamento del caricamento. Le modifiche ottimizzano i tempi di caricamento.

• Oggetti nascosti durante il caricamento: - del.total-recap__original-price

  • .total-line__price span.payment-due__currency
  • span.order-summary__emphasis

• Oggetti che mostrano una struttura durante il caricamento: - Span.total-recap__final-price

  • .product__price del.order-summary__small-text
  • .product__price del.order-summary__emphasis
  • .total-line__price span.payment-due__price
  • .total-line__price span.order-summary__emphasis
  • .total-line__price span.visually-hidden
  • .total-line__price.total-line--subtotal span.order-summary__emphasis

Messaggio di errore

Sono stati aggiunti al check-out nuovi messaggi di errore.

• È stato aggiunto al campo dell'indirizzo un avviso relativo al numero civico;
• un messaggio di avviso per indicare che non ci sono tariffe di spedizione disponibili per un carrello, una destinazione o un paese è stato separato in due messaggi di avviso distinti: un messaggio per indicare che non ci sono tariffe disponibili per un carrello o una destinazione e uno separato per indicare che non ci sono tariffe disponibili per un paese;
• è stato aggiunto al check-out un banner di avviso quando si tenta di completare un acquisto in un development store;
• è stata aggiunta una notifica visualizzata quando al cliente non verrà addebitato alcun importo durante il check-out;
• è stato aggiunto un banner di avviso per indicare un errore di modifica dell'autenticazione;
• è stato aggiunto un messaggio di errore per indicare quando le modalità di spedizione non sono disponibili nella fase di spedizione del check-out.

Modifiche agli attributi dati

Trekkie è stato rimosso dagli oggetti seguenti:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Campi di inserimento check-out: - {type}_address_field
  • {type}_firstname_field
  • {type}_lastname_field
  • {type}_company_field
  • {type}_address1_google_autocomplete_field
  • {type}_address1_field
  • {type}_address2_field
  • {type}_city_field
  • {type}_country_field
  • {type}_province_field
  • {type}_zip_google_autocomplete_field
  • {type}_phone_field

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.

• Aggiunto role="list" a ul per i seguenti elementi: - u.breadcrumb

  • ul.payment-method-list
  • ul.os-timeline
  • ul.policy-list

• La descrizione comandi è stata rimossa da aria-labelledby il telephone_field.

• In Shop, l'etichetta di input è stata modificata in modo da riferirsi al telefono.

• Aggiunti i titoli h3 durante l'attesa delle imposte.

• Aggiunti i titoli h3 durante il reindirizzamento.

• Durante il caricamento delle modalità di spedizione, il tag p è stato modificato in un tag h3.

• Il completamento automatico ora si riferisce a mobile tel anziché phone.

• Aggiornato div[data-processing-order] con l'aggiunta di role="region".

• Aggiornato div[data-announce-change] con quanto segue: - aggiunto role="region"

  • impostato aria-labelledby in modo che corrisponda all'ID dell'elemento header;
  • impostato aria-describedby in modo che corrisponda all'ID dell'elemento contenitore dei contenuti.

• Aggiornato div.content-box blank-slate con quanto segue: - aggiunto role="region"

  • impostato aria-labelledby in modo che corrisponda all'ID dell'elemento header;

• La griglia per l'Express Check-out è stata migliorata per utilizzare gli elementi ul e li anziché div.

• Aggiornato il riepilogo dell'ordine con quanto segue: - maggiore chiarezza sul prezzo di vendita e prezzo di listino;

  • il campo di applicazione del tag dl è stato modificato;
  • il tag del è stato modificato nei tag dt e dd.

• Metodi dettagliati di pagamento aggiornati come segue: - span.radio__label__accessory è stato modificato in div.radio__label__accessory

  • span.visually-hidden è stato modificato in h3.visually-hidden
  • span.payment-icon-list__more è stato modificato in li.payment-icon-list__more
  • span.content-box__small-text è stato modificato in small.content-box__small-text

Link correlati

• Best practice per le modifiche al file checkout.liquid
• checkout.liquid
• CSS in checkout.liquid