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:
- 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. - Quando sei soddisfatto delle modifiche apportate, aggiorna il negozio per l'uso del nuovo check-out di Shopify.
Su questa pagina
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:
- Dal pannello di controllo Shopify, vai alla pagina Aggiornamento check-out e clicca su Anteprima del check-out.
- Seleziona il tema corrente dall'elenco, quindi clicca su Anteprima.
- Crea un check-out di prova proseguendo con la procedura di check-out come cliente.
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:
- Dal pannello di controllo Shopify, vai su Negozio online > Temi.
- Clicca sul pulsante ... e poi clicca su Duplica.
- Da Altri temi trova il tema duplicato, quindi clicca sul pulsante ... > Modifica codice. Puoi apportare le tue modifiche e testarle utilizzando questa versione duplicata e non pubblicata del tema.
Apri il file
checkout.liquid
.Visualizza l'anteprima del file
checkout.liquid
dal tema duplicato utilizzando il nuovo check-out di Shopify:
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:
Nella pagina di aggiornamento del check-out fai clic sul pulsante Aggiorna check-out in fondo alla pagina.
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:
Il check-out viene aggiornato e il tema duplicato diventa il tuo tema corrente.
Novità nel 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.
Scopri di più 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 in 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.
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 indata-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 harole="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"
aul
per i seguenti elementi:-
u.breadcrumb
-
ul.payment-method-list
-
ul.os-timeline
-
ul.policy-list
-
La descrizione comandi è stata rimossa da
aria-labelledby
iltelephone_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 tagh3
.Il completamento automatico ora si riferisce a
mobile tel
anzichéphone
.Aggiornato
div[data-processing-order]
con l'aggiunta dirole="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.
- aggiunto
-
Aggiornato
div.content-box blank-slate
con quanto segue:- aggiunto
role="region"
- impostato
aria-labelledby
in modo che corrisponda all'ID dell'elemento header;
- aggiunto
La griglia per l'Express Check-out è stata migliorata per utilizzare gli elementi
ul
eli
anzichédiv
.-
Aggiornato il riepilogo dell'ordine con quanto segue:
- maggiore chiarezza sul prezzo promozionale e il prezzo di listino;
- il campo di applicazione del tag
dl
è stato modificato; - il tag
del
è stato modificato nei tagdt
edd
.
-
Metodi dettagliati di pagamento aggiornati come segue:
-
span.radio__label__accessory
è stato modificato indiv.radio__label__accessory
-
span.visually-hidden
è stato modificato inh3.visually-hidden
-
span.payment-icon-list__more
è stato modificato inli.payment-icon-list__more
-
span.content-box__small-text
è stato modificato insmall.content-box__small-text
-