> ## 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.
# Personalización de diseño y temas
> Personaliza la apariencia y experiencia de tu proceso de pago, escaparate y portal de cliente desde un único lugar. Elige temas predefinidos, configura tipografía y colores, y aplica anulaciones por sección, todo con vista previa en vivo.
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
1. **Centro de diseño unificado**: configura la apariencia del proceso de pago, escaparate y portal del cliente desde una sola página.
2. **Temas predefinidos**: comienza con un tema seleccionado y personalízalo desde ahí.
3. **Modo claro y oscuro**: define paletas de colores distintas para cada modo.
4. **Vista previa en vivo**: observa cómo quedan los cambios en el proceso de pago, portal del cliente y escaparate antes de guardar.
5. **Anulaciones por sección**: ajusta secciones individuales (proceso de pago, escaparate, portal del cliente) sin afectar a las demás.
6. **Control programático**: anula temas durante el pago mediante la API o el Checkout SDK.
## 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 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.
### 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.
### 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.
### 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.
Después de seleccionar un tema predefinido, puedes personalizar aún más las propiedades individuales en los Ajustes avanzados. Las propiedades no especificadas vuelven a las predeterminadas 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
Anula tipografía, colores y bordes específicamente para la experiencia de pago. La vista previa en vivo muestra:
* 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
Configura ajustes específicos del 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
Anula el tema para el portal del cliente, que incluye:
* Gestión de suscripciones
* Historial de facturación
* Métodos de pago
* Billetera y créditos
## Recursos relacionados
Funciones del proceso de pago, incluida la moneda, el idioma, los impuestos, los descuentos y más.
Incrusta el proceso de pago como una superposición modal en tu página.
Incrusta el proceso de pago directamente en el diseño de tu página.
Configura y administra tu escaparate con marca.
Portal de autoservicio para clientes de suscripciones y facturación.
Gestiona múltiples marcas bajo una sola cuenta con branding independiente.