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

# Personalizzazione del design e del tema

> Personalizza l'aspetto del checkout, dello storefront e del portale cliente da un unico luogo. Scegli temi preconfigurati, configura tipografia e colori e applica override per sezione, il tutto con anteprima live.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="Pagina delle impostazioni di design con anteprima live di checkout, portale clienti e vetrina" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  La pagina Design è il tuo hub centrale per il branding di ogni superficie rivolta al cliente: checkout, storefront e portale cliente. Le modifiche si applicano istantaneamente a tutti e tre e vengono visualizzate in anteprima in tempo reale prima di salvare.
</Info>

## Punti chiave

1. **Hub di design unificato** - Configura l'aspetto di checkout, storefront e portale cliente da un'unica pagina.
2. **Temi predefiniti** - Inizia con un tema curato e personalizzalo da lì.
3. **Modalità chiara e scura** - Definisci palette di colori separate per ogni modalità.
4. **Anteprima live** - Vedi come appaiono le modifiche su checkout, portale cliente e storefront prima di salvare.
5. **Override per sezione** - Regola singole sezioni (checkout, storefront, portale cliente) senza influenzare le altre.
6. **Controllo programmatico** - Sovrascrivi i temi al momento del checkout tramite API o Checkout SDK.

## Per iniziare

Naviga su **Impostazioni → Design** nella tua Pannello di Controllo del Commerciante. La pagina Design ha quattro schede:

| Scheda              | Scopo                                                                         |
| ------------------- | ----------------------------------------------------------------------------- |
| **Generale**        | Nome dell'azienda, logo, selezione del tema e impostazioni avanzate globali   |
| **Checkout**        | Sovrascrivi le impostazioni del tema specificamente per la pagina di checkout |
| **Storefront**      | Sovrascrivi le impostazioni del tema e configura il layout dello storefront   |
| **Portale cliente** | Sovrascrivi le impostazioni del tema per il portale cliente                   |

## Impostazioni generali

La scheda **Generale** controlla l'identità di base del brand e il tema globale.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="Scheda generale che mostra impostazioni avanzate con tipografia, colori e configurazione bordo" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### Configurazione di base

| Impostazione       | Descrizione                                                      |
| ------------------ | ---------------------------------------------------------------- |
| **Nome azienda**   | Il nome visualizzato su checkout, storefront e portale cliente   |
| **Logo aziendale** | Il logo del brand mostrato su tutte le pagine rivolte al cliente |
| **Tema**           | Seleziona un tema predefinito come punto di partenza             |

### Impostazioni avanzate

Espandi **Impostazioni avanzate** per accedere a controlli granulari:

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="Impostazioni avanzate espanse che mostrano la configurazione completa dei colori per modalità chiara e scura" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### Tipografia

| Impostazione        | Opzioni                                 | Descrizione                                      |
| ------------------- | --------------------------------------- | ------------------------------------------------ |
| **Font principale** | Qualsiasi font Google                   | Font principale per titoli e testo del corpo     |
| **Font secondario** | Qualsiasi font Google                   | Font di accento per etichette e testo secondario |
| **Dimensione font** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`     | Dimensione base globale del font                 |
| **Peso font**       | `normal`, `medium`, `bold`, `extraBold` | Peso font predefinito                            |

#### Configurazione dei colori

Definisci palette di colori separate per **Modalità chiara** e **Modalità scura**. Ogni modalità supporta le seguenti proprietà:

| Proprietà                     | Descrizione                             |
| ----------------------------- | --------------------------------------- |
| **Sfondo principale**         | Colore principale dello sfondo          |
| **Sfondo secondario**         | Sfondo secondario (schede, card)        |
| **Testo principale**          | Colore principale del testo             |
| **Testo secondario**          | Colore del testo attenuato              |
| **Pulsante primario**         | Sfondo del pulsante principale          |
| **Testo pulsante primario**   | Colore del testo sui pulsanti primari   |
| **Pulsante secondario**       | Sfondo del pulsante secondario          |
| **Testo pulsante secondario** | Colore del testo sui pulsanti secondari |
| **Bordo principale**          | Colore principale del bordo             |
| **Bordo secondario**          | Colore del bordo di accento             |

#### Bordo

| Impostazione     | Descrizione                                                                                                                           |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Raggio bordo** | Controlla l'arrotondamento di input, pulsanti, schede e card (es. `0` per angoli netti, `8px` per arrotondati, `16px` per forma pill) |

## Temi predefiniti

Dodo Payments include quattro temi selezionati. Selezionane uno dal menu a discesa **Tema** nella scheda Generale per applicare immediatamente un design coerente su checkout, storefront e portale cliente.

### Dodo Pulses

Il tema predefinito di Dodo Payments. Accenti verde lime gli conferiscono un tocco energetico e fresco. Tipografia sans-serif pulita con spazi generosi.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="Tema Dodo Pulses in modalità chiara che mostra checkout, portale clienti e vetrina" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="Tema Dodo Pulses in modalità scura che mostra checkout, portale clienti e vetrina" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

Un tema orientato agli sviluppatori con tipografia monospaziata e accenti blu reale. Angoli netti ed estetica tecnica che si abbina bene a strumenti da sviluppatore e prodotti API-first.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="Tema Terminal in modalità chiara che mostra checkout con accenti blu e carattere monospaziato" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="Tema Terminal in modalità scura che mostra checkout con accenti blu e carattere monospaziato" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

Accenti ambrati e dorati caldi con stile moderno e arrotondato. Audace e altamente contrastato, ideale per prodotti consumer che vogliono un feel premium.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="Tema Bumblebee in modalità chiara che mostra checkout con accenti ambra" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="Tema Bumblebee in modalità scura che mostra checkout con accenti dorati" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

Accenti giocosi rosa e magenta con angoli completamente arrotondati. Uno stile moderno e accessibile che funziona alla grande per strumenti creativi, prodotti di design e brand lifestyle.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="Tema Bubblegum in modalità chiara che mostra checkout, portale clienti e vetrina con accenti rosa" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="Tema Bubblegum in modalità scura che mostra checkout, portale clienti e vetrina con accenti rosa" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  Dopo aver selezionato un tema predefinito, puoi personalizzare ulteriormente le singole proprietà nelle Impostazioni avanzate. Qualsiasi proprietà non specificata ricade sui valori predefiniti del tema.
</Tip>

## Override per sezione

Ogni scheda sezione (Checkout, Storefront, Portale cliente) include un interruttore **Override tema**. Quando abilitato, puoi personalizzare l'aspetto di quella sezione indipendentemente dal tema globale.

### Scheda Checkout

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="Scheda di checkout che mostra un'anteprima completa del checkout con dettagli del prodotto e modulo di pagamento" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

Sovrascrivi tipografia, colori e impostazioni dei bordi specificamente per l'esperienza di checkout. L'anteprima live mostra:

* Informazioni sul prodotto e prezzi
* Opzioni di checkout rapido (Apple Pay, Google Pay)
* Selezione del metodo di pagamento e modulo carta
* Input del codice sconto e riepilogo dei prezzi

### Scheda Storefront

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="Scheda della vetrina che mostra URL del negozio, controlli di branding e anteprima della vetrina" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

Configura impostazioni specifiche dello storefront:

| Impostazione                 | Descrizione                                                                  |
| ---------------------------- | ---------------------------------------------------------------------------- |
| **URL del negozio**          | L'indirizzo del tuo storefront (es. `store.dodopayments.com/your-store`)     |
| **Nome del negozio**         | Attiva e imposta il nome visualizzato sul tuo storefront                     |
| **Logo del negozio**         | Attiva e carica un logo per l'intestazione dello storefront                  |
| **Banner del negozio**       | Attiva e carica un'immagine di banner                                        |
| **Descrizione del prodotto** | Attiva per mostrare o nascondere le descrizioni dei prodotti sulle card      |
| **Override tema**            | Abilita per personalizzare tipografia, colori e bordi solo per lo storefront |

### Scheda Portale cliente

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="Scheda del portale clienti che mostra la gestione degli abbonamenti, la cronologia delle fatturazioni e l'anteprima dei metodi di pagamento" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

Sovrascrivi il tema per il portale cliente, che include:

* Gestione abbonamenti
* Storico fatture
* Metodi di pagamento
* Wallet e crediti

## Risorse correlate

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    Funzionalità di checkout, comprese valuta, lingua, tasse, sconti e altro.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    Incorpora il checkout come overlay modale nella tua pagina.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    Incorpora il checkout direttamente nel layout della tua pagina.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    Configura e gestisci il tuo storefront brandizzato.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    Portale self-service per abbonamenti e fatturazione.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    Gestisci più brand sotto un unico account con branding separato.
  </Card>
</CardGroup>