> ## 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. # Personnalisation du design et du thème > Personnalisez l'apparence et l'ambiance de votre checkout, vitrine et portail client depuis un seul endroit. Choisissez des thèmes préconfigurés, configurez la typographie et les couleurs, et appliquez des modifications par section, le tout avec aperçu en direct. Page des paramètres de conception avec aperçu en direct du paiement, du portail client et de la vitrine La page Design est votre centre névralgique pour l'identité visuelle de toutes les interfaces client : checkout, vitrine et portail client. Les modifications s'appliquent instantanément aux trois et sont prévisualisées en temps réel avant enregistrement. ## Points clés 1. **Hub de design unifié** - Configurez l'apparence du checkout, de la vitrine et du portail client depuis une seule page. 2. **Thèmes préconçus** - Commencez avec un thème sélectionné et personnalisez-le ensuite. 3. **Mode clair et sombre** - Définissez des palettes de couleurs distinctes pour chaque mode. 4. **Aperçu en direct** - Voyez à quoi ressemblent vos modifications sur le checkout, le portail client et la vitrine avant de sauvegarder. 5. **Personnalisations par section** - Ajustez finement chaque section (checkout, vitrine, portail client) sans impacter les autres. 6. **Contrôle programmatique** - Personnalisez les thèmes au moment du checkout via l’API ou le Checkout SDK. ## Premiers pas Naviguez vers **Paramètres → Design** dans votre tableau de bord marchand. La page Design comporte quatre onglets : | Onglet | Objectif | | ------------------- | --------------------------------------------------------------------------------- | | **General** | Nom de l’entreprise, logo, sélection de thème et paramètres avancés globaux | | **Checkout** | Définissez les paramètres de thème uniquement pour la page de checkout | | **Storefront** | Personnalisez les paramètres de thème et configurez la mise en page de la vitrine | | **Customer Portal** | Adaptez les paramètres de thème pour le portail client | ## Paramètres généraux L’onglet **General** contrôle votre identité de marque de base et le thème global. Onglet Général montrant des paramètres avancés avec typographie, couleurs et configuration des bordures ### Configuration de base | Paramètre | Description | | ----------------- | ----------------------------------------------------------------------- | | **Business Name** | Le nom affiché sur le checkout, la vitrine et le portail client | | **Business Logo** | Votre logo de marque affiché sur toutes les pages destinées aux clients | | **Theme** | Sélectionnez un thème préconçu comme point de départ | ### Paramètres avancés Déployez les **Paramètres avancés** pour accéder à des contrôles plus précis : Paramètres avancés étendus montrant la configuration complète des couleurs pour les modes clair et sombre #### Typographie | Paramètre | Options | Description | | ------------------ | --------------------------------------- | ------------------------------------------------------------- | | **Primary Font** | Any Google Font | Police principale pour les titres et le texte du corps | | **Secondary Font** | Any Google Font | Police d’accent pour les étiquettes et les textes secondaires | | **Font Size** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | Taille de police de base globale | | **Font Weight** | `normal`, `medium`, `bold`, `extraBold` | Graisse de police par défaut | #### 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 : | Propriété | Description | | ------------------------- | ---------------------------------------------- | | **Background Primary** | Couleur d’arrière-plan principale | | **Background Secondary** | Arrière-plan secondaire (onglets, cartes) | | **Text Primary** | Couleur principale du texte | | **Text Secondary** | Couleur du texte désaturé | | **Button Primary** | Couleur d’arrière-plan des boutons principaux | | **Button Primary Text** | Couleur du texte des boutons principaux | | **Button Secondary** | Couleur d’arrière-plan des boutons secondaires | | **Button Secondary Text** | Couleur du texte des boutons secondaires | | **Border Primary** | Couleur principale des bordures | | **Border Secondary** | Couleur d’accent des bordures | #### Bordure | Paramètre | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Border Radius** | Contrôle la rondeur des champs, boutons, onglets et cartes (par ex. `0` pour des coins nets, `8px` pour des coins arrondis, `16px` pour un style pilule) | ## 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. Thème Dodo Pulses en mode clair montrant le paiement, le portail client et la vitrine Thème Dodo Pulses en mode sombre montrant le paiement, le portail client et la vitrine ### 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. Thème Terminal en mode clair montrant le paiement avec des accents bleus et une police monospace Thème Terminal en mode sombre montrant le paiement avec des accents bleus et une police monospace ### 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. Thème Bumblebee en mode clair montrant le paiement avec des accents ambrés Thème Bumblebee en mode sombre montrant le paiement avec des accents dorés ### 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. Thème Bubblegum en mode clair montrant le paiement, le portail client, et la vitrine avec des accents roses Thème Bubblegum en mode sombre montrant le paiement, le portail client, et la vitrine avec des accents roses Après avoir sélectionné un thème préconçu, vous pouvez affiner les propriétés individuelles dans les Paramètres avancés. Les propriétés non spécifiées reprennent les valeurs par défaut du thème. ## 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 Onglet de paiement montrant un aperçu complet du paiement avec les détails du produit et le formulaire de paiement 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 Onglet de vitrine montrant l'URL du magasin, les contrôles de branding, et l'aperçu de la vitrine Configurez les paramètres spécifiques à la vitrine : | Paramètre | Description | | ----------------------- | -------------------------------------------------------------------------------------------------- | | **Store URL** | L’adresse de votre vitrine (par ex. `store.dodopayments.com/your-store`) | | **Store Name** | Activez et définissez le nom affiché sur votre vitrine | | **Store Logo** | Activez et téléversez un logo pour l’en-tête de la vitrine | | **Store Banner** | Activez et téléversez une bannière | | **Product Description** | Activez pour afficher ou masquer les descriptions produit sur les cartes | | **Override Theme** | Activez pour personnaliser la typographie, les couleurs et les bordures uniquement pour la vitrine | ### Onglet Customer Portal Onglet portail client montrant la gestion des abonnements, l'historique de facturation et un aperçu des méthodes de paiement 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 ## Ressources associées Fonctionnalités de checkout incluant devise, langue, tax, remises et bien plus. Intégrez le checkout comme superposition modale sur votre page. Intégrez le checkout directement dans la mise en page de votre page. Configurez et gérez votre vitrine personnalisée. Portail libre-service client pour les abonnements et la facturation. Gérer plusieurs marques sous un même compte avec un branding distinct.