La página de Diseño es tu centro neurálgico para marcar cada superficie orientada al cliente: proceso de pago, escaparate y portal del cliente. Los cambios se aplican instantáneamente en los tres y se muestran en vista previa en tiempo real antes de guardar.
Aspectos destacados
- Centro de diseño unificado: configura la apariencia del proceso de pago, escaparate y portal del cliente desde una sola página.
- Temas predefinidos: comienza con un tema seleccionado y personalízalo desde ahí.
- Modo claro y oscuro: define paletas de colores distintas para cada modo.
- Vista previa en vivo: observa cómo quedan los cambios en el proceso de pago, portal del cliente y escaparate antes de guardar.
- Anulaciones por sección: ajusta secciones individuales (proceso de pago, escaparate, portal del cliente) sin afectar a las demás.
- Control programático: anula temas durante el pago mediante la API o el Checkout SDK.
Primeros pasos
Navega a Diseño en la barra lateral principal del Panel del comerciante. La página de Diseño tiene cuatro pestañas:| Pestaña | Propósito |
|---|---|
| General | Nombre del negocio, logotipo, selección de tema y ajustes avanzados globales |
| Proceso de pago | Anula la configuración del tema específicamente para la página de pago |
| Escaparate | Anula la configuración del tema y configura el diseño del escaparate |
| Portal del cliente | Anula la configuración del tema para el portal del cliente |
Ajustes generales
La pestaña General controla la identidad de marca base y el tema global.
Configuración básica
| Ajuste | Descripción |
|---|---|
| Nombre del negocio | El nombre que se muestra en el proceso de pago, escaparate y portal del cliente |
| Logotipo del negocio | El logotipo de tu marca mostrado en todas las páginas orientadas al cliente |
| Tema | Selecciona un tema predefinido como punto de partida |
Ajustes avanzados
Expande Ajustes avanzados para acceder a controles detallados:
Tipografía
| Ajuste | Opciones | Descripción |
|---|---|---|
| Fuente primaria | Cualquier fuente de Google | Fuente principal para encabezados y texto del cuerpo |
| Fuente secundaria | Cualquier fuente de Google | Fuente de acento para etiquetas y texto secundario |
| Tamaño de fuente | xs, sm, md, lg, xl, 2xl | Tamaño de fuente base global |
| Peso de fuente | normal, medium, bold, extraBold | Peso de fuente predeterminado |
Configuración de colores
Define paletas de colores separadas para Modo claro y Modo oscuro. Cada modo admite las siguientes propiedades:| Propiedad | Descripción |
|---|---|
| Fondo principal | Color principal de fondo |
| Fondo secundario | Fondo secundario (pestañas, tarjetas) |
| Texto principal | Color principal del texto |
| Texto secundario | Color de texto atenuado |
| Botón primario | Fondo del botón primario |
| Texto del botón primario | Color de texto en botones primarios |
| Botón secundario | Fondo del botón secundario |
| Texto del botón secundario | Color de texto en botones secundarios |
| Borde principal | Color principal del borde |
| Borde secundario | Color de borde de acento |
Borde
| Ajuste | Descripción |
|---|---|
| Radio de borde | Controla la redondez de campos, botones, pestañas y tarjetas (por ejemplo, 0 para esquinas pronunciadas, 8px para redondeadas, 16px para forma de pastilla) |
Temas predefinidos
Dodo Payments incluye cuatro temas seleccionados. Selecciona uno desde el desplegable Tema en la pestaña General para aplicar instantáneamente un diseño coherente en el proceso de pago, escaparate y portal del cliente.Dodo Pulses
El tema predeterminado de Dodo Payments. Los acentos verde lima le dan una sensación enérgica y fresca. Tipografía sans-serif limpia con espaciado generoso.- Light Mode
- Dark Mode
Terminal
Un tema orientado a desarrolladores con tipografía monoespaciada y acentos azul real. Esquinas pronunciadas y una estética técnica que combina bien con herramientas para desarrolladores y productos API-first.- Light Mode
- Dark Mode
Bumblebee
Acentos cálidos ámbar y dorados con estilo moderno y redondeado. Audaz y de alto contraste, ideal para productos orientados al consumidor que buscan una apariencia premium.- Light Mode
- Dark Mode
Bubblegum
Acentos juguetones en rosa y magenta con esquinas completamente redondeadas. Una estética moderna y accesible que funciona muy bien para herramientas creativas, productos de diseño y marcas de estilo de vida.- Light Mode
- Dark Mode
Anulaciones por sección
Cada pestaña de sección (Proceso de pago, Escaparate, Portal del cliente) incluye un interruptor Anular tema. Cuando está activado, puedes personalizar la apariencia de esa sección independientemente del tema global.Pestaña Proceso de pago
- Información y precios del producto
- Opciones de pago express (Apple Pay, Google Pay)
- Selección de método de pago y formulario de tarjeta
- Código de descuento y desglose de precios
Pestaña Escaparate
| Ajuste | Descripción |
|---|---|
| URL de la tienda | La dirección de tu escaparate (por ejemplo, store.dodopayments.com/your-store) |
| Nombre de la tienda | Activa y define el nombre que se muestra en el escaparate |
| Logotipo de la tienda | Activa y sube un logotipo para el encabezado del escaparate |
| Banner de la tienda | Activa y sube una imagen de banner |
| Descripción del producto | Activa para mostrar u ocultar descripciones de productos en las tarjetas |
| Anular tema | Activa para personalizar tipografía, colores y bordes solo para el escaparate |
Pestaña Portal del cliente
- Gestión de suscripciones
- Historial de facturación
- Métodos de pago
- Billetera y créditos
Recursos relacionados
Checkout Features
Funciones del proceso de pago, incluida la moneda, el idioma, los impuestos, los descuentos y más.
Overlay Checkout SDK
Incrusta el proceso de pago como una superposición modal en tu página.
Inline Checkout SDK
Incrusta el proceso de pago directamente en el diseño de tu página.
Storefront
Configura y administra tu escaparate con marca.
Customer Portal
Portal de autoservicio para clientes de suscripciones y facturación.
Multi-Brand Setup
Gestiona múltiples marcas bajo una sola cuenta con branding independiente.