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.

La versione aggiornata del check-out sarà disponibile a febbraio 2019. Questo aggiornamento contiene una serie di miglioramenti visivi che modificano look e stile del tuo check-out.

Hai tempo fino al 4 marzo 2019 per apportare eventuali modifiche necessarie al file checkout.liquid e testare (anteprima) le modifiche all'interno del nuovo check-out di Shopify. Se non aggiorni il check-out entro il 4 marzo 2019, il tuo negozio si aggiornerà automaticamente alla nuova versione del check-out di Shopify.

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 scelto per il 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. Vale a dire, fai finta 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.

Procedura:

  1. Duplica il tema corrente:

    1. Nel tuo negozio online, fai clic su Temi.
    2. Clicca su Azioni e quindi su Duplica:
      Duplica il file del tema
      Verrà creata una versione duplicata (e non pubblicata) del tema corrente.
  2. 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 usando il nuovo check-out di Shopify:

    1. Torna alla pagina di aggiornamento del check-out, clicca su Anteprima del check-out, quindi scegli il tema duplicato:
      Anteprima del check-out
    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.

Se non riscontri errori durante questi test, il tuo check-out è compatibile con la nuova versione del check-out di Shopify. Puoi procedere con l'aggiornamento alla nuova versione di del check-out di Shopify e con l'aggiornamento del tema.

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. Pubblica il tuo tema duplicato e ora 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à.

Sconti

Sono state apportate modifiche visive (HTML e CSS) al modo in cui vengono visualizzati gli sconti automatici e gli sconti da script nel riepilogo dell'ordine. Ad esempio, appare un'icona a fianco delle voci interessate dallo sconto automatico:

Modifiche per gli sconti automatici

Sono state apportate anche alcune piccole modifiche visive (HTML e CSS) alle icone indicanti che a una voce è applicato un codice di sconto.

Supporto internazionale per i campi degli indirizzi

Sono state apportate modifiche al file countries.js per facilitare la compilazione degli indirizzi da parte dei clienti. Il file countries.js controlla come vengono formattati i campi degli indirizzi e quali campi visualizzare a seconda del paese dei clienti.

Le modifiche al file countries.js includono:

  • Aggiornamento dell'elenco delle province e degli stati dei paesi supportati.

  • Regolazione della larghezza di alcuni campi dell'indirizzo.

Se hai personalizzazioni che utilizzano il file countries.js, devi verificare che funzionino nell'anteprima del check-out. Se hai personalizzazioni che aggiungono o nascondono campi indirizzi, potresti doverle aggiornare.

Completamento automatico dei campi indirizzi

La funzionalità di completamento automatico ora utilizza un servizio Shopify per inviare dati a Google. Di conseguenza, l'associazione di completamento automatico del checkout passa da data=”google_autocomplete_*” a data=”autocomplete_*”.

Se hai apportato personalizzazioni alla funzione di completamento automatico, potresti dover rinominare i riferimenti da google_autocomplete_* a autocomplete_*.

Se hai aggiunto una tua funzionalità di completamento automatico (ovvero, hai aggiunto un codice personalizzato che sostituisce la funzione di completamento automatico di Shopify), tale funzionalità continuerà a essere utilizzata nel tuo negozio (quindi queste modifiche al completamento automatico non dovrebbero influire sul tuo negozio).

Il completamento automatico degli indirizzi è supportato per i seguenti paesi:

  • Australia (AU)
  • Belgio (BE)
  • Brasile (BR)
  • Canada (CA)
  • Svizzera (CH)
  • Germania (DE)
  • Danimarca (DK)
  • Spagna (ES)
  • Francia (FR)
  • Hong Kong (HK)
  • India (IN)
  • Italia (IT)
  • Giappone (JP)
  • Lussemburgo (LU)
  • Paesi Bassi (NL)
  • Nuova Zelanda (NZ)
  • Stati Uniti (US)
  • Singapore (SG)

Miglioramenti di accessibilità per i campi indirizzi

Sono state apportate modifiche visive (HTML, SVG e CSS) ai campi degli indirizzi che utilizzano menu a tendina (ad esempio, il campo Paese). Queste modifiche migliorano l'esperienza dei clienti che utilizzano un software di accessibilità:

Modifiche ai campi a tendina

Icone delle carte di credito

Sono state apportate modifiche visive (HTML e CSS) alle icone delle carte di credito che appaiono quando un commerciante inserisce i dati di questo metodo pagamento. Quando rileva un pagamento tramite carta di credito, Shopify evidenzia l'icona della carta di credito.

Modifiche a Shopify Pay

Sono state apportate modifiche visive (HTML e CSS) alla finestra di verifica che richiede ai clienti di inserire il proprio codice Shopify Pay:

Modifiche al prompt di Shopify Pay

Pagina di stato dell'ordine

Sono state apportate modifiche visive (HTML e CSS) e di contenuto alla pagina di stato dell'ordine. Queste modifiche riguardano il riordinamento e l'aggiornamento del contenuto. Inoltre, i clienti che si avvalgono di dispositivi mobili ora possono scegliere di utilizzare l'app mobile Arrive per tener traccia della spedizione dei pacchi:

Nuovo pulsante che consente ai clienti di utilizzare l'app Arrive per tener traccia dell'arrivo dei dei pacchi

Pulsanti di check-out rapido

Sono state apportate modifiche visive (HTML e CSS) alle opzioni di check-out rapido. Ad esempio, tali opzioni ora sono raggruppate in un riquadro e alcuni dei pulsanti (come quello di Google Pay) utilizzano IFrame.

Il nuovo check-out fa riferimento alle preferenze di pagamento e informazioni di accesso del browser del cliente e utilizza tali informazioni per ordinare i pulsanti e, se possibile, far accedere il cliente:

Modifiche al formato delle opzioni di check-out rapido

Informativa e Termini di servizio

Informativa sui rimborsi, Informativa sui resi e Termini di servizio ora appaiono in un IFrame visualizzato all'interno della finestra modale:

Nuovo IFrame per le informative

Sei pronto/a per iniziare a vendere con Shopify?

Provalo, è gratis