Skip to main content
Le impostazioni di branding ti permettono di personalizzare l’aspetto del tuo checkout, dai colori e dalla tipografia ai pulsanti, ai campi dei moduli e al layout della pagina. Questi strumenti rendono facile allineare il design del tuo checkout con l’identità del tuo brand.

​
Come accedervi

Apri la dashboard Checkout in Aftersell e clicca Edit branding in cima alla pagina.
Modificare il branding qui richiede un piano Shopify Plus. Shopify consente alle app di leggere e scrivere il branding del checkout solo su Plus, quindi sugli altri piani queste impostazioni non possono essere salvate. Se il tuo negozio non è su Plus, effettua le stesse modifiche nell’editor del checkout di Shopify: Impostazioni → Checkout → Personalizza nel tuo pannello di controllo Shopify.
Dashboard Checkout di Aftersell con una freccia che indica il pulsante Edit branding L’editor è organizzato in tre gruppi: Design system, Customizations e Advanced.

​
Design system

Le impostazioni del design system sono le fondamenta. I componenti in tutto il checkout le ereditano, a meno che un’impostazione più specifica non le sovrascriva.

​
Colori globali

I colori del tuo brand e di sistema, usati in tutto il tuo negozio e nelle esperienze post-acquisto. I componenti usano questi colori quando non è impostato alcuno schema di colori. Colori del brand
  • Brand – il colore principale del tuo brand.
  • Accent – usato per gli elementi interattivi ed evidenziati.
  • Decorative – usato per gli elementi decorativi di supporto.
Colori di stato e di sistema
  • Success – stati di conferma.
  • Warning – messaggi di avvertenza.
  • Critical – errori e avvisi.
  • Info – messaggi informativi.
I colori delle superfici e dei pulsanti non si impostano qui. Si trovano in Advanced > Color schemes.

​
Tipografia

  • Font size – imposta la Base size e lo Scale ratio da cui deriva il resto della scala tipografica.
  • Primary font – usato per la maggior parte dei componenti come testo normale, pulsanti e controlli dei moduli. Scegli una Font family, un Base weight e un Bold weight.
  • Secondary font – usato per i componenti dei titoli, con gli stessi tre controlli.

​
Raggio degli angoli

Imposta i valori condivisi del raggio degli angoli a cui fanno riferimento pulsanti, campi dei moduli, contenitori e altri componenti. Definisci tre dimensioni: Small, Medium e Large.

​
Customizations

​
Pulsanti

Configurati separatamente per Primary buttons (l’azione principale di una pagina) e Secondary buttons (azioni di supporto). Ciascuno ha:
  • Corner radius – Small, Medium, Large o None (squadrato).
  • Background – Solid o None.
  • Vertical padding e Horizontal padding.
  • Show border.
I colori dei pulsanti sono ereditati dagli schemi di colori. Se non è impostato alcun valore nello schema, vengono usati i colori globali.

​
Campi dei moduli

Si applica a tutti i tipi di campo supportati:
  • Corner radius
  • Label position – Inside o Outside.
  • Show border
Le impostazioni specifiche per campo ti permettono di discostarti da questi stili condivisi per tipi di campo particolari: Text field borders, Dropdown borders, Choice list group spacing e Checkbox corner radius.

​
Miniature dei prodotti

Controlla come le immagini dei prodotti appaiono nella pagina:
  • Show border
  • Border radius
  • Fit
  • Badge background color – Accent (colore accent dello schema) o Base (colore base dello schema).
  • Layout – Placement (Top bar, Left section o Right section) e Alignment (Left, Center o Right).
  • Container – Padding, Color scheme e Show divider.
Pagina del checkout con l'header con il nome del negozio evidenziato in alto a sinistra

​
Area contenuti

Controlla il Divider tra l’area principale e quella del riepilogo dell’ordine: Show divider, Border style e Border weight.

​
Area principale

  • Section containers – lo sfondo e il bordo che avvolgono ogni sezione: Background, Show border, Border style, Border weight.
  • Section dividers – le linee mostrate tra le sezioni.

​
Riepilogo dell’ordine

  • Container – il Color scheme applicato al contenitore complessivo del riepilogo dell’ordine.
  • Section dividers – Show divider, Border style, Border weight.
  • Section containers – lo sfondo e il bordo attorno a ogni sezione: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding e Shadow.
Miniatura del prodotto nel riepilogo dell'ordine con un bordo dell'immagine evidenziato
  • Layout – Placement e Alignment.
  • Container – Show footer content, Padding, Color scheme e Show divider.

​
Advanced

​
Schemi di colori

Gli schemi di colori sono set riutilizzabili di colori di superficie, testo e pulsanti a cui fanno riferimento le altre sezioni. Sono disponibili due schemi:
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Ogni schema è suddiviso in tre gruppi:
  • Buttons – usati per il pulsante di pagamento principale e per le azioni secondarie. Primary button e Secondary button si configurano separatamente, ciascuno con il proprio stato predefinito e hover.
  • Form controls – usati per campi di testo, menu a tendina ed elenchi di scelta.
  • Base surfaces – lo sfondo della superficie, il testo del corpo e i ruoli di supporto: bordo, accent (link e focus), decorative (evidenziazioni discrete) e colore delle icone.
Ovunque una sezione offra un controllo Color scheme, puoi puntarlo su Scheme 1, Scheme 2 o Transparent.