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
- Hub de design unifié - Configurez l’apparence du checkout, de la vitrine et du portail client depuis une seule page.
- Thèmes préconçus - Commencez avec un thème sélectionné et personnalisez-le ensuite.
- Mode clair et sombre - Définissez des palettes de couleurs distinctes pour chaque mode.
- Aperçu en direct - Voyez à quoi ressemblent vos modifications sur le checkout, le portail client et la vitrine avant de sauvegarder.
- Personnalisations par section - Ajustez finement chaque section (checkout, vitrine, portail client) sans impacter les autres.
- Contrôle programmatique - Personnalisez les thèmes au moment du checkout via l’API ou le Checkout SDK.
Premiers pas
Accédez à Design dans la barre latérale principale de 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.
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 :
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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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
- 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
| 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
- la gestion des abonnements
- l’historique de facturation
- les moyens de paiement
- le portefeuille et les crédits
Ressources associées
Checkout Features
Fonctionnalités de checkout incluant devise, langue, tax, remises et bien plus.
Overlay Checkout SDK
Intégrez le checkout comme superposition modale sur votre page.
Inline Checkout SDK
Intégrez le checkout directement dans la mise en page de votre page.
Storefront
Configurez et gérez votre vitrine personnalisée.
Customer Portal
Portail libre-service client pour les abonnements et la facturation.
Multi-Brand Setup
Gérer plusieurs marques sous un même compte avec un branding distinct.