Personnalisation du design et du thème

​

Points clés

1. Centre de design unifié - Configurez l’apparence du checkout, du storefront et du Customer Portal depuis une seule page.
2. Thèmes préconfigurés - Commencez avec un thème sélectionné avec soin, puis personnalisez-le.
3. Modes clair et sombre - Définissez des palettes de couleurs distinctes pour chaque mode.
4. Aperçu en direct - Visualisez l’apparence de vos modifications sur le checkout, le Customer Portal et le storefront avant de les enregistrer.
5. Remplacements par section - Ajustez individuellement certaines sections (checkout, storefront, Customer Portal) sans modifier les autres.
6. Contrôle programmatique - Remplacez les thèmes au moment du checkout via l’API ou le Checkout SDK.
7. Copier le design du mode test vers le mode live - Transférez en une étape vers le mode live un design perfectionné en mode test.

​

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 propriétés suivantes :

​

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

Personnalisez la typographie, les couleurs et les bordures spécifiquement pour l’expérience checkout. L’aperçu en direct affiche :

• les informations produit et le détail des prix
• les options d’achat express (Apple Pay, Google Pay)
• la sélection des méthodes de paiement et le formulaire de carte
• le champ de code promo et la ventilation des prix

​

Onglet Storefront

Configurez les paramètres spécifiques à la vitrine :

​

Onglet Customer Portal

Personnalisez le thème du portail client, qui comprend :

• la gestion des abonnements
• l’historique de facturation
• les moyens de paiement
• le portefeuille et les crédits

​

Copier le design du mode test vers le mode live

Le mode test et le mode live disposent de configurations de design distinctes : un thème créé pendant les tests n’apparaît donc pas automatiquement pour les vrais clients. Au lieu de le recréer manuellement, copiez votre design du mode test vers le mode live en une seule étape. La copie couvre toutes les surfaces de design — paramètres généraux, checkout, Customer Portal et remplacements du storefront — ainsi que l’image de marque de votre storefront.

​

Ressources associées