Personalizzazione del design e del tema

Pagina delle impostazioni di design con anteprima live di checkout, portale clienti e vetrina

La pagina Design è il tuo hub centrale per definire il branding di ogni superficie rivolta ai clienti: checkout, storefront e Customer Portal. Le modifiche vengono applicate istantaneamente a tutte e tre e visualizzate in anteprima in tempo reale prima del salvataggio. La modalità di test e la modalità live hanno design separati — consulta Copiare il design dalla modalità di test alla modalità live.

Punti chiave

Hub di design unificato — Configura l’aspetto di checkout, storefront e Customer Portal da un’unica pagina
Temi predefiniti — Inizia con un tema curato e personalizzalo da lì
Modalità chiara e scura — Definisci palette di colori separate per ciascuna modalità
Anteprima live — Visualizza l’aspetto delle modifiche su tutte le superfici prima di salvare
Override per sezione — Perfeziona singole sezioni senza influire sulle altre
Controllo programmatico — Esegui l’override dei temi al momento del checkout tramite Checkout Sessions API (customization.theme_config). Il campo theme_config di una session ha la precedenza sul design configurato nella dashboard. L’opzione themeConfig lato client di Checkout SDK è deprecata
Copia il design di test in live — Trasferisci in un unico passaggio un design perfezionato in modalità di test alla modalità live

Per iniziare

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

Scheda	Scopo
Generale	Nome dell’attività, logo, selezione del tema e impostazioni avanzate globali
Checkout	Esegui l’override delle impostazioni del tema specificamente per la pagina di checkout
Storefront	Esegui l’override delle impostazioni del tema e configura il layout dello storefront
Customer Portal	Esegui l’override delle impostazioni del tema per il Customer Portal

Impostazioni generali

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

Scheda generale che mostra impostazioni avanzate con tipografia, colori e configurazione bordo

Configurazione di base

Impostazione	Descrizione
Nome dell’attività	Il nome visualizzato su checkout, storefront e Customer Portal
Logo dell’attività	Il logo del tuo brand mostrato su tutte le pagine rivolte ai clienti
Tema	Seleziona un tema predefinito da usare come punto di partenza

Impostazioni avanzate

Espandi Impostazioni avanzate per accedere a controlli granulari:

Tipografia

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

Configurazione dei colori

Definisci palette di colori separate per la modalità chiara e la modalità scura. Ogni modalità supporta:

Proprietà	Descrizione
Sfondo principale	Colore di sfondo principale
Sfondo secondario	Sfondo secondario (schede, card)
Testo principale	Colore del testo principale
Testo secondario	Colore del testo attenuato
Pulsante principale	Sfondo del pulsante principale
Testo del pulsante principale	Colore del testo sui pulsanti principali
Pulsante secondario	Sfondo del pulsante secondario
Testo del pulsante secondario	Colore del testo sui pulsanti secondari
Bordo principale	Colore del bordo principale
Bordo secondario	Colore del bordo d’accento

Bordo

Impostazione	Descrizione
Raggio del bordo	Controlla la rotondità di campi, pulsanti, schede e card (ad esempio, `0` per angoli netti, `8px` per angoli arrotondati, `16px` per una forma a pillola)

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.

Light Mode
Dark Mode

Tema Dodo Pulses in modalità chiara che mostra checkout, portale clienti e vetrina — Dodo Pulses in light mode

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.

Light Mode
Dark Mode

Tema Terminal in modalità chiara che mostra checkout con accenti blu e carattere monospaziato — Terminal in light mode

Bumblebee

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

Light Mode
Dark Mode

Tema Bumblebee in modalità chiara che mostra checkout con accenti ambra — Bumblebee in light mode

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.

Light Mode
Dark Mode

Tema Bubblegum in modalità chiara che mostra checkout, portale clienti e vetrina con accenti rosa — Bubblegum in light mode

Dopo aver selezionato un tema predefinito, personalizza le singole proprietà nelle Impostazioni avanzate. Le proprietà non specificate ereditano i valori predefiniti del tema.

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

Scheda di checkout che mostra un'anteprima completa del checkout con dettagli del prodotto e modulo di pagamento

Esegui l’override delle impostazioni di tipografia, colori e bordi specificamente per l’esperienza di checkout. L’anteprima in tempo reale mostra:

Informazioni sul prodotto e prezzi
Opzioni di checkout rapido (Apple Pay, Google Pay)
Selezione del metodo di pagamento e modulo della carta
Campo per il codice sconto e dettaglio del prezzo

Scheda Storefront

Configura le impostazioni specifiche dello storefront:

Impostazione	Descrizione
URL dello store	L’indirizzo del tuo storefront (ad esempio, `store.dodopayments.com/your-store`)
Nome dello store	Attiva o disattiva e imposta il nome visualizzato sullo storefront
Logo dello store	Attiva o disattiva e carica un logo per l’intestazione dello storefront
Banner dello store	Attiva o disattiva e carica un’immagine banner
Descrizione del prodotto	Attiva o disattiva la visualizzazione delle descrizioni dei prodotti nelle card
Override del tema	Abilita la personalizzazione di tipografia, colori e bordi solo per lo storefront

Scheda Customer Portal

Esegui l’override del tema per il Customer Portal, che include:

Gestione degli abbonamenti
Cronologia di fatturazione
Metodi di pagamento
Portafoglio e crediti

Copiare il design dalla modalità di test alla modalità live

La modalità di test e la modalità live mantengono configurazioni di design separate. Un tema creato durante i test non viene visualizzato automaticamente dai clienti reali. Invece di ricrearlo manualmente, copia il design dalla modalità di test alla modalità live in un unico passaggio.

Open Design in Test Mode

Passa alla modalità di test e vai su Impostazioni → Design. Salva prima tutte le modifiche in sospeso: viene copiato solo il design di test salvato.

Start the Copy

Fai clic su Copia in modalità live. Il pulsante viene visualizzato quando hai un tema salvato o uno storefront di test pubblicato; inoltre, la modalità live deve essere attivata.

Choose What to Copy

Seleziona Tema e personalizzazioni (il tema generale più gli override di checkout, storefront e Customer Portal) e Dettagli dello storefront (nome dello store, logo e banner). I dettagli dello storefront non sono disponibili se non è stato pubblicato alcuno storefront in modalità di test.

Confirm

Fai clic su Copia in modalità live nella finestra di dialogo.

La copia sovrascrive il design esistente nella modalità live. Dopo la copia, esamina il checkout live e lo storefront per verificare che tutto abbia l’aspetto previsto.

Pagine correlate

Checkout Features

Funzionalità di checkout, tra cui valuta, lingua, imposte, sconti e altro.

Overlay Checkout SDK

Incorpora il checkout come overlay modale nella tua pagina.

Inline Checkout SDK

Incorpora il checkout direttamente nel layout della tua pagina.

Storefront

Configura e gestisci il tuo storefront con il tuo branding.

Customer Portal

Portale self-service per i clienti per la gestione di abbonamenti e fatturazione.

Multi-Brand Setup

Gestisci più brand con un unico account e branding separato.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Punti chiave

Per iniziare