> For the complete documentation index, see [llms.txt](https://manuais-temas.netzee.com.br/tray-netzee-surfe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manuais-temas.netzee.com.br/tray-netzee-surfe/painel-do-tema/cores-e-layout.md). # Cores e Layout ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnO4Zjt8aUu1yCHa9y%2Fimage.png?alt=media\&token=5e907992-cd13-405d-a8d3-717c16b9b3ad) Algo que é muito importante no tema são as cores utilizadas. Elas refletem grande parte da identidade visual da loja. Nós programamos o tema de modo que você possa alterar todas as cores principais utilizadas. Para isso basta acessar ***Minha Loja > Design da Loja > Editar Tema***. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnO8FHrbqMhNbHxNnD%2Fimage.png?alt=media\&token=5cc2b90e-1846-4e18-afe8-fa95d8d6bf77) Na seção de **Cores e Layout** você encontrará todas as cores utilizadas devidamente identificadas, para que você possa encontrar facilmente onde, no tema, aquela cor é usada. Basta clicar na pequena caixinha com a cor para escolher uma no seletor de cores que aparecer. Ou você pode, também, digitar o código hexadecimal referente a cor que deseja usar. Se precisar de ajudar, visite a ferramenta **Html Color Codes** para auxiliá-lo nas escolhas das cores clicando [aqui](https://html-color-codes.info/Codigos-de-Cores-HTML/). ## **GERAL** * **Cor Principal:** Se aplica em alguns itens, tais como: Fundo do topo do menu mobile, cor das opções de pessoa física e jurídica no cadastro do cliente. * **Cor Secundária:** Se aplica nas cores dos links ao passar o mouse. * **Cor dos Textos:** Se aplica na maioria dos textos da loja. Recomendado não utilizar branco. Os demais são auto explicativos. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnOFctiAnDLW0xtUij%2Fimage.png?alt=media\&token=251746d8-ada4-47e9-af71-3cd0775090a5) ## **Logotipo** Em LOGO DA LOJA você vai inserir a logotipo de sua loja. No campo LOGO BRANCA DA LOJA será cadastrado a logotipo que será exibida na loja versão mobile. Caso não insira nenhuma logo nesses campos, o tema puxará a logotipo do tema. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnOOJROpMCoP-ALAhv%2Fimage.png?alt=media\&token=4c266dc3-3999-4d92-bb82-7d91dcf6fe10) ## **MAIS CATEGORIAS** Em Mais Categorias você consegue definir se deseja exibir a opção de “mais categorias” no menu superior, lembrando que, essa configuração se aplica quando houver mais de 8 categorias cadastradas. Sendo possível definir um ícone com largura máxima de 80px. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnOfATuCcb1F27sqEQ%2Fimage.png?alt=media\&token=e13a6fa2-bac2-4864-b00a-1ee5822642c6) ## **TOPO E RODAPÉ** Para alterar as posições do topo e do rodapé de seu site, existe essas opções disponíveis no painel. Assim, você tem mais escolhas na hora de configurar o layout do tema. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnOmaNEvgBeONCYVDK%2Fimage.png?alt=media\&token=43bd9335-f2a2-4dfb-bd93-517c0d2c9d44) ## **SLIDE DE MARCAS** Você consegue definir se deseja exibir a opção de Slide de Marcas. Sendo possível cadastrar uma imagem com largura máxima de 180px e o seu link. Lembrando que é necessário cadastrar as marcas em *Produtos > Marcas e Fabricantes*. O link deve ser igual ao cadastrado no Editor de Tema para que assim funcione corretamente. ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnP9b7dqhknp5_slXb%2Fimage.png?alt=media\&token=d17bdccc-83fc-413e-825b-65d3147e7f0a) ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnPB9TbwQXB57IiUii%2Fimage.png?alt=media\&token=e78dedb7-1a9b-46f3-b6e2-70732b5bfdae) {% hint style="info" %} **Considerações Importantes** * As imagens precisam ser no formato `.png` com fundo transparente para melhor visualização * As imagens devem ter tamanho exato de 200x60 pixels * As imagens precisam ter o mesmo nome das marcas, seguindo a seguinte regra: * Todas as letras devem ser minúsculas; * Caso a marca tenha só uma palavra, como por exemplo a marca Nike, o nome da imagem deverá ficar como `nike.png`; * Caso o marca seja composta de duas ou mais palavras, como por exemplo a marca Calvin Klein, o nome da imagem deverá ficar como `calvin-klein.png`; * Caso a marca possua letras com acentuação, elas deverão ter o acento removido, como por exemplo a marca Nestlé, o nome da imagem deverá ficar `nestle.png`; * Caso a marca possua caracteres especias, como `ç`, deverá ser trocado pela letra equivalente. No caso do `ç`, o `c`; * Caso a marca possua outros caracteres especias, como `&` ou `'`, eles deverão ser trocados por um hiffen. Por exemplo a marca Dolce & Gabbana, o nome da image deverá ficarr como `dolce-gabbana.png`. * Ao salvar a imagem, verifique se ficou como `.png` minúsculo e não `.PNG` maiúsculo, pois a plataforma não reconhece o segundo caso. Caso tenha dúvida, clique [aqui](https://textedit.tools/slugify) e utilize a ferramenta **Text Edit Slugify** (em inglês) para ajudá-lo. {% endhint %} **Demonstração:** ![](https://2348170127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjnNTczfLJIAaOPVpur%2F-MjnNWxEIs8eBkUOcS81%2F-MjnPFb_hIiZNSt9q8Nw%2Fimage.png?alt=media\&token=38a17ee8-3970-439c-bd3c-1807eeec1cd2)