Artigos sobre: Produtos

Como aplicar CSS customizado no checkout?

Personalização do Checkout (CSS + Script + Vídeo)

O espaço para CSS customizado no checkout de vendas permite que você personalize a aparência da página de finalização de compras. Com essa funcionalidade, é possível ajustar cores, fontes e outros elementos visuais, garantindo uma experiência mais agradável e alinhada à identidade visual da sua marca.

Como personalizar meu checkout com CSS?

Para aplicar o CSS personalizado ao seu checkout, siga estes passos:

Acesse o produto cadastrado que deseja personalizar.

Vá até a aba Checkout.

Clique em Personalizar.

Encontre a opção de CSS customizado e adicione seu código.

🚫REMOVER TEXTO DO ORDERBUMP

Use o código abaixo para esconder o título:

h3.text-lg.font-bold.leading-none.text-orange-900.inline-block.mb-0 {

 display: none;

}

🎨 Paleta de Cores Disponíveis

LARANJA #f68e2f

PRETO #000000

VERMELHO #cf0101

AZUL #08b9ce

ROSA #ff0084

ROXO #800080

MARROM #945821

📋 Copie o código da cor e aplique no seu CSS

Alterar cor de fundo do checkout

/* editar cor background */
.bg-white, 
[class*="bg-"] {
  background-color: #000 !important;
}


/* textos principais */
body, span, p, h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* textos secundários (cinza) */
[class*="text-gray"],
[class*="text-zinc"],
[class*="text-slate"] {
  color: #d1d5db !important; /* cinza claro visível */
}

/* preço verde (mantém destaque) */
.text-green-500,
.text-green-600,
.text-green-700 {
  color: #22c55e !important;
}

Alterar cor do botão de compra

.bg-green-600 {
    background-color: #FF8C00; /*Altere o código da cor*/
}

💡 Dica Frendz

Para um checkout mais profissional:

Use 1 cor principal
Evite misturar muitas cores
Prefira fundo neutro (preto ou branco)
Destaque apenas o botão de compra

Atualizado em: 05/05/2026

Este artigo foi útil?

Obrigado!