---
title: "Marca y tema: documentación de CheckoutOS | Chargezen"
description: "Personaliza la apariencia de las extensiones del checkout para que coincidan con tu marca"
url: "https://chargezen.com/es/docs/checkoutos/setup/branding"
lang: "es"
updated: "2025-01-16"
---

Canonical URL: https://chargezen.com/es/docs/checkoutos/setup/branding

# Marca y tema

Personaliza la apariencia de las extensiones del checkout para que coincidan con tu marca

Última actualización: 2025-01-16

Las extensiones de CheckoutOS heredan automáticamente la identidad visual del checkout de Shopify. Puedes personalizar más los colores, las fuentes y los estilos para crear una experiencia coherente con tu marca.

Accede a la configuración de marca desde **Dashboard → Settings → Branding**.

Identidad visual del checkout de Shopify

CheckoutOS respeta la configuración de marca del checkout de Shopify. Primero configura su apariencia base en **Shopify Admin → Settings → Checkout** y después usa CheckoutOS para personalizar las extensiones.

## Colores de marca

Define la paleta de colores de tu marca para todas las extensiones del checkout:

### Color principal

El color principal de tu marca se usa en:

*   Botones de llamada a la acción (Accept, Add to Order)
*   Relleno de las barras de progreso
*   Indicadores de estado activo
*   Texto de los enlaces

Variables de color

```css
/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;
```

### Colores secundarios

Los colores secundarios complementan el principal:

*   **Accent Color**: etiquetas, elementos destacados y botones secundarios.
*   **Success Color**: mensajes de confirmación y marcas de verificación.
*   **Warning Color**: indicadores de urgencia y temporizadores.

## Tipografía

Por defecto, CheckoutOS usa la fuente del checkout de Shopify. Puedes cambiarla para elementos específicos:

### Ajustes de fuentes

*   **Heading Font**: títulos de ofertas adicionales y encabezados de extensiones.
*   **Body Font**: descripciones y texto del contenido.
*   **Button Font**: texto de los botones de llamada a la acción.

CheckoutOS admite Google Fonts y las fuentes seguras para la web. Puedes cargar fuentes personalizadas mediante CSS.

Consideración sobre el rendimiento

Cargar fuentes personalizadas puede afectar el rendimiento del checkout. Recomendamos usar fuentes que tu tema de Shopify ya cargue para evitar solicitudes de red adicionales.

## Ajustes del logotipo

Añade tu logotipo a las páginas de ofertas adicionales después de la compra para mantener la coherencia de marca:

1

#### Sube tu logotipo

2

#### Define la ubicación del logotipo

3

#### Configura la versión para modo oscuro

## Estilos de botones

Personaliza la apariencia de los botones de acción:

### Forma de los botones

*   **Rounded**: esquinas suavemente redondeadas, con radio de 8 px.
*   **Pill**: extremos completamente redondeados.
*   **Square**: esquinas rectas, con radio de 0 px.
*   **Custom**: define tu propio radio de borde.

### Tamaño de los botones

*   **Small**: botones compactos que ocupan poco espacio.
*   **Medium**: tamaño equilibrado, recomendado.
*   **Large**: botones de gran visibilidad para destacar.

Configuración de botones

```json
{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}
```

## CSS personalizado

Para una personalización avanzada, puedes añadir CSS que se aplique a todas las extensiones de CheckoutOS:

Ejemplo de CSS personalizado

```css
/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}
```

Especificidad del CSS

El CSS personalizado tiene menor especificidad que los estilos del checkout de Shopify. Usa `!important` con moderación y prueba a fondo en distintos dispositivos.

## Vista previa y pruebas

Revisa siempre la vista previa de los cambios de marca antes de publicarlos:

*   **Live Preview**: observa los cambios en tiempo real mientras editas.
*   **Device Preview**: prueba las vistas de computadora, tableta y móvil.
*   **Test Mode**: activa el modo de prueba para ver los cambios en pedidos reales sin afectar a los clientes.

1

#### Realiza los cambios

2

#### Revisa la vista previa en todos los dispositivos

3

#### Activar el modo de prueba

4

#### Publica los cambios

## Próximos pasos

[

### Crea tu primera oferta adicional

Aprovecha tu experiencia de marca con una oferta adicional después de la compra

Más información



](https://chargezen.com/es/docs/checkoutos/one-click-upsells/creating-first-upsell)[

### Extensiones del checkout

Añade sellos de confianza y barras de progreso con tu identidad de marca

Más información



](https://chargezen.com/es/docs/checkoutos/checkout-extensions/overview)

¿Te resultó útil esta página?

¿Necesitas más ayuda? [Contactar con soporte](https://chargezen.com/es/docs/checkoutos/troubleshooting/support)