Identidade visual e temas: documentação do CheckoutOS

As extensões do CheckoutOS herdam automaticamente a identidade visual do checkout da Shopify. Você pode personalizar ainda mais cores, fontes e estilos para criar uma experiência integrada que combine com a sua marca.

Acesse os ajustes de identidade visual em Dashboard → Settings → Branding.

Identidade visual do checkout da Shopify

O CheckoutOS respeita os ajustes de identidade visual do checkout da Shopify. Configure primeiro a aparência básica em Shopify Admin → Settings → Checkout e depois use os ajustes do CheckoutOS para personalizar as extensões.

Cores da marca

Defina a paleta de cores da sua marca para todas as extensões de checkout:

Cor principal

A cor principal da marca é usada em:

Botões de chamada para ação (Accept, Add to Order)
Preenchimento das barras de progresso
Indicadores de estado ativo
Texto dos links

Variáveis de cor

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

Cores secundárias

As cores secundárias complementam a principal:

Accent Color — Selos, destaques e botões secundários
Success Color — Mensagens de confirmação e marcas de verificação
Warning Color — Indicadores de urgência e temporizadores

Tipografia

Por padrão, o CheckoutOS usa a fonte do checkout da Shopify. Você pode substituí-la em elementos específicos:

Ajustes de fonte

Heading Font — Usada nos títulos das ofertas adicionais e cabeçalhos das extensões
Body Font — Usada nas descrições e no corpo do texto
Button Font — Usada no texto dos botões de chamada para ação

O CheckoutOS aceita Google Fonts e qualquer fonte segura para a web. Fontes personalizadas podem ser carregadas via CSS.

Impacto no desempenho

Carregar fontes personalizadas pode afetar o desempenho do checkout. Recomendamos usar fontes já carregadas pelo tema da Shopify para evitar solicitações de rede adicionais.

Ajustes do logotipo

Adicione seu logotipo às páginas de ofertas adicionais após a compra para manter a consistência da marca:

Envie seu logotipo

Defina a posição do logotipo

Configure a versão para modo escuro

Estilos dos botões

Personalize a aparência dos botões de ação:

Formato dos botões

Rounded — Cantos suaves e arredondados (raio de 8 px)
Pill — Extremidades totalmente arredondadas
Square — Cantos retos (raio de 0 px)
Custom — Defina seu próprio raio de borda

Tamanho dos botões

Small — Botões compactos que ocupam pouco espaço
Medium — Tamanho equilibrado (recomendado)
Large — Botões bem visíveis para dar destaque

Configuração dos botões

{
  "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 personalização avançada, você pode adicionar CSS personalizado aplicado a todas as extensões do CheckoutOS:

Exemplo 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;
}

Especificidade do CSS

O CSS personalizado tem especificidade menor que os estilos do checkout da Shopify. Use !important com moderação e teste cuidadosamente em vários dispositivos.

Visualização e testes

Sempre visualize as alterações de identidade visual antes de publicar:

Live Preview — Veja as alterações em tempo real durante a edição
Device Preview — Teste as visualizações para computador, tablet e celular
Test Mode — Ative o modo de teste para ver as alterações em pedidos reais sem afetar os clientes

Faça suas alterações

Visualize em todos os dispositivos

Ative o modo de teste

Publique as alterações

Próximos passos

Crie sua primeira venda adicional

Use a experiência da sua marca em uma oferta adicional após a compra

Saiba mais

Extensões de checkout

Adicione selos de confiança e barras de progresso com a identidade visual da sua marca

Saiba mais