Personnalisation du design et du thème

La page Design est votre centre névralgique pour définir l’identité visuelle de toutes les surfaces visibles par les clients : checkout, storefront et Customer Portal. Les modifications s’appliquent instantanément aux trois surfaces et sont prévisualisées en temps réel avant leur enregistrement. Le mode test et le mode live utilisent des designs distincts — consultez Copier le design du mode test vers le mode live.

​

Points clés

• Hub de design unifié — Configurez l’apparence du checkout, de la vitrine et du Customer Portal depuis une seule page
• Thèmes préconçus — Commencez avec un thème sélectionné et personnalisez-le
• Mode clair et sombre — Définissez des palettes de couleurs distinctes pour chaque mode
• Aperçu en direct — Voyez à quoi ressemblent vos modifications sur toutes les interfaces avant de les enregistrer
• Remplacements par section — Ajustez individuellement chaque section sans affecter les autres
• Contrôle programmatique — Remplacez les thèmes au moment du checkout via l’API Checkout Sessions (customization.theme_config). Le theme_config d’une session est prioritaire sur le design configuré dans le tableau de bord. L’option themeConfig côté client du Checkout SDK est obsolète
• Copier le design de test en production — Transférez en une seule étape un design finalisé en mode test vers le mode production

​

Premiers pas

Naviguez vers Paramètres → Design dans votre tableau de bord marchand. La page Design comporte quatre onglets :

​

Paramètres généraux

L’onglet General contrôle votre identité de marque de base et le thème global.

​

Configuration de base

​

Paramètres avancés

Déployez les Paramètres avancés pour accéder à des contrôles plus précis :

​

Typographie

​

Configuration des couleurs

Définissez des palettes de couleurs distinctes pour le mode clair et le mode sombre. Chaque mode prend en charge les éléments suivants :

​

Bordure

​

Thèmes préconçus

Dodo Payments propose quatre thèmes sélectionnés. Choisissez-en un dans le menu déroulant Theme de l’onglet General pour appliquer instantanément un design cohérent au checkout, à la vitrine et au portail client.

​

Dodo Pulses

Le thème par défaut de Dodo Payments. Des accents vert citron lui donnent une énergie fraîche. Une typographie sans-serif épurée avec un espacement généreux.

​

Terminal

Un thème orienté développeur avec une typographie monospace et des accents bleu roi. Des coins nets et une esthétique technique qui s’accordent bien avec les produits orientés outils dev et API-first.

​

Bumblebee

Des accents ambre et dorés chaleureux avec un style moderne et arrondi. Audacieux et contrasté, parfait pour les produits orientés grand public qui veulent dégager une impression premium.

​

Bubblegum

Accents roses et magenta ludiques avec des coins entièrement arrondis. Un look moderne et accessible idéal pour les outils créatifs, produits design et marques lifestyle.

​

Personnalisations par section

Chaque onglet section (Checkout, Storefront, Customer Portal) comprend un interrupteur Override Theme. Une fois activé, vous pouvez personnaliser l’apparence de cette section indépendamment du thème global.

​

Onglet Checkout

Remplacez les paramètres de typographie, de couleurs et de bordures spécifiquement pour l’expérience de checkout. La prévisualisation en direct affiche :

• Informations sur le produit et tarification
• Options de checkout express (Apple Pay, Google Pay)
• Sélection du moyen de paiement et formulaire de carte
• Saisie du code de réduction et détail du prix

​

Onglet Storefront

Configurez les paramètres spécifiques au storefront :

​

Onglet Customer Portal

Remplacez le thème du Customer Portal, qui comprend :

• Gestion des abonnements
• Historique de facturation
• Moyens de paiement
• Portefeuille et crédits

​

Copier le design du mode test vers le mode live

Le mode test et le mode live conservent des configurations de design distinctes. Un thème créé pendant les tests n’apparaît pas automatiquement pour les clients réels. Plutôt que de le recréer manuellement, copiez votre design du mode test vers le mode live en une seule étape.

​

Pages associées