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.
Punti chiave
- Hub di design unificato - Configura l’aspetto di checkout, storefront e portale cliente 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 ogni modalità.
- Anteprima live - Vedi come appaiono le modifiche su checkout, portale cliente e storefront prima di salvare.
- Override per sezione - Regola singole sezioni (checkout, storefront, portale cliente) senza influenzare le altre.
- Controllo programmatico - Sovrascrivi i temi al momento del checkout tramite API o Checkout SDK.
Per iniziare
Vai su Design nella barra laterale principale della Merchant Dashboard. 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.
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:
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.- Light Mode
- Dark 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
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
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
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
- 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
| 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
- Gestione abbonamenti
- Storico fatture
- Metodi di pagamento
- Wallet e crediti
Risorse correlate
Checkout Features
Funzionalità di checkout, comprese valuta, lingua, tasse, 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 brandizzato.
Customer Portal
Portale self-service per abbonamenti e fatturazione.
Multi-Brand Setup
Gestisci più brand sotto un unico account con branding separato.