Utilizzo dell'editor di branding in Checkout Blocks

Puoi usare l'editor di branding in Checkout Blocks, basato sulla Checkout Branding API, per personalizzare l'estetica delle pagine di check-out e degli account senza dover modificare alcun codice.

Puoi utilizzare l'editor di branding per modificare i colori e gli elementi del check-out per qualsiasi configurazione di check-out. Le modifiche apportate al design del check-out tramite l'editor di branding vengono applicate a tutte le pagine del check-out, incluse la pagina di ringraziamento, la pagina di stato dell'ordine e le nuove pagine degli account cliente.

Per lanciare l'editor di branding dal pannello di controllo Shopify, clicca su App > Checkout Blocks, quindi clicca su Editor di branding.

Personalizza i colori del check-out

Nella sezione Colori, puoi personalizzare i colori di base del check-out. Puoi anche personalizzare fino a 4 schemi di colori da applicare a singole sezioni, se desideri apportare modifiche più dettagliate al design. Puoi modificare i tipi di colore, inclusi i colori primari (per elementi interattivi, come i link) e i colori del brand (utilizzati per elementi come i pulsanti principali e secondari).

Passaggi:

Personalizza gli elementi del check-out

Nella sezione Personalizzazioni dell'editor del branding, puoi modificare i seguenti elementi del check-out:

• Favicon: scegli l'icona che viene mostrata ai clienti nella scheda del browser durante il check-out.
• Globale: regola il raggio degli angoli per tutti gli elementi (campi del modulo, pulsanti e riquadri).
• Header e logo: seleziona la posizione dell’header nel check-out e scegli se visualizzare la navigazione tracciabile, un link al carrello e un logo.
• Principale: applica gli schemi di design all'area del contenuto principale del check-out, incluse le immagini di sfondo, la larghezza dei bordi e gli schemi di colori.
• Riepilogo dell'ordine: applica gli schemi di design alla barra laterale del check-out contenente il riepilogo dell'ordine del cliente, incluse le immagini di sfondo, la larghezza dei bordi e gli schemi di colori.
• Footer: seleziona la larghezza del footer nel check-out e scegli se visualizzare le informative del negozio.
• Tipografia: seleziona la dimensione, la famiglia e lo spessore del font, la dimensione, la crenatura e l’uso delle maiuscole/minuscole per un massimo di 3 livelli di intestazioni.
• Pulsanti: seleziona la spaziatura interna, i bordi e gli stili dei pulsanti principali e secondari.
• Moduli: personalizza gli stili per i campi del modulo di check-out, come le caselle di spunta, i campi di testo e le opzioni selezionate da un elenco.
• Miniature del prodotto: regola gli stili del bordo e del raggio degli angoli per le immagini del prodotto nel check-out.

Passaggi:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Nella sezione Personalizzazioni, clicca su uno qualsiasi degli elementi che desideri personalizzare, ad esempio Header e logo.

4. Utilizzando le opzioni di personalizzazione disponibili, modifica l'elemento del check-out secondo le tue preferenze.

5. Clicca su Salva.

Cambia le configurazioni del check-out

Quando apri l’editor per il branding, modifichi per impostazione predefinita la configurazione del check-out attualmente Attiva. Tuttavia, puoi cambiare la configurazione del check-out da modificare utilizzando l’editor per il branding e creare nuove configurazioni del check-out.

Scopri di più su come gestire le configurazioni del check-out attive e in bozza.

Passaggi:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Clicca sul nome dell’attuale configurazione del check-out per aprire un menu a discesa contenente un elenco della configurazione attiva e di eventuali configurazioni in bozza, quindi seleziona la configurazione del check-out che desideri personalizzare:

   • Seleziona una configurazione esistente che desideri modificare.
   • Clicca su ⊕ Crea nuova configurazione per essere reindirizzato alle impostazioni di Check-out del pannello di controllo Shopify.

Visualizza l'anteprima del check-out

Puoi visualizzare l'anteprima delle modifiche apportate nell'editor del branding in qualsiasi momento selezionando la configurazione del check-out di cui desideri visualizzare l'anteprima e cliccando su Anteprima. L'editor del check-out e degli account si avvia in una scheda separata con tutte le modifiche applicate, in modo da poter vedere in anteprima come vengono visualizzate nel check-out.

Passaggi:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Applica tutte le personalizzazioni che desideri modificare ai colori della configurazione o agli elementi del check-out.

4. Clicca su Anteprima.

Esportazione e importazione delle configurazioni del check-out

Puoi esportare e importare le configurazioni del check-out utilizzando i file JSON.

Esporta una configurazione del check-out:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Seleziona la configurazione del check-out con le personalizzazioni applicate utilizzando l'editor del branding.

4. Clicca su Altre azioni > Esporta configurazione.

La configurazione del check-out viene scaricata come file .json sul tuo dispositivo locale.

Importa una configurazione del check-out:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Seleziona la configurazione del check-out a cui desideri applicare il profilo di branding importato.

4. Clicca su Altre azioni > Importa configurazione.

5. Nella finestra di dialogo Importa branding del check-out, carica il tuo file JSON di branding:

   1. Clicca su Aggiungi file.
   2. Seleziona il file JSON appropriato dal tuo dispositivo.
   3. Clicca su Importa e continua.

6. Controlla la configurazione di personalizzazione precaricata. Modificala secondo necessità.

7. Clicca su Salva.

Reimposta lo stile del check-out ai valori predefiniti

Quando modifichi un colore o un elemento del check-out utilizzando l'editor del branding, puoi reimpostare il valore specifico su quello predefinito cliccando su Reimposta accanto al colore o all'elemento che hai modificato.

Puoi ripristinare in qualsiasi momento l’intero branding della configurazione del check-out ai valori predefiniti di Shopify. Il ripristino della configurazione del check-out cancella tutte le personalizzazioni in tutte le pagine dell’editor del branding. Questa azione non può essere annullata.

Passaggi:

1. Dal pannello di controllo Shopify, vai su App > Checkout Blocks.

2. Clicca su Editor del branding.

3. Seleziona la configurazione del check-out che desideri ripristinare.

4. Clicca su Ripristina valori predefiniti.

5. Nella finestra di dialogo Ripristinare gli stili predefiniti?, clicca su Continua.