Utilizzo dell'editor di branding in Checkout Blocks

Puoi utilizzare l'editor di branding in Checkout Blocks, supportato dall'API di Checkout Branding, per personalizzare l'estetica delle pagine di check-out e 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 utilizzando l'editor di branding si applicano a tutte le pagine del check-out, incluse la pagina di ringraziamento, la pagina di stato dell'ordine e le pagine dei nuovi account cliente.

Per lanciare l'editor di branding dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks, quindi clicca su Branding editor (Editor di branding).

Su questa pagina

Personalizzazione dei colori del check-out

Nella sezione Colors (Colori), puoi personalizzare i colori di base del check-out. Se desideri apportare modifiche più granulari al design, puoi anche personalizzare fino a 4 schemi di colori applicabili a singole sezioni. Puoi modificare i tipi di colore, inclusi i colori in risalto (usati per gli elementi interattivi, come i link) e i colori del brand (usati per elementi come pulsanti primari e secondari).

Passaggi:

Customize global colors

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Nella sezione Colors (Colori), clicca su Global colors (Colori globali).
Per sostituire qualsiasi colore del check-out esistente, dalla sezione Global colors (Colori globali) clicca sull'icona ⊕ e seleziona il colore che desideri compiendo una delle seguenti azioni:
- Usa il selettore di colori per scegliere il colore.
- Digita il codice colore esadecimale nel campo disponibile.
Clicca su Salva.

Customize color schemes

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Nella sezione Colors (Colori), clicca su Scheme 1 (Schema 1), Scheme 2 (Schema 2), Scheme 3 (Schema 3) o Scheme 4 (Schema 4) per personalizzare uno schema di colori specifico.
Seleziona tutti i componenti che desideri personalizzare:
- Colori principali
- Controlli del modulo
- Pulsante primario
- Pulsante secondario
Nella sezione Base (Base), clicca sull'icona ⊕ accanto al tipo di colore che vuoi personalizzare, quindi seleziona il colore che desideri compiendo una delle seguenti azioni:
- Usa il selettore di colori per scegliere il colore.
- Digita il codice colore esadecimale nel campo disponibile.
Facoltativo: se stai modificando lo schema per i controlli del modulo, il pulsante primario o il pulsante secondario, puoi personalizzare anche i colori per il comportamento di interazione corrispondente alla selezione o al passaggio del mouse. Clicca sull'icona ⊕ accanto al tipo di colore che vuoi personalizzare, quindi seleziona il colore che desideri compiendo una delle seguenti azioni:
- Usa il selettore di colori per scegliere il colore.
- Digita il codice colore esadecimale nel campo disponibile.
Clicca su Salva.

Personalizzazione degli elementi del check-out

All'interno della sezione Customizations (Personalizzazioni) dell'editor di branding puoi modificare i seguenti elementi del check-out:

Favicon: scegli l'icona mostrata ai clienti nella scheda del browser durante il check-out.
Globale: regola il raggio angolo di tutti gli elementi (inserimento di moduli, pulsanti e carte).
Header e logo: seleziona la posizione dell'header nel check-out e decidi se mostrare la navigazione tracciabile, un link al carrello e un logo.
Principale: applica schemi di progettazione all'area di contenuto principale del check-out, compresi immagini di sfondo, larghezze dei bordi e schemi di colori.
Riepilogo dell'ordine: applica schemi di progettazione alla sidebar del check-out con il riepilogo dell'ordine del cliente, compresi immagini di sfondo, larghezze dei bordi e schemi di colori.
Footer: seleziona la larghezza del footer nel check-out e decidi se far comparire le informative del negozio.
Caratteri tipografici: seleziona la dimensione, la famiglia e lo spessore dei font, nonché le dimensioni, la crenatura e l'utilizzo di maiuscole e minuscole per un massimo di 3 livelli di header.
Pulsanti: seleziona la spaziatura, i bordi e gli stili dei pulsanti primari e secondari.
Moduli: personalizza gli stili per gli inserimenti nei moduli del check-out, come caselle di spunta, campi di testo e opzioni da selezionare da un elenco.
Miniature dei prodotti: regola gli stili dei bordi e dei raggi angolo per le immagini dei prodotti nel check-out.

Passaggi:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Nella sezione Customizations (Personalizzazioni), clicca sugli elementi che vuoi personalizzare, per esempio header e logo.
Utilizzando le opzioni di personalizzazione disponibili, modifica l'elemento del check-out in questione in base alle tue preferenze.
Clicca su Salva.

Cambiamento delle configurazioni del check-out

Quando apri l'editor di branding, stai modificando la configurazione del check-out attiva per impostazione predefinita in quel momento. Tuttavia, puoi cambiare la configurazione del check-out che desideri modificare utilizzando l'editor di branding e creare nuove configurazioni del check-out.

Maggiori informazioni sulla gestione delle configurazioni di check-out attive e in bozza.

Passaggi:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Clicca sul nome della configurazione del check-out attuale per aprire un menu a discesa con un elenco che comprende la configurazione attiva e le configurazioni in bozza, quindi seleziona la configurazione del check-out che desideri personalizzare:
- Seleziona una configurazione esistente che vuoi modificare.
- Clicca su ⊕ Create new configuration (Crea nuova configurazione) per farti reindirizzare alle impostazioni di check-out del pannello di controllo Shopify.

Visualizzazione in anteprima del check-out

In qualsiasi momento puoi visualizzare in anteprima le modifiche effettuate nell'editor di branding selezionando la configurazione del check-out che vuoi vedere in anteprima e cliccando su Preview (Anteprima). In una scheda separata viene lanciato l'editor di check-out e account con tutte le modifiche applicate, permettendoti di visualizzare in anteprima come tali modifiche saranno visualizzate nel check-out.

Passaggi:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Personalizza i colori delle configurazioni o gli elementi del check-out che desideri modificare.
Clicca su Anteprima.

Esportazione e importazione delle configurazioni del check-out

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

Esportazione di una configurazione del check-out:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Seleziona la configurazione del check-out a cui sono state applicate delle personalizzazioni utilizzando l'editor di branding.
Clicca su More actions (Altre azioni) > Export configuration (Esporta configurazione).

La configurazione del check-out viene scaricata come .json nel dispositivo locale.

Importazione di una configurazione del check-out:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Seleziona la configurazione del check-out a cui vuoi applicare il profilo di branding importato.
Clicca su More actions (Altre azioni) > Import configuration (Importa configurazione).
Nella finestra di dialogo Import checkout branding (Importa branding del check-out), carica il file JSON di branding:
1. Clicca su Aggiungi file.
2. Seleziona il file JSON appropriato dal tuo dispositivo.
3. Clicca su Import and continue (Importa e continua).
Controlla la configurazione precaricata della personalizzazione. Modificala secondo necessità.
Clicca su Salva.

Ripristino delle impostazioni predefinite per lo stile del check-out

Quando modifichi un colore o un elemento del check-out utilizzando l'editor di branding, puoi ripristinare le impostazioni predefinite di quel valore specifico cliccando su Reset (Ripristina) accanto al colore o all'elemento che hai modificato.

In qualsiasi momento, puoi ripristinare il branding dell'intera configurazione del check-out ai valori predefiniti di Shopify. Il ripristino della configurazione del check-out cancella tutte le personalizzazioni su tutte le pagine dell'editor di branding. L'azione non può essere annullata.

Passaggi:

Dal pannello di controllo Shopify, clicca su Canali di vendita > Checkout Blocks.
Clicca su Branding editor (Editor di branding).
Seleziona la configurazione del check-out che vuoi ripristinare.
Clicca su Reset to default (Ripristina impostazioni predefinite).
Nella finestra di dialogo Reset to default styles? (Ripristina gli stili predefiniti?), clicca su Continue (Continua).