Troca de cores do tema
Orientações para a troca de cores de seu tema.
Passo 01: Para realizar a troca de cores do tema, cole o código abaixo no CSS da sua loja. Para isso, acesse:
Orientações para a troca de cores de seu tema.
https://app.lojaintegrada.com.br/painel/plataforma/conta/tema/css/editar
Passo 02: No editor CSS, cole o código padrão abaixo.
:root {
--cor_primaria: #1b1b1b;
--cor_secundaria: #444;
--cor_botao: #1b1b1b;
--cor_botao_hover: #444;
--cor_texto_botao: #fff;
--cor_texto_botao_hover: #fff;
--cor_botao_comprar: #31b15f;
--pre_cabecalho: #1b1b1b;
--cor_texto_pre_cabecalho: #fff;
--cor_cabecalho: #ffffff;
--cor_icones: #1b1b1b;
--cor_icones_hover: #444;
--cor_texto_icones: #1b1b1b;
--cor_menu: #1b1b1b;
--cor_texto_menu: #fff;
--cor_newsletter: #1b1b1b;
--cor_footer: #1b1b1b;
--cor_texto_footer: #fff;
--cor_tag_frete_gratis: #444;
--texto_global: #1b1b1b;
--texto_background:#ffffff;
--texto_bg_escuro:#222;
--texto_bg_claro:#222;
}
Passo 03: Personalize o código, seguindo as orientações abaixo.
Use o padrão hexadecimal (HEX) para cores. https://www.color-hex.com/
--cor_primaria
= Cor principal, distribuída em elementos principais por todo o tema.
--cor_secundaria
= Distribuída geralmente no hover
(ação ao passar o mouse)
--cor_botao
= Cor global dos botões
--cor_botao_hover
= Cor ao passar o mouse sobre botão
--cor_texto_botao
= Cor do texto dentro do botão
--cor_texto_botao_hover
= Cor do texto dentro do botão ao passar o mouse
--cor_botao_comprar
= Cor do botão comprar na página do produto
--pre_cabecalho
= Cor de fundo do aviso de pré-cabeçalho--cor_texto_pre_cabecalho
= Cor de texto do pré-cabeçalho
--cor_cabecalho
= Cor de fundo do cabeçalho
--cor_icones
= Cor dos ícones do cabeçalho
--cor_icones_hover
= Cor dos ícones do cabeçalho
--cor_texto_icones
= Cor dos títulos dos ícones do cabeçalho
--cor_menu
= Cor do menu principal
--cor_texto_menu
= Cor dos títulos/textos do menu principal
--cor_footer
= Cor do rodapé
--cor_texto_footer
= Cor dos títulos/textos do rodapé
--cor_tag_frete_gratis
= Cor da tag/selo de frete grátis nos produtos da listagem
--texto_global
= Cor geral dos textos e títulos de toda a loja
--cor_newsletter
= Cor da Newsletter, logo acima do rodapé da loja
--texto_background
= Cor de texto para fundos com cor
Passo 04: Após editar corretamente todas as cores, clique em SALVAR