> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Impostazioni di branding del checkout

> Questo articolo ti guida attraverso le impostazioni di Checkout Branding e come usare ciascuna sezione per personalizzare il tuo checkout.

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.

<div id="how-to-access-it">
  # Come accedervi
</div>

Apri la dashboard **Checkout** in Aftersell e clicca **Edit branding** in cima alla pagina.

<Note>
  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.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Dashboard Checkout di Aftersell con una freccia che indica il pulsante Edit branding" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

L'editor è organizzato in tre gruppi: **Design system**, **Customizations** e **Advanced**.

***

<div id="design-system">
  # Design system
</div>

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.

<div id="global-colors">
  ## Colori globali
</div>

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.

<Note>
  I colori delle superfici e dei pulsanti non si impostano qui. Si trovano in **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## Tipografia
</div>

* **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.

<div id="corner-radius">
  ## Raggio degli angoli
</div>

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**.

***

<div id="customizations">
  # Customizations
</div>

<div id="buttons">
  ## Pulsanti
</div>

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**.

<Note>
  I colori dei pulsanti sono ereditati dagli schemi di colori. Se non è impostato alcun valore nello schema, vengono usati i colori globali.
</Note>

<div id="form-fields">
  ## Campi dei moduli
</div>

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**.

<div id="product-thumbnails">
  ## Miniature dei prodotti
</div>

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).

<div id="header">
  ## Header
</div>

* **Layout** – **Placement** (Top bar, Left section o Right section) e **Alignment** (Left, Center o Right).
* **Container** – **Padding**, **Color scheme** e **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Pagina del checkout con l'header con il nome del negozio evidenziato in alto a sinistra" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Area contenuti
</div>

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

<div id="main-area">
  ## Area principale
</div>

* **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.

<div id="order-summary">
  ## Riepilogo dell'ordine
</div>

* **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**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Miniatura del prodotto nel riepilogo dell'ordine con un bordo dell'immagine evidenziato" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## Footer
</div>

* **Layout** – **Placement** e **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme** e **Show divider**.

***

<div id="advanced">
  # Advanced
</div>

<div id="color-schemes">
  ## Schemi di colori
</div>

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**.