Cores
O tema Cosmetics beauty possui várias configurações de cores que podem ser personalizadas. Cada uma afeta uma determinada parte do layout da sua loja. Para editar as cores do tema acesse Cores do site.
Ao clicar em uma das várias opções disponíveis será exibido um menu para selecionar a cor desejada. Nessa parte a plataforma exibe as cores que são padrões e mais utilizadas por outros lojistas. São sugestões que você pode colocar rapidamente apenas clicando sobre a cor desejada. Apesar disso qualquer cor que quiser utilizar pode ser colocada. Para isso clique em Nova cor e escolha a cor desejada. Você poderá escolher através da ferramenta de seleção de cor ou digitando o código hexadecimal de 6 caracteres.
A imagem abaixo mostra as etapas desse processo. A esquerda existe a lista de cores (apenas uma parte é exibida na imagem), a ferramenta de seleção rápida ao centro e a opção de nova cor a direita.
Como mencionado acima, existem várias opções de cores que podem ser personalizadas. Abaixo está uma lista completa das cores e os locais que são afetados no tema. Elas são auto explicativas.
Cor da barra de ferramentas do Google no mobile: cor utilizada no topo do navegador chrome para dispositivos móveis. Recomenda-se utilizar a mesma cor do cabeçalho para garantir uma uniformidade
Cor principal dos textos do site: cor utilizada como base de todos os textos da loja. Essa cor será sobrescrita por opções adiante para outras partes do tema
Background do site: cor utilizada em todo o fundo do site. Escolha uma cor que irá contrastar com a cor de texto escolhida. Se a cor do texto for clara escolha uma cor de fundo escuro. Se a cor do texto for escura, escolha uma cor de fundo clara
Background do cabeçalho: cor utilizada no fundo do cabeçalho da loja
Background do menu superior: cor utilizada no fundo do menu superior. O menu superior é onde são exibidos os itens escolhidos no menu de navegação.
Borda dos elementos do site: cor da borda utilizada por vários elementos do site
Cor do item de quantidade do carrinho, dos valores no carrinho lateral, do botão em minha conta e das sugestões de busca: como o próprio nome indica essa opção afetará multiplos lugares
Cor do texto da quantidade do carrinho: cor utilizada no teto da quantidade do carrinho
Cor do fundo do campo de pesquisa: cor utilizada no fundo do campo de pesquisa no cabeçalho da loja
Cor do texto e ícone de pesquisa: cor utilizada no texto e no ícone do formulário de pesquisa no cabeçalho da loja
Cor dos ícones da sacola e menu: cor utilizada nos ícones dos menus e do ícone de sacola de produtos.
Cor dos ícones de redes sociais: cor utilizada nos ícones das redes sociais no cabeçalho da loja
Cor do background do menu suspenso de criação de contas: cor utilizada no fundo do menu que aparece ao passar o mouse sobre o item Minha Conta no cabeçalho da loja
Cor do texto do menu de categoria: cor utilizada nos textos no menu principal da loja
Cor dos título do site: cor utilizada nos títulos principais do site, como no título das vitrines de produtos.
Background do botão de compra: cor utilizada no fundo do botão de comprar da loja
Cor do texto do botão de compra: cor utilizada no texto do botão de comprar da loja
Background dos botões secundários: cor utilizada no fundo dos botões secundários da loja, como botão de salvar, ou realizar cadastro
Cor do texto dos botões secundários: cor utilizada nos textos dos botões secundários da loja
Background da newsletter: cor utilizada no fundo da newsletter localizada no rodapé da loja
Cor do texto da newsletter: cor utilizada nos textos da parte da newsletter localizada no rodapé da loja
Cor do ícone da newsletter: cor utilizada nos ícones da parte da newsletter
Cor do fundo do campo da newsletter: cor utilizada no fundo do campo da newsletter
Fundo do rodapé: cor utilizada no fundo do seção do rodapé da loja
Cor dos textos do rodapé: cor utilizada nos texto da seção do rodapé da loja
Background do banner régua: cor utilizada no fundo do banner régua. O banner régua é a seção localizada logo abaixo dos banners principais, que contem informações como frete grátis, parcelamento, segurança e contato via WhatsApp
Cor dos ícones do banner régua: cor utilizada nos ícones do banner régua
Cor dos textos do banner régua: cor utilizada nos textos do banner régua
Background do bloco de banners por categoria: cor utilizada no fundo do bloco de categorias. O bloco de categoria se localiza logo após a primeira vitrine de produtos
Cor do texto do botão do bloco de banners por categoria: cor utilizada no texto do botão do bloco de categorias. O botão aparece ao passar o mouse sobre o item do bloco de categoria.
Cor do botão do bloco de banners por categoria: cor utilizada no fundo do botão do bloco de categorias
Cor da tag Novidades: cor utilizada no fundo da tag de novidades. As tags aparecem sobre o box do produto
Cor da tag Frete Grátis: cor utilizada no fundo da tag de frete grátis. As tags aparecem sobre o box do produto
Cor da tag Desconto: cor utilizada no fundo da tag de desconto. As tags aparecem sobre o box do produto
Cor da tag do menu: cor utilizada no fundo da tag de menu. As tags do menu aparecem sobre os itens do menu principal
Cor do texto das tags: cor utilizada nos textos da tags
Cor do preço DE: cor utilizada no texto de exibição do preço antigo quando o produto está em promoção
Cor do preço POR: cor utilizada no texto de exibição do preço do produto, estando ou não em promoção
Cor das opções de pagamento: cor utilizada no texto de exibição as opções de pagamento
Cor dos itens do carrossel: cor utilizada nos itens do carrossel
Cor do item ativo do carrossel: cor utilizada no item atual do carrossel
Cor de fundo das imagens na listagem e na página de produto: cor utilizada no fundo das imagens dos produtos, nas vitrines, nas páginas de categorias e na página do produto
Cor da borda da imagem selecionada e do ícone de lupa na página de produto: cor utilizada na borda da imagem selecionada (quando o produto tem mais de uma imagem cadastrada) e no ícone de lupa que fica sobre a imagem principal no canto superior direito
Cor do nome do produto: cor utilizada nos textos do nome do produto, nas vitrines de produtos, nas páginas de categorias e na página de produtos
Last updated
