La página Design es tu centro principal para aplicar la identidad de marca a todas las superficies orientadas al cliente: checkout, storefront y Customer Portal. Los cambios se aplican al instante en las tres y se previsualizan en tiempo real antes de guardarlos. El modo de prueba y el modo activo mantienen diseños separados; consulta Copiar el diseño del modo de prueba al modo activo.
Aspectos destacados
- Centro de diseño unificado - Configura la apariencia de checkout, storefront y Customer Portal desde una sola página.
- Temas prediseñados - Empieza con un tema seleccionado y personalízalo desde ahí.
- Modo claro y oscuro - Define paletas de colores independientes para cada modo.
- Vista previa en vivo - Comprueba cómo se ven tus cambios en checkout, Customer Portal y storefront antes de guardarlos.
- Anulaciones por sección - Ajusta secciones individuales (checkout, storefront y Customer Portal) sin afectar a las demás.
- Control programático - Anula los temas durante el checkout mediante la API o el Checkout SDK.
- Copiar el diseño de prueba al modo activo - Pasa un diseño perfeccionado en el modo de prueba al modo activo en un solo paso.
Primeros pasos
Navega a Configuración → Diseño en tu Panel de Control de Comerciante. La página de Diseño tiene cuatro pestañas:Ajustes generales
La pestaña General controla la identidad de marca base y el tema global.
Configuración básica
Ajustes avanzados
Expande Ajustes avanzados para acceder a controles detallados:
Tipografía
Configuración de colores
Define paletas de colores separadas para Modo claro y Modo oscuro. Cada modo admite las siguientes propiedades:Borde
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
Dodo Pulses in light 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
Terminal in light 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
Bumblebee in light 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
Bubblegum in light 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
Pestaña Portal del cliente
- Gestión de suscripciones
- Historial de facturación
- Métodos de pago
- Billetera y créditos
Copiar el diseño del modo de prueba al modo activo
El modo de prueba y el modo activo mantienen configuraciones de diseño independientes, por lo que un tema que crees durante las pruebas no aparece automáticamente para los clientes reales. En lugar de volver a crearlo manualmente, copia tu diseño del modo de prueba al modo activo en un solo paso. La copia incluye todas las superficies de diseño —configuración general, checkout, Customer Portal y anulaciones de storefront— junto con la identidad de marca de tu storefront.Recursos relacionados
Checkout Features
Funciones de checkout, como moneda, idioma, impuestos, descuentos y mucho más.
Overlay Checkout SDK
Inserta checkout como una superposición modal en tu página.
Inline Checkout SDK
Inserta checkout directamente en el diseño de tu página.
Storefront
Configura y administra tu storefront con identidad de marca.
Customer Portal
Portal de autoservicio Customer Portal para suscripciones y facturación.
Multi-Brand Setup
Gestiona varias marcas en una sola cuenta con identidades de marca independientes.