Como editar as cores do site - Magento 1
Como personalizar as cores do seu site no Magento 1
Explicação em vídeo:
Salve e atualize o cache
Segue a explicação escrita
Vá em Sistema > Configurações > Tema Mageshop
Em Tema Mageshop você poderá encontrar todas as opções de personalização do tema do seu site, aqui você poderá alterar as cores da sua loja e até mesmo mudar a logo que está sendo exibida.
Magemenu
A primeira aba que podemos ver em relação a sua configuração, é o Magemenu, esta aba possui uma documentação separada que trata de sua configuração, da alteração de cores e outras opções, segue o link desta documentação.
Nesta documentação, abordaremos nesta aba apenas a configuração de exibição do Magemenu, dentro desta aba clique em configurações, e então altere "Exibir Magemenu?" para "Habilitar".
Você pode também estar desativando o antigo menu acessando na mesma aba de Magemenu, a aba de Configurações Adicionais e alterar "Ocultar o Menu Principal?" para Sim.
Salve e atualize o cache
Barratopo
Configurações
Na aba de Barratopo, iremos primeiramente passar pela opção que faz a ativação desta barra, vá para configurações e altere a opção "Exibir Barratopo?", ativando ou desativando o mesmo.
Personalizar Cores
Na próxima aba, em Personalizar Cores, podemos fazer a alteração das cores dessa barra, lembrando que aqui, deve ser utilizado o código Hexadecimal da cor que você deseja utilizar na loja, para saber qual é esse código, indicamos utilizar a própria ferramenta do google, onde nele você pode estar encontrando este código para então utiliza-lo nesses campos de personalização, segue o link desta ferramenta.
Tonalidades dos links e Coluna Central
Podemos também alterar a tonalidade dos links presentes no Barratopo, alterando entre claro e escuro na aba de "Tonalidades dos links", outra configuração interessante é a possibilidade de ativar ou desativar a coluna central da barra na aba "Coluna Central".
Configurações Adicionais Mobile
A ultima aba de configuração da Barratopo nos da a liberdade de personalizar como um usuário que esta utilizando dispositivos moveis pode ver esta barra, alterando o layout da mesma. Lembrando que são consideradas telas de dispositivos moveis aquelas que possuem menos que 770px.
Salve e atualize o cache
Configurações do Tema
Logo
Aqui teremos a possibilidade de alterar a cor do tema do site em geral, a primeira aba já nos traz a liberdade de alterar a logo de nosso site em diferentes pontos, basta apenas, no campo em que você deseja alterar, clicar em Escolher arquivo, e selecionar a imagem que preferir, lembrando que a imagem deve estar no formato PNG ou JPG.
Aqui temos 6 locais onde a logo da sua loja pode aparecer para o seu cliente.
Principal: é a logo que aparece no cabeçalho da sua loja.
Resize: esta logo fica no barra topo da sua loja, ela aparece para substituir o cabeçalho principal assim que não é possível mais vê-lo.
Rodapé: assim como o nome diz, ele aparece no rodapé do seu site.
Fechar Pedido: pode ser encontrada assim que um cliente vai finalizar um pedido.
ogimage: ela é exibida nas pesquisas do google.
Layout
Na próxima aba temos as configurações de Layout da sua loja, aqui você pode alterar a largura do topo, rodapé e caixa de conteúdo .
Header
Na aba header, temos então algumas configurações do tema do cabeçalho.
As configurações da barra topo nos permite, além de habilitar ou desabilita-lo, mudar a cor dos ícones e links presentes nesta barra. Logo a baixo, temos a escolha de alterar posição em que a logo é exibida no cabeçalho (Header). As outras duas configurações presentes nesta aba, fazem a alteração das cores dos ícones do cabeçalho, aqui identificado como Header, tanto no desktop e mobile.
Rodapé
Posteriormente, temos a aba de Rodapé, ela possui algumas configurações visuais que nós podemos fazer nesta parte do site.
Na sua loja, é possível alterar entre dois tipos de modelos de rodapé, sendo o Layout 1 o padrão utilizado, abaixo temos uma print mostrando este modelo como Newsletter habilitado.
A seguir temos uma print do Layout 2.
Lembrando que, a configuração Exibir Newsletter altera a exibição da mesma apenas na utilização do primeiro Layout, podemos também habilitar a Barra de Newsletter, ela fica em uma área um pouco superior ao rodapé, veja abaixo como ficaria.
Configurações Gerais
E por fim, temos a ultima aba das configurações do tema, em Configurações Gerais, podemos encontrar as demais configurações existentes sobre o tema da loja.
Posição Ícone Flutuante Whatsapp: Podemos alterar a posição do ícone do Whatsapp escolhendo entre Direita e Esquerda.
Catalogo / Produtos sem Avaliações: Exibe/Oculta as avaliações dos produtos que ainda não foram avaliados.
Busca Mobile Fixa: Habilita, como você pode ver abaixo, a barra de busca fixa em dispositivos moveis (mobile).
Topo Mobile Reduzido (logo na barra): Reduz o tamanho do topo em dispositivos moveis (mobile).
Salve e atualize o cache
Cores do Tema
Como o nome diz, aqui estaremos alterando as cores do tema da sua loja, aqui em todas as abas, para realizar a configuração das cores referentes a cada uma delas, teremos de habilitar a Personalização de Cores, feito isso, as configurações serão exibidas para que você possa explora-las e altera-las, lembrando novamente que todos os campos referentes a cores, devem ser preenchidas com o código Hexadecimal da cor de sua escolha, novamente temos o link da recomendação feita acima na documentação. Clique aqui.
Topo
A primeira aba que nós temos faz jus a configuração do Topo da nossa loja.
Topo site: faz a alteração da cor do cabeçalho da nossa loja.
Barra Topo (flutuante): altera a cor da barra topo.
Frase Bloco Promocional: altera a cor do texto do bloco promocional.
Minha conta: altera a cor do texto exibido no menu do usuário, abaixo temos uma print mostrando onde é alterado esta cor
Menu Principal
Na próxima aba, temos a configuração das cores do Menu Principal, lembrando que essas configurações não alteram as cores do Magemenu por ser um menu diferente.
Além da alteração da cor do próprio menu, podemos alterar a cor da borda no topo e em baixo (bottom) do menu, podemos também estar alterando a cor dos texto além de alterar a cor exibida quando o cliente passa o mouse pelos mesmos, as configurações referentes aos Submenus, no caso a alteração da cor da borda e dos links, altera os blocos de subcategorias que aparecem ao clicar em uma categoria no menu.
Background das Páginas
Em Background das Páginas, podemos modificar, como mostra a imagem acima, a cor do fundo do nosso site em diferentes lugares
Home: altera a cor o fundo da pagina inicial.
Detalhes do Produto: altera na pagina dos produtos.
Resultado de busca / Categoria: muda a cor do fundo nas categorias e quando uma pesquisa é efetuada.
Barra Descrição: é alterada a cor do fundo da área de descrição dos produtos.
Página Carrinho: altera na pagina do carrinho do cliente.
Página Checkout: altera o fundo na aba de Pagamento
Página Checkout - Sucesso: altera o fundo na aba de Compra Finalizada
Rodapé
Na próxima aba temos a alteração das cores no Rodapé da loja
Temos a possibilidade de alterar a cor do Rodapé, além da borda, títulos e links, além das cores da barra de selos (a ultima barra do site), e também alterar a cor da barra assinatura, exibida do Layout 1 do Rodapé.
Botões e Preço
Em Botões e Preço, é feita a alteração das cores de botões e textos de exibição de preço em toda loja.
Todas as configurações a seguir são campos que alteram a cor de algo referente a Botões e Preço
Comprar - Grid/List: botão de Ver Detalhes exibido ao passar o mouse sobre um produto
Comprar (Página de Detalhes): botão de comprar dentro da pagina de produto
Botão Minicart: botão de Finalizar Pedido
Login / Criar Conta: botões encontrados dentro da pagina de login
Entrar: botão de Entrar em Minha conta no menu
Cor preço: texto que exibe o texto dos produtos em toda loja
Cor preço boleto: texto exibido em produtos que não possuem um preço fixo, ou tenham um preço diferente, por exemplo, no boleto
Carrinho e Checkout
Então temos a aba de Carrinho e Checkout, nela podemos alterar as cores exibidas na pagina de carrinho, pagamento e finalização da compra
Cor BG Autenticação e Cor BG Etapas, podemos alterar a cor do cabeçalho da tabela de autenticação e de etapas na pagina de pagamento.
Itens no Carrinho - BG e Itens no Carrinho - Cor, altera a cor do numero e do ícone que fica em cima do símbolo do carrinho respectivamente.
Botões Secundários - Cor Background e Botões Secundários - Cor Texto fazem a alteração nos botões secundários nas paginas referentes a aba Carrinho e Checkout. Ex:
Cor Tabela Carrinho e Cor Borda Tabela Carrinho alteram a cor da tabela e da borda respectivamente na pagina de carrinho assim como mostra a imagem acima
Tags
Em todos os campos que possuem o segmento BG, ele altera a cor de fundo dessas tag, já aquelas que possuem Cor ao lado do nome alteram a cor do texto dessas tags.
Tabs Home
Seguindo para a aba Tabs Home, fazemos aqui a alteração das cores de algumas abas presentes na pagina inicial.
Acima temos as abas em que a configuração desses campos alteraram.
Cores Ativo: se refere a aba selecionada, no caso do exemplo acima, seria a aba Mais vendidos.
Cor Borda: é a borda das abas, na imagem acima, na aba Mais vendidos abaixo dela pode ser visualizado a borda.
Cor Link: alteraria a cor de todos os outros texto que não estão selecionados.
Cor Links Hover: se refere a cor exibida no texto da aba ao passar o mouse por cima delas.
Cor Borda Hover: se refere a cor exibida na borda da aba ao passar o mouse por cima delas.
Newsletter
Indo para a penúltima aba, em Newsletter, podemos alterar a cor da barra de newsletter
Os campos mostrados acima fazem referencia as cores da barra de Newsletter abaixo.
Outros
Na ultima aba, em Outros temos as configurações de cor de outros elementos da loja no geral
Links (a) e Links (a:hover) são as configurações dos outros links presentes no site, em que não possuem um campo especifico de alteração de cor, ou seja, aqueles links em que sua cor não podem ser alteradas pelos campos vistos em toda esta documentação. Nesses dois campos nós podemos mudar a cor do texto desses links (a) e a cor exibida ao passar o mouse por cima dos mesmos (a:hover).
Os campos de configuração de cor da Linha Destaques, se refere a aba Destaques presente na Home, podendo alterar o fundo (BG), títulos e textos.
Abaixo no campo Titulo Destaques Home e Outros nós podemos alterar a cor dos Títulos em destaque na home e outros títulos presentes em nossa loja.
Salve e atualize o cache
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.