Personalización de diseño y temas

Página de configuración del diseño con vista previa en vivo del pago, portal del cliente y escaparate

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 live mantienen diseños independientes; consulta Copiar el diseño del modo de prueba al modo live.

Aspectos destacados

Centro de diseño unificado — Configura la apariencia del checkout, storefront y Customer Portal desde una sola página
Temas prediseñados — Comienza con un tema seleccionado y personalízalo a partir de 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 todas las superficies antes de guardarlos
Anulaciones por sección — Ajusta secciones individuales sin afectar a las demás
Control programático — Anula los temas durante el checkout mediante la Checkout Sessions API (customization.theme_config). El theme_config de una sesión tiene prioridad sobre el diseño del dashboard. La opción themeConfig del lado del cliente del Checkout SDK está obsoleta
Copiar el diseño de prueba al entorno real — Transfiere a live mode un diseño perfeccionado en test mode 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:

Pestaña	Propósito
General	Nombre de la empresa, logotipo, selección del tema y configuración avanzada global
Checkout	Sobrescribe la configuración del tema específicamente para la página de checkout
Storefront	Sobrescribe la configuración del tema y configura el diseño del storefront
Customer Portal	Sobrescribe la configuración del tema para Customer Portal

Ajustes generales

La pestaña General controla la identidad de marca base y el tema global.

Pestaña General mostrando configuraciones avanzadas con tipografía, colores y configuración de bordes

Configuración básica

Configuración	Descripción
Nombre de la empresa	El nombre que se muestra en checkout, storefront y Customer Portal
Logotipo de la empresa	El logotipo de tu marca que se muestra en todas las páginas orientadas al cliente
Tema	Selecciona un tema prediseñado como punto de partida

Ajustes avanzados

Expande Ajustes avanzados para acceder a controles detallados:

Configuraciones avanzadas expandidas mostrando configuración completa de colores para modos claro y oscuro

Tipografía

Configuración	Opciones	Descripción
Fuente principal	Cualquier Google Font	Fuente principal para los encabezados y el texto del cuerpo
Fuente secundaria	Cualquier Google Font	Fuente de acento para las etiquetas y el 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 independientes para el modo claro y el modo oscuro. Cada modo admite:

Propiedad	Descripción
Fondo principal	Color de fondo principal
Fondo secundario	Fondo secundario (pestañas, tarjetas)
Texto principal	Color del texto principal
Texto secundario	Color del texto atenuado
Botón principal	Fondo del botón principal
Texto del botón principal	Color del texto de los botones principales
Botón secundario	Fondo del botón secundario
Texto del botón secundario	Color del texto de los botones secundarios
Borde principal	Color del borde principal
Borde secundario	Color del borde de acento

Borde

Configuración	Descripción
Radio del borde	Controla el redondeado de los campos, botones, pestañas y tarjetas (por ejemplo, `0` para esquinas rectas, `8px` para esquinas redondeadas e `16px` para forma de píldora)

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

Tema Dodo Pulses en modo claro mostrando pago, portal del cliente y escaparate — 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

Tema Terminal en modo claro mostrando pago con acentos azules y fuente monoespaciada — 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

Tema Bumblebee en modo claro mostrando pago con acentos ámbar — 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

Tema Bubblegum en modo claro mostrando pago, portal del cliente y escaparate con acentos rosados — Bubblegum in light mode

Después de seleccionar un tema prediseñado, personaliza propiedades individuales en Configuración avanzada. Las propiedades no especificadas utilizan los valores predeterminados del tema.

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

Pestaña de pago mostrando vista previa completa del pago con detalles del producto y formulario de pago

Sobrescribe la tipografía, los colores y la configuración de los bordes específicamente para la experiencia de checkout. La vista previa en tiempo real muestra:

Información y precios del producto
Opciones de checkout exprés (Apple Pay, Google Pay)
Selección del método de pago y formulario de tarjeta
Campo de código de descuento y desglose del precio

Pestaña de Storefront

Configura los ajustes específicos del storefront:

Configuración	Descripción
URL de la tienda	La dirección de tu storefront (por ejemplo, `store.dodopayments.com/your-store`)
Nombre de la tienda	Activa o desactiva y establece el nombre que se muestra en tu storefront
Logotipo de la tienda	Activa o desactiva y carga un logotipo para el encabezado del storefront
Banner de la tienda	Activa o desactiva y carga una imagen de banner
Descripción del producto	Activa o desactiva la visualización de las descripciones de los productos en las tarjetas
Sobrescribir tema	Actívalo para personalizar la tipografía, los colores y los bordes únicamente para el storefront

Pestaña de Customer Portal

Sobrescribe el tema de Customer Portal, que incluye:

Gestión de suscripciones
Historial de facturación
Métodos de pago
Cartera y créditos

Copiar el diseño del modo de prueba al modo live

El modo de prueba y el modo live mantienen configuraciones de diseño independientes. 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 live en un solo paso.

Open Design in Test Mode

Cambia a test mode y ve a Configuración → Diseño. Guarda primero cualquier cambio pendiente: solo se copia el diseño de prueba guardado.

Start the Copy

Haz clic en Copiar al modo live. El botón aparece cuando tienes un tema guardado o un storefront de prueba publicado, y live mode debe estar activado.

Choose What to Copy

Selecciona Tema y personalizaciones (el tema general, además de las anulaciones del checkout, storefront y Customer Portal) y Detalles del storefront (nombre de la tienda, logotipo y banner). Los detalles del storefront no están disponibles si no hay ningún storefront publicado en test mode.

Confirm

Haz clic en Copiar al modo live en el cuadro de diálogo.

La copia sobrescribe el diseño existente del modo live. Revisa tu checkout y storefront live después de copiar para confirmar que todo se ve como esperas.

Páginas relacionadas

Checkout Features

Funciones de checkout, incluidos la moneda, el idioma, los impuestos, los 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 gestiona tu storefront con identidad de marca.

Customer Portal

Portal de autoservicio para clientes para suscripciones y facturación.

Multi-Brand Setup

Gestiona varias marcas bajo una misma cuenta con identidades de marca independientes.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Aspectos destacados

Primeros pasos