Marca y tema: documentación de CheckoutOS

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

/* 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:

Sube tu logotipo

Define la ubicación del logotipo

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

{
  "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

/* 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.

Realiza los cambios

Revisa la vista previa en todos los dispositivos

Activar el modo de prueba

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

Extensiones del checkout

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

Más información