# 00. Conheça o Tema FLAT **Parabéns** pela aquisição do **Tema** da **Linha FLAT**! Esse tema foi pensado, desenhado e programado pela [**Fábrika de E-commerce**](http://www.fabrikadeecommerce.com.br) com muito carinho e dedicação de forma que pudéssemos entregar para seus clientes elegância com eficiência e para você, empresário, a facilidade na edição do layout e os melhores resultados nas vendas de seu e-commerce! Tenha certeza que estamos muito felizes pela oportunidade que você nos deu ao escolher um de nossos temas para seu e-commerce e torcemos que você tenham uma experiência incrível nessa nova etapa de sua marca. Aqui do nosso lado, continuamos trabalhando em busca de novidades e caso você queira contribuir dando-nos um feedback, saiba que será muito bem-vindo e de grande valia! ;) Para isso basta nos enviar um e-mail para que nossa equipe entrará em contato caso seja necessário! Caso você tenha algum problema ou dúvida referente ao tema que comprou, nosso suporte irá orientá-lo da melhor forma possível. Para isso, pedimos que acesse nossa página de suporte e veja em detalhes como abrir um chamado, [**clicando aqui**](https://www.fabrikadeecommerce.com.br/manual-de-temas-da-tray--abertura-de-chamado/). Caso queira acessar os **tutoriais** da **Tray Commerce** para funcionalidades comuns a todos os temas da plataforma, [**clique aqui**](https://atendimento.tray.com.br/hc/pt-br). Ou caso precise entrar em **contato direto** com a **Tray Commerce** a respeito de alguma questão relacionada à plataforma, abra um chamado, [**clicando aqui**](https://www.tray.com.br/canais-de-atendimento/). Agora vamos mostrar tudo que você pode fazer com nosso tema! **Boa leitura! ;)** # 01. O Manual Neste manual apresentaremos as configurações que podem e devem ser feitas no painel administrativo de sua loja para finalização de instalação de seu tema, bem como inclusão e atualização de conteúdo. Leia o passo a passo com atenção para que a instalação de seu tema seja realizada da forma correta. O tema foi desenvolvido com base em uma composição de layout já definida. Porém, com este manual, você aprenderá a fazer as alterações possíveis para deixar a loja com a sua cara. {% hint style="warning" %} O conteúdo deste manual diz respeito à **linha FLAT** da [**Fábrika de E-commerce**](https://temas.tray.com.br/parceiro/fabrika/). As imagens que serão apresentadas como exemplo do layout final, são referências do **tema FLAT MODA**, mas servem de guia para os outros temas da linha também. Abaixo seguem todos os temas da linha FLAT: * [Flat MODA](https://temaflatmoda.commercesuite.com.br/) - Tema com o visual focado no segmento da Moda e Acessórios * [Flat DECOR](https://temaflatdecor.commercesuite.com.br/) - Tema com o visual focado no segmento de Casa e Decoração * [Flat GEEK](https://temaflatgeek.commercesuite.com.br/) - Tema com o visual focado no segmento Geek e Anime * [Flat COSMÉTICOS](https://temaflatcosmeticos.commercesuite.com.br/) - Tema com o visual focado no segmento de Cosméticos * [Flat JÓIAS](https://temaflatjoias.commercesuite.com.br/) - Tema com o visual focado no segmento de Jóias e Acessórios * [Flat SAPATOS](https://demo-temaflatcalcados.commercesuite.com.br/) - Tema com o visual focado no segmento de Calçados * [Flat PET](https://temaflatpet.commercesuite.com.br/) - Tema com o visual focado no segmento Pet * [Flat KIDS](https://temaflatkids.commercesuite.com.br/) - Tema com o visual focado no segmento Moda Infantil * [Flat MODA MEN](https://demo-temaflatmodamen.commercesuite.com.br/) - Tema com o visual focado no segmento Moda Masculina * [Flat AUTO](https://demo-temaflatauto.commercesuite.com.br/) - Tema com o visual focado no segmento Automobilístico * [Flat MODA MINIMALISTA](https://demo-temaflatmodaminimalista.commercesuite.com.br/) - Tema com o visual focado no segmento Moda Minimalista {% endhint %} {% hint style="danger" %} **Caso ainda não tenha comprado o tema para seu e-commerce, veja todos os temas desenvolvidos pela** [**Fábrika de E-commerce**](https://temas.tray.com.br/parceiro/fabrika) **na loja de temas** [**clicando aqui**](https://temas.tray.com.br/parceiro/fabrika/)**.** {% endhint %} Agora mãos a obra, pois vamos mostrar tudo que você precisa fazer para instalar nosso tema e customizá-lo. **Boa leitura! ;)** # 02. Como Instalar, Duplicar, Editar, Atualizar e Publicar seu tema Essa é uma seção simples, mas fundamental para obter sucesso no futuro e no dia-a-dia após a instalação de nosso tema! Por isso, pedimos que prestem bastante atenção nos detalhes e sigam o passo a passo informado. {% hint style="danger" %} **Sugerimos uma leitura com muita atenção!** {% endhint %} # 2.1 Instalar seu tema Após a aquisição de seu novo tema da [**Fábrika de E-commerce**](https://temas.tray.com.br/parceiro/fabrikadeecommerce) na Loja de Temas da Tray Commerce, em poucos minutos ele já estará disponível em seu e-commerce para customização. Ou seja, ele já é instalado automaticamente no seu painel administrativo e você pode começar a realizar suas configurações nele imediatamente após a compra. > Você encontrará o **Tema Publicado** e os **Temas Instalados e NÃO Publicados** de seu e-commerce na seção **Design da Loja**, seguindo o caminho: ***`Minha Loja > Design da Loja`*** ![Tela Principal do Painel Administrativo do seu E-commerce na Tray](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYqqnUapMutolbsDnPP%2F-MYqvFOHn7kO1EytWXcH%2Fimage.png?alt=media\&token=1ac59164-9087-4ff6-ae43-200ec2961a9f) ![Tela Design da Loja](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYqqnUapMutolbsDnPP%2F-MYqwH42pm3Bfxuq6Wy0%2Fimage.png?alt=media\&token=c67cad95-2dfb-4e27-bb35-d67f8687bb0c) {% hint style="info" %} **Tema Publicado** é o local reservado para o tema que aparece na internet para o usuário final, seu cliente. Sempre haverá somente um tema nesse local e todas as alterações feitas nele ficarão aparentes para todos que acessarem sua loja virtual. {% endhint %} {% hint style="info" %} **Temas Instalados e NÃO Publicados** é o local reservado para todos os temas instalados ou duplicados. Aqui é o local onde você pode editar sem medo e fazer testes, pois seu cliente não verá essa versão, já que ele só consegue ver o tema que está publicado. {% endhint %} {% hint style="warning" %} Como informado acima, apesar de instalado, os temas não publicados estão apenas em seu painel administrativo e não no ar para que seus clientes possam ver. Para que ele fique visível ao usuário final é necessário **Duplicar**, **Editar** e depois **Publicar seu Tema.** Esses assuntos serão abordados no próximo tópico em detalhe. {% endhint %} # 2.2 Duplicar, Editar e Publicar seu tema Agora que você já conhece a seção **Design da Loja** e sabe a diferença entre um **Tema Publicado** e os **Temas Instalados e NÃO Publicados**, vamos **Aprender como Duplicar, Editar e Publicar seu Tema.** {% hint style="info" %} Em **Temas Instalados e NÃO Publicados**, localize o tema da **Linha FLAT** que você acabou de adquirir. {% endhint %} Como já informado, para que o tema seja visualizado na internet pelo seu cliente, antes é necessário passar pelas etapas de duplicação do tema, depois pela edição para customização de todos os detalhes que você desejar e, por final, a publicação. {% hint style="danger" %} **DUPLICAÇÃO DO TEMA: Tópico importante que deve ser feito com muita atenção para evitar problemas futuros.** {% endhint %} {% hint style="danger" %} **IMPORTANTE: antes de fazer qualquer tipo de alteração no seu tema, aconselhamos que você sempre faça uma cópia. Vamos explicar abaixo:** {% endhint %} *Antes de realizar alterações no seu tema, você deve criar uma cópia dele, renomear essa cópia, alterar essa cópia e depois publicá-la, transformando agora essa cópia em versão atual na internet.* *Quando publicamos uma nova versão, automaticamente, a versão que estava publicada é transferida para a lista de temas não publicados, mantendo esse tema anterior intacto. Desta forma, caso você se arrependa ou queria em algum momento futuro voltar com a versão antiga, isso poderá ser feito sem nenhum problema.* *Para criar uma cópia do tema que você acabou de adquirir, basta seguir os passos abaixo.* > **PASSOS PARA DUPLICAR O TEMA:** > > 1. Clicar no **ícone quadrado com seta**; > 2. Clicar no **item Duplicar**, para duplicar seu tema; > 3. Na sequência confirme a duplicação do tema; > 4. Pronto, seu tema foi duplicado. > Observe que aparecerá na frente do nome original do tema a palavra **Cópia**. Ou seja, além do tema **Fábrika Flat Moda** que você acabou de adquirir, você agora também tem na lista de temas não publicados o **Cópia Fábrika Flat Moda**. > > Feita a duplicação de seu tema, sugerimos manter o tema do tema original e **editar o nome** dessa cópia para iniciar sua edição e depois **publicá-lo**. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVddY_FrZFIPzFdM4U-%2F-MVdeb8tZV9Pq1Aih9G1%2F2.2%20-%20PUBLICAR%20SEU%20TEMA%20-3.png?alt=media\&token=90ebb76d-f1e4-459c-a4cc-07321a8c56e6) Agora que você já possui a cópia de seu tema, vamos ensiná-lo a customizá-lo! Mãos-a-obra e divirta-se! {% hint style="danger" %} **EDIÇÃO DO TEMA** {% endhint %} > **PASSOS PARA EDIÇÃO DO TEMA:** > > 1. Clicar no **Botão Editar Tema**; > 2. Nesse momento, abrirá uma nova aba com o **Painel de Edição do seu Tema**; > 3. Feitas todas as edições, **clicar no Botão Salvar**, localizado no lado direito, no final do Painel de Edição do Tema. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVdescuwJO5_C4GMcTa%2F-MVdfASrThjF8gXpkp-2%2F3.1%20-%20EDITAR%20TEMA.png?alt=media\&token=bbfe65b0-1300-4f14-919b-d618b7459b46) Abaixo, segue a imagem do **Painel de Edição do Tema** que está detalhado no item 3 desse manual. Lá explicaremos em detalhe as possibilidades de configuração. ![Tela Principal do Painel de Edição do Tema da Linha FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYqwzRperrFmqPuLReS%2F-MYqxgkCRMCCEVnWPfXi%2Fimage.png?alt=media\&token=90549fa4-15de-4f88-863f-4f9efe7c5076) {% hint style="danger" %} **VISUALIZAÇÃO DO TEMA** {% endhint %} Uma vez todas que todas as configurações e personalizações de seu tema forem concluídas, você deverá visualizá-las na internet antes de publicá-las, dessa forma você poderá fazer uma revisão final para ter certeza que seus clientes verão exatamente o que você espera. Para isso, basta seguir os passos abaixo: > **PASSOS PARA VISUALIZAR SEU TEMA NA LOJA ANTES DE PUBLICAR:** > > 1. Clicar no **Botão Visualizar na Loja**; > 2. Nesse momento, abrirá uma nova aba do navegador, mostrando seu e-commerce já com o novo tema que você acabou de editar; > 3. Depois de tudo conferido, volte para o administrador do seu e-commerce, pois você já estará pronto para publicar o seu tema. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYqwzRperrFmqPuLReS%2F-MYqyrmpxLH2_2wDbOIn%2Fimage.png?alt=media\&token=6162cc92-5a44-4886-8498-7d6d4a0fad81) {% hint style="danger" %} **PUBLICAÇÃO DO TEMA** {% endhint %} Depois que todas as suas alterações forem testadas e visualizadas, e você tiver certeza que está pronto para publicar essa nova versão, chegou o momento de mostrar para seus cliente seu e-commerce com o novo layout! Para isso, basta seguir os passos abaixo. > **PASSOS PARA PUBLICAR SEU TEMA:** > > 1. Encontrar o Tema que será Publicado; > 2. Clicar no **Botão Publicar**. {% hint style="danger" %} **Feita a publicação, verifique se o tema está na seção Tema Publicado, localizada na parte superior dessa página. Após a confirmação, chegou a hora de acessar o site na internet para conferir o novo visual.** **Apontamento do Domínio: Caso você não tenha feito o apontamento de um domínio customizado ainda e não saiba nem por onde começar, nesse** [**link**](https://atendimento.tray.com.br/hc/pt-br/articles/360024986951-URLs-e-Redirecionamentos) **a Tray fala tudo sobre esse assunto.** {% endhint %} ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVddY_FrZFIPzFdM4U-%2F-MVdek1TEn0S66AyYNlF%2F2.2%20-%20PUBLICAR%20SEU%20TEMA%20-4.png?alt=media\&token=1567e0b8-ec67-4b83-bf9d-591511b45fd5) Pronto! Seu novo tema já estará no ar. Porém, por uma questão de atualização de cachê, pode demorar um pouco mais para todas as suas configurações estarem visíveis em todas as páginas e seções do seu e-commerce. Não se preocupe, isso é normal! Em breve tudo estará em ordem! :) # 2.3 Atualizar seu tema Agora que você já sabe como Instalar, Duplicar, Editar e Publicar o seu tema, vamos para a parte de Atualização do Tema. Porque você precisa saber sobre atualizações? Porque sempre que encontramos um erro ou lançamos uma nova funcionalidade, o tema sofre por uma atualização sem custo e você lojista, precisa atualizar para receber as novidades e correções. Quer saber se sua versão é a mais atual e como deve proceder para atualizar seu tema? Acesse nossa seção de Atualizações clicando [aqui](/7.-atualizacoes-do-tema-changelog). # 03. Painel de Edição do Tema Nosso template possui configurações especiais e funcionalidades únicas, por isso, foi necessário explicar ponto a ponto nossas possibilidades dentro do "**Editar Tema**”. Contudo, existem configurações do tema que você realizará fora da área "**Editar Tema**”, como por exemplo: configurar seu BLOG, suas páginas institucionais e seus banners. A seguir, vamos explicar como realizar as configurações desses pontos. A Tray possui também configurações diretas na plataforma que você também precisará aprender, para que possa tornar sua loja 100% funcional. Por exemplo, é importante entender o cadastro de categorias e produtos para que eles estejam bem definidos e ajude seus clientes a encontrar o que eles desejam. A Tray possui uma página com tutoriais sobre toda a plataforma que você pode consultar [**aqui**](https://basedeconhecimento.tray.com.br/hc/pt-br). Além disso também é possível entrar em contato com eles e tirar dúvidas específicas através da Central de Atendimento, [**clicando aqui**](https://www.tray.com.br/canais-de-atendimento/). Mas a Fábrika também procurará sempre ajudá-los para acelerar o processo de lançamento de sua loja, por isso, listaremos a seguir alguns pontos básicos de sua loja que é muito importante você saber. O **Painel de Edição** do seu tema é dividido em **2 seções**. A **Seção Estrutura e Elementos do Layout** e a **Seção de Cores do Layout** do Tema. {% hint style="info" %} **Seções do Painel:** **1) Seção Estrutura e Elementos do Layout** = onde são feitas as configurações dos elementos, como a vitrine de produtos, por exemplo. **2) Seção de Cores do Layout** = onde são feitas as configurações das cores dos itens da vitrine de produtos, botões, linhas, títulos, textos, fundos e etc. {% endhint %} ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr-UH2wHeWkTB0MPoB%2F-MYr0E7_Q2tXS7qkMl-f%2Fimage.png?alt=media\&token=d5812936-37e9-403e-9c3b-8d309bdb7eb4) Agora explicaremos cada uma dessas duas seções em detalhe nos itens **3.1 - Edição da Estrutura e Elementos** e **3.2. Edição das Cores** # 3.1 - Edição da Estrutura e Elementos **De forma resumida, listamos a seguir os módulos editáveis de seu template:** * **Cabeçalho**\ *No módulo **Cabeçalho** você consegue editar o **Logotipo** que aparece no cabeçalho/menu da loja e ativar e desativar todos os itens do **Pre-Cabeçalho** composto por Login / Cadastro, Lista de Desejos, Minha Conta e Rastreio.*
* **Menu**\ *No módulo **Menu** você consegue acrescentar páginas institucionais, blog ou página de contato no menu principal, ou seja, onde aparecem sua categorias. Geralmente só são possíveis categorias nessa área. Graças a esse módulo, seu menu conta com novas possibilidades.*
* **Régua de Informações**\ *O módulo **Régua de Informações** permite que sejam alterados a imagem e o texto da fileira vantagens da loja, que fica logo abaixo do banner principal. Essa fileira de vantagens serve para que seja possível divulgar os benefícios que sua loja oferece com destaque. Normalmente esse campo é usado para falar sobre frete grátis, opções de pagamento e parcelamento, proteção de compra, etc., mas você pode colocar nele o que desejar.*
* **Vitrines de Produto**\ *As **Vitrines de Produtos** são faixas na sua **Home** onde são divulgados seus produtos, de maneira que eles fiquem em destaque na loja. Aqui é possível selecionar produtos de categorias específicas, com frete grátis, os mais vendidos, com selo de destaque ou lançamento.* *O título pode ser alterado, ou seja, você pode usar essas vitrines da maneira que achar mais vantajosa para sua loja online.*
* **Carrossel de Marcas**\ *No **Carrossel de Marcas**, que aparece na home, semelhante à vitrine, é possível acrescentar os logotipos de suas marcas parceiras e/ou as marcas que você trabalha na loja. Ele é interessante para que seus clientes já saibam desde o primeiro acesso na **Home** qual tipo de produto você trabalha.*
* **Rodapé**\ *A aba **Rodapé** é uma região com vários locais de edição dentro do painel. Iremos destrinchar melhor a parte do **Rodapé**, mas agora apenas citaremos os pontos de edição:*
* ***Logo** - diferente do logotipo da aba Cabeçalho, aqui é possível alterar o logotipo que se encontra no Rodapé da página.*
* ***Listas de Links** - aqui é possível listar as **páginas institucionais** e **blog** ou a **página de contato** que poderão aparecer no rodapé. Você pode colocar o título da fileira, o nome que gostaria que aparecesse e linkar uma URL a esse nome.*
* ***Outros Textos** - aqui você poderá definir o texto que aparece abaixo da logo do rodapé e também o texto do copyright no fim da página.*
* ***Bandeiras de Pagamento e Segurança** - aqui você altera o título e a imagem que aparece nessas regiões. A **Bandeira de Pagamento** está relacionada aos métodos de pagamentos aceitos na loja e as de **Segurança** são os selos de segurança que sua loja possui.*
* ***Facebook Widget** - aqui é possível colocar o widget do Facebook, aquela miniatura da sua página no facebook que aparece no canto inferior direito.*
* **Contato**\ *Aqui é possível alterar o telefone e o e-mail que aparecem no rodapé e também na página de Contato, além de acrescentar o número de seu WhatsApp para o ícone de WhatsApp Flutuante que será explicado a seguir.*
* **Redes Sociais**\ *É possível colocar os links de suas redes sociais para que apareçam os ícones delas em sua loja.*
* **Pop-up**\ *Aqui você configura os Pop-ups de abertura e de saída da página. Os pop ups são as janelas que abrem quando seu cliente entra na loja e quando ele tenta fechar a janela. Nele você pode colocar promoções com o objetivo de conseguir o e-mail do cliente e trabalhar com ele depois com suas ações de marketing.*
* **Botão de Voltar ao Topo**\ *Aqui é possível configurar o botão que aparece no canto direito do site. Com ele, seu cliente poderá voltar ao topo do site com apenas um clique.*
* **WhatsApp Flutuante**\ Aqui você c*onfigura o ícone do WhatsApp flutuante que aparece na loja online. Com essa configuração, basta clicar no ícone para que seu cliente seja direcionado para seu WhatsApp.*
A configuração de todos os pontos será detalhada a seguir.
# 3.1.1 - Cabeçalho O **Cabeçalho** é dividido em **2 partes: Pré-Cabeçalho e Cabeçalho** e cada uma delas é **composta por alguns elementos**. ![Pré Cabeçalho e Cabeçalho - Layout Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr1phslNSk3NMVTIGn%2F-MYr2g0ajQgYT0zL-7S1%2Fimage.png?alt=media\&token=ce18797f-2f81-4f91-9522-fb14f2c996b2) {% tabs %} {% tab title="PRÉ-CABEÇALHO" %} * Login / Cadastra-se: * Lista de Desejos: * Minha Conta: * Rastreio Rápido: * Links das Mídias Sociais: {% endtab %} {% tab title="CABEÇALHO" %} * Logo: * Busca rápida: * Carrinho de compras: {% endtab %} {% endtabs %} > Agora chegou o momento de ativar ou desativar alguns itens do Pré-Cabeçalho no seu e-commerce. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Cabeçalho** do menu lateral; > 3. Clique em **Um dos itens de sua escolha** para ativar ou desativar.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr1phslNSk3NMVTIGn%2F-MYr3eJE6T865QdU5sYO%2Fimage.png?alt=media\&token=b41ea960-fa5d-4a9d-927e-3b089af6a0b3) > Agora chegou o momento de inserir a logo da sua marca no seu e-commerce. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Cabeçalho** do menu lateral; > 3. Clique na **Logo existente** para editar; > 4. Na sequência escolha a **logo** que deseja salvar. > > **OBS:** *O tamanho ideal para logo é de 300px x 60px*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr1phslNSk3NMVTIGn%2F-MYr3CpKRi0KAVCQuW4f%2Fimage.png?alt=media\&token=5e5a74d8-93b4-4013-a87f-5411ec48a286) # 3.1.2 - Menu O **Menu** normalmente é composto apenas por categorias e subcategorias, mas nos temas desenvolvidos pela **Fábrika** o menu têm uma funcionalidade especial e é composto por **2 partes** . Acrescentamos ao menu 2 links extras para que os lojistas possam acrescentar 2 páginas internas ou externas. Um link fica na extrema esquerda e o outro na extrema direita do menu. Claro que essas opções não são obrigatórias e você pode ficar a vontade para usar somente se quiser. {% hint style="danger" %} Para evitar quebras ou desalinhamento do layout, o menu na versão desktop tem uma limitação para que os lojistas não carreguem muitas categorias no layout.\ \ Na **versão desktop** o layout carrega até 8 itens podendo ser de 3 formas:\ \- 8 categorias sem links externos \- 7 categorias com 1 link externo \- 6 categorias com 2 links externos
Na **versão mobile**, essa trava não existe, pois esse risco não acontece uma vez que o menu deixa de ser horizontal para vertical. **Obs**: A limitação não implica no cadastro das categorias e sim no carregamento. Isso quer dizer que se o lojista cadastrar 20 categorias na loja, a versão desktop irá carregar no máximo 8 categorias e na versão mobile irá carregas as 20 categorias.
{% endhint %} Além desse detalhe, o menu já está configurado para apresentar até 3 níveis. Esses níveis são ativados automaticamente conforme as categorias são inseridas no e-commerce. Para configurar as categorias da forma correta, acesse o painel administrativo da Plataforma Tray e siga o caminho: ***`Produtos > Categorias`*** > Na imagem abaixo, dentro do retângulo vermelho, você verá o menu na sua totalidade e, nos dois retângulos em amarelo, você verá os links extras para as páginas internas ou externas que explicamos acima. ![Menu (categorias e páginas) - Layout Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVnimrJQzXa1E_cSXRi%2F-MVnpQpo4Ugybvng11Z5%2FTema-%20Flat-3-1-2-Menu.png?alt=media\&token=aeea1b80-a4b8-4e32-b6f5-8a0a47875e58) > Na imagem abaixo, o item 1 mostra o *1o nível do menu*, o item 2 o *2o nível do menu* e o item 3 o *3o nível do menu, com base nas* categorias cadastradas. ![Menu (3 níveis de categorias) - Layout Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVnimrJQzXa1E_cSXRi%2F-MVnpX7Tpam6vExl0LNy%2FTema-%20Flat-3-1-2-Menu-2.png?alt=media\&token=6b518c25-d23a-468f-a8a6-b3b3b51e1049) > Agora chegou o momento de configurar os dois links extras do seu menu que pode levar seus clientes tanto para páginas internas quanto externas. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Menu** do Menu lateral; > 3. Clique para ativar ou desativar o **Link Extra** do Menu; > 4. Digite o **texto** que irá aparecer no Menu do seu e-commerce; > 5. Digite ou cole o **endereço** interno ou externo para onde seu cliente será direcionado ao clicar no item do menu do seu e-commerce.\ > \* para ***páginas internas***, coloque apenas o nome cadastrado em seu e-commerce.\ > \- *exemplo*: noticias\ > \* para ***páginas*** ***externas***, coloque a url completa.\ > \- *exemplo*: ![Menu - Painel do Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVnimrJQzXa1E_cSXRi%2F-MVntbXnxo_R7Tz9G2R8%2FTema-%20Flat-3-1-2-Menu-3.png?alt=media\&token=301989c7-8b8e-4506-b04b-525a895c740e) # 3.1.3 - Régua de Informações A **Régua de Informações** é uma seção do seu layout bastante usada por vários e-commerces para passar aquela informação importante, mas que nem sempre precisa ir para uma seção exclusiva de banner. A informação que irá aparecer quem decide é você. Geralmente nessa região são divulgadas informações de vantagens de sua loja, ou seja, coisas que possam convencer mais o cliente a realizar a compra. Em nosso **Tema FLAT**, por exemplo, colocamos **Parcelamento**, **Frete Grátis** e **Compra Segura**. Essa é uma boa forma para utilizar essa região, que também pode servir como uma tarja/banner de vantagens. Claro que isso depende da loja e da sua necessidade, por isso, esse campo é bem versátil permite uma gama de opções. > Na imagem abaixo, dentro do retângulo vermelho, você verá como fizemos a nossa **Régua de Informações,** composta por 3 blocos, onde cada bloco possui uma imagem (ícone) e um texto (título). ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MdrO_E55WvprekqeSi3%2F-MdrPsjK3YzS3SuMXZRh%2Fimage.png?alt=media\&token=5df18e94-4672-4228-817b-b1e7714a1e8c) > Agora chegou o momento de configurar a RÉGUA DE INFORMAÇÕES no seu painel. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Régua de Informações** do Menu lateral para selecionar e editar os 3 blocos; > 3. Para editar o primeiro bloco, clique na **Imagem existente** e na sequência escolha a nova imagem que deseja salvar; > 4. Depois, digite o **texto** que irá aparecer ao lado da imagem salva como **Título**; > 5. e na sequencia, digite o **texto** que irá aparecer ao lado da imagem salva e abaixo do Título, mas como **Sub-titulo**; > 6. Para configurar o **segundo e o terceiro blocos**, basta repetir os itens acima e depois clique em **salvar** no final da página. > > **OBS:** *O tamanho ideal para essa imagem é de 30px x 30px (sugerimos não ultrapassar o tamanho informado para a altura)*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MdrO_E55WvprekqeSi3%2F-MdrQMNySw1Lcix8knIK%2Fimage.png?alt=media\&token=d07a5844-7ddb-4d9f-b12b-e42f6e2810d1) # 3.1.4 - Banners O seu tema **FLAT** conta com **diversos Banners na página principal (home)**, para que você possa deixar a loja com a cara da sua marca já desde o início. Temos os banners principal, banners secundários e até mesmo mini banners para complementar o visual da sua home, na versão desktop e versão mobile. {% hint style="danger" %} **Sempre que você for trabalhar com imagens (logo, produto, banner, popup e etc) para a sua loja, não deixe de verificar as orientações abaixo:** \ \- o nome do arquivo **não** pode conter espaço entre as palavras;\ \- o nome do arquivo **não** pode conter caracteres especiais;\ \- o nome do arquivo **não** pode conter acentos;\ \- **sugerimos** que o nome do arquivo seja curto;\ \- upload para atualizar/substituir uma imagem existente na sua loja, **nunca** use o mesmo nome do arquivo, pois o cache da plataforma vai dificultar a mudança da imagem no servidor da Tray. Se a imagem no site é logo.png agora você deve mudar para logo-nova.png {% endhint %} > Veja na imagem a seguir a posição de cada um deles e o nome que estão cadastrados: #### Telas da versão Desktop ![](https://lh6.googleusercontent.com/g20yvwsOxwj4XvnVonFk6wC1iE2fAxYDxQB44ZN6mDAVUfrKWAVuF1uPoKe_wx8HCPhZW9LapQ7V7sNCIrknzm4_EKKWBpCqPhtJgF21SkV7bUCMLzNfZ-47fSZBGG8GfGofJAwj) ![](https://lh5.googleusercontent.com/VjUKBVGZ6rFYqs4VvVO9bX2ZqVDdOgXyxi6kD3nR8Q3Gmr24mii5HBSrf1Hba_r9xz4EpBNixhR0kj8_TTpQ4eTLwYaUGZMtB3Hpfvrk6KnW9e5OLcJvx0g8uxtet57CqC3KjnXg) #### Telas da versão Mobile ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FlMNEJdiNMGmMy4CmVAaI%2Fimage.png?alt=media\&token=ca1562a7-c940-40a1-be49-5447c07ecd26) > Agora que você já conhece todos os **Banners** disponíveis, está na hora de aprender a alterá-los caso deseje. > > Para alterá-los, você precisa ir em ***`MARKETING > BANNERS`*** e seguir o passo a passo abaixo: > 1. Com o **Painel Administrativo do seu E-commerce** aberto, clique na aba **Marketing** e em seguida em **Banners da Loja**. > 2. Ao ser redirecionado para página de banners, você encontrará o nome de cada um dos banners do template. Basta clicar no ícone de edição que fica na fileira ações do banner que deseja alterar. > 3. Dentro da página de edição, procure “escolher arquivo”, logo acima da foto cadastrada e escolha a nova imagem. > 4. Após isso, clique em salvar. > > **OBS**: Caso sua alteração seja no banner principal, ou seja, o 01 - Banner Home Full - Desktop, ou em sua variante para mobile, 02 - Banner Home Full - Mobile, você pode acrescentar mais de um, já que esses banners tem o efeito carrossel. Para isso, você deve seguir os mesmos passos acima, porém para adicionar mais de um banner, vá até o último cadastrado e clique em “incluir mais fases”. {% hint style="info" %} Relação dos banners seus tamanhos e localização de exibição: * Banner Categoria - **Rodapé** - 2000x250px - Banner Rodape * Banner Categoria - **Topo** - 2000x250px - Banner Titulos * Banner Vitrine - **Mobile** - 740x430px - Extra10 * Banner Vertical 1 - **Desktop/Mobile** - 380x482px - Extra2 * Banner Horizontal 1 - **Desktop/Mobile** - 378x226px - Extra3 * Banner Horizontal 2 - **Desktop/Mobile** - 378x226px - Extra4 * Banner Vertical 2 - **Desktop/Mobile** - 380x482px - Extra5 * Banner Vitrine 1 - **Desktop** - 1200x430px - Extra6 * Banner Mini 1, 2 e 3 - **Desktop e Mobile** - 380x160px - Extra7, Extra8 e Extra9 * Banner Home Full - **Desktop** - 2000x600px - Banner Home * Banner Home Full - **Mobile** - 740x740px - Extra1 **OBS.:** * Banner **Desktop** - esse banner só vai aparecer na versão desktop * Banner **Desktop e Mobile** - esse banner vai aparecer nas versões desktop e mobile * Banner **Mobile** - esse banner só vai aparecer na versão mobile * Banner **Categoria** - Esses banners só aparecem nas categorias e na página dos produtos. Em especial para os banners de categoria, existe uma configuração dentro do painel de edição do tema que você precisa ativar para que eles funcionem. Observe o último print dessa tela. Detalhes sobre os **Banners de Categoria**, acessar a seção[ 4.4 Categorias e Subcategorias](/4.-configuracoes-especificas-do-seu-tema/4.4-categorias-e-subcategorias)
**IMPORTANTE:** * Observar que cada banner possui uma localização de exibição para configurar e se isso não for feito o banner não aparece no lugar certo do seu tema. **Exemplo**: Banner Vitrine - Mobile a localização de exibição é EXTRA10 **Faça download dos banners relacionados acima em formato .psd para usá-los como base para a criação dos seus banners e da relação das medidas,** [**clicando aqui**](https://drive.google.com/file/d/1cJZ_KLB0OiaboBTv7d_TnbRvLbpytZNr/view?usp=sharing)**.** {% endhint %}
![](https://lh3.googleusercontent.com/EMwktVygUNb1vB3W8MhreJMGWsuiIiQm-Kze4dGw7KB28lFYXq1zFIZusObdU-O1YgBdj4rF72__jGXr_UCHpl3d0trYmn5UeAoc07QCAO-_nDSKxEw4wFLGrbI02R8uogxQuYZV) {% hint style="danger" %} SÓ DEVEM ATIVAR OS BANNERS NO PAINEL SE AS IMAGENS ESTIVEREM ATIVAS NA PLATAFORMA. {% endhint %}

# 3.1.5 - Popups Os **Popups de Entrada e Saída** são muito usados em ações de Marketing Digital nos e-commerce. Pensando nisso, trouxemos o nosso Popup com algumas personalizações interessantes. {% hint style="danger" %} **Sempre que você for trabalhar com imagens (logo, produto, banner, popup e etc) para a sua loja, não deixe de verificar as orientações abaixo:** \ \- o nome do arquivo **não** pode conter espaço entre as palavras;\ \- o nome do arquivo **não** pode conter caracteres especiais;\ \- o nome do arquivo **não** pode conter acentos;\ \- **sugerimos** que o nome do arquivo seja curto;\ \- upload para atualizar/substituir uma imagem existente na sua loja, **nunca** use o mesmo nome do arquivo, pois o cache da plataforma vai dificultar a mudança da imagem no servidor da Tray. Se a imagem no site é logo.png agora você deve mudar para logo-nova.png {% endhint %} Exemplo: você pode mudar imagem, texto e posicionamento. Dessa forma, você tem mais liberdade para criar e executar mudanças sem depender de outros profissionais. > Esse é o **Popup de Entrada** (desktop). ![Seção POPUPs - Popup de Entrada - Painel do Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVsnUznLZHgfFQt7eBO%2F-MVvQXfB7MGqw38ET-vV%2F11-Tema-Flat-Moda-POPUP-ENTRADA-Limpo.png?alt=media\&token=c6f5836c-2760-46b2-a1e5-d1a833ce757b) > Esse é o **Popup de Entrada** (mobile). ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FWqD9p0dvHOiUdJBdGHcm%2Fimage.png?alt=media\&token=288ca599-04e0-4dc6-8e99-8e3e0968018e) > Esse é o **Popup de Saída** (desktop). ![Seção POPUPs - Popup de Saída - Painel do Tema FLAT da Fábrika de E-commerce](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVsnUznLZHgfFQt7eBO%2F-MVvQbx1OXfub7djl3Rf%2F11-Tema-Flat-Moda-POPUP-SAI%CC%81DA-Limpo.png?alt=media\&token=73be8fa8-3c92-4cd2-8da3-33bdc976e9f1) > Agora chegou o momento de configurar os **Popups de Entrada e Saída** de sua loja online. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Popups** do Menu lateral para selecionar e editar; > 3. Para ativar (ou desativar) o **Popup**, clique em **Ativar popup**; > 4. Para trocar a imagem, basta clicar na **Imagem existente** e na sequência escolher a imagem que deseja salvar;\ > **OBS:** *O tamanho ideal para essa imagem é de 830px x 555px (desktop) e 420px x 500px (mobile)*
> 5. No campo **Título**, digite o título de sua escolha; > 6. No campo **Texto** digite o texto de sua escolha; > 7. No campo **Observação** digite a observação de sua escolha; > 8. Escolha o **Período** em que o Popup deve aparecer; > 9. Escolha o **Posicionamento** do Popup; > 10. **Redimensione** incluindo a Largura e Altura do Popup.\ > **OBS:** Caso não tenha conhecimento para trabalhar com medidas em px aconselhamos deixar os campos largura e altura vazios como estão, mantendo a configuração padrão. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FsmywL8UeHllDcDHdnPmo%2Fimage.png?alt=media\&token=0596427c-fbf3-4006-98cd-7ea22ee76293) # 3.1.6 - Vitrines de Produtos A **Vitrine de Produtos** do nosso tema, possui um total de **3 Vitrines** e cada uma delas pode ser visualizada em 2 formatos: **carrossel ou grade**. Agora use sua critividade para configurar suas Vitrines de Produtos da melhor forma em seu novo layout. > Observe na imagem que trouxemos o mesmo layout, com o uso dos formatos Carrossel e Grade gerando 3 disposições diferentes nas Vitrines: Novidades, Mais Vendidos e Destaques. ![Exemplo usando 2 Vitrines como no formato Carrossel e 1 no formato Grade](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2F5H2bTWtHtreqasS2WZ0l%2Fimage.png?alt=media\&token=a424aa2e-4d66-4806-9922-ca357e9b0a91)
> Agora que você já viu um pouco do que você pode fazer com as VITRINES DE PRODUTOS, chegou o momento de ver como fazer isso na prática. > > Para isso, vamos entender cada um dos itens, seguindo os passos abaixo: > > Com o **Painel de Edição do seu Tema** aberto; > > 1. Clique no item **Vitrines** do Menu lateral para selecionar e editar os 3 blocos; > 2. Para ativar (ou desativar) a primeira vitrine, clique em **Ativar Vitrine**; > 3. Para ativar (ou desativar) o formato Carrossel ou Grade da primeira vitrine, clique em **Ativar Carrossel**; > 4. Para escolher o tipo de vitrine que ficará disponível, clique em um dos tipos: Destaque, Lançamento, Frete Grátis, Promoção, Mais Vendidos ou Apenas as Categorias Selecionadas;\ > *`Destaque - Produtos cadastrados com o selo de Destaque;`*\ > *`Lançamento - Produtos cadastrados com o selo de Lançamento;`*\ > *`Frete Grátis - Produtos cadastrados com o selo de Frete Grátis;`*\ > *`Promoção - Produtos cadastrados com Valor Promocional;`*\ > *`Mais Vendidos - Produtos Mais Vendidos da sua Loja;`*\ > *`Apenas as Categorias Selecionadas - Produtos cadastrados nas Categorias escolhidas.`* > 5. Digite o texto de sua escolha para o título que ficará visível no layout dos produtos da vitrine escolhida; > 6. Caso no item 4, você tenha escolhido **Categorias Selecionadas**, você precisará colocar quais são essas categorias, através dos números delas. O número das categorias, pode ser verificado acessando: `Produtos > Categorias.` O número de cada categoria aparece do lado esquerdo do nome; > 7. Caso no item 3, você tenha desativado o Carrossel, você ter o formato grade e aqui você defini o numero de produtos que serão visualizados na vitrine. Podendo ser de 8 a 60 produtos. > *Chegando aqui, você terá concluído a configuração da Vitrine 01. Para fazer as Vitrines 2 e 3, basta repetir os passos acima.*
Manipulando as Vitrines
# 3.1.7 - Depoimentos A **Seção Depoimento** do nosso tema é uma grande oportunidade da loja explorar o depoimentos dos clientes como prova social para novos clientes ou clientes indecisos. Como a seção depoimento será apresentada na Home de sua loja.
Como o cliente irá visualizar a página com todos os depoimentos.
Agora que você já viu como a seção Depoimentos aparecerá em sua loja, vamos para a configuração. A configuração é dividida em 2 partes, painel da Tray e painel do tema. 1\. Painel da Tray - Basta seguir a orientação que a Tray fornece nesse link - ;\ \ 2\. Painel do Tema - Está dividido em ativar e configurar as cores. 2.1 Ativar a seção Depoimentos e escolher o nome que quiser no título.
2.2 Configurar as cores.
> # 3.1.8 - Carrossel de Marcas O **Carrossel de Marcas** pode ser usado para expor as marcas que sua loja trabalha em parceria, por exemplo. É importante entender que essa é uma área de exposição. Ou seja, você pode exibir imagens de algo relacionado a sua marca, como produtos, por exemplo, mas o carrossel não funciona como as **Vitrines**, que são exclusivas para produtos. > Veja na imagem abaixo um exemplo de Carrossel de Marcas. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr50VqbYz66iZUmPY7%2F-MYr5jfWWB877kL6gRBc%2Fimage.png?alt=media\&token=be1affb6-432d-4321-896d-ce999566b790) {% hint style="danger" %} **Sempre que você for trabalhar com imagens (logo, produto, banner, popup e etc) para a sua loja, não deixe de verificar as orientações abaixo:** \ \- o nome do arquivo **não** pode conter espaço entre as palavras;\ \- o nome do arquivo **não** pode conter caracteres especiais;\ \- o nome do arquivo **não** pode conter acentos;\ \- **sugerimos** que o nome do arquivo seja curto;\ \- upload para atualizar/substituir uma imagem existente na sua loja, **nunca** use o mesmo nome do arquivo, pois o cache da plataforma vai dificultar a mudança da imagem no servidor da Tray. Se a imagem no site é logo.png agora você deve mudar para logo-nova.png {% endhint %} > Para configurar seu **Carrossel de Marcas**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Carrossel de Marcas** do Menu lateral para selecionar e editar; > 3. Para ativar (ou desativar) o Carrossel de Marcas, clique em **Ativar**; > 4. Digite o texto de sua escolha para o **Título** que ficará visível acima do Carrossel de Marcas; > 5. Clique na **Imagem da marca** existente para editar e na sequência escolha a imagem da marca que deseja salvar. > 6. Digite o **Nome da Marca** que ficará visível no layout quando o usuário passar o mouse sobre a imagem; > 7. Digite o Link da Marca que acessará a página com produtos da marca. > > **OBS:** *O tamanho ideal para cada uma das logos é de 256px x 166px*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr50VqbYz66iZUmPY7%2F-MYr8DlFkgmCzt_aDInT%2Fimage.png?alt=media\&token=33b2df60-471c-48ef-a41c-c3d5bf19021f) # 3.1.9 - Blog ou Notícias Todos nós sabemos que o blog é muito importante atualmente para estratégias de marketing e também para ajudar no posicionamento de sua loja. Todo conteúdo abordado no blog é uma forma de fidelizar e atrair seu cliente para mais próximo da marca, levando-o à compra final. Com isso, entendemos que ter uma página de blog diferenciada e bem estruturada é ideal. Então, o blog do seu Template FLAT é personalizado e possui um visual mais atraente do que a opção normal da loja. A personalização está presente na home e na página central das notícias. Veja abaixo as telas da Home, página de notícias e a notícia. ![Chamada das notícias / posts na Home](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FfihThN9YFAlFeegjv0Ly%2Fimage.png?alt=media\&token=25fd9db8-a2b6-4982-ba35-5773d7ed5c2d) ![Página Central com todas as notícias / posts](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FmILzQItmMRSGJdxe72pZ%2Fimage.png?alt=media\&token=b82f5ae0-74c0-4d8c-8587-49b8e7f5809a) ![A Notícia / Post](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FAO5OcLUndCxiDHjtZWvm%2Fimage.png?alt=media\&token=d14ab47f-6b7a-4557-9bab-458b56058c1b) Nos usamos a personalização abaixo, mas você tem liberdade para testar todas as combinações. ![Painel para edição na sua home co possibilidade de quantidade de posts](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FrErtJ3gNr1n8ROxk1GKL%2Fimage.png?alt=media\&token=b9b174a2-3b13-4110-b493-a3173389603f) A Gestão do Módulo de Notícias / Post são feitas no painel central de sua loja clicando em:`MARKETING > NOTÍCIAS DA LOJA > GERENCIAR NOTÍCIA DA LOJA`\ \ **Para configurá-lo, siga o passo a passo abaixo:** 1 - No seu painel administrativo, vá até **Marketing**, depois acesse a parte de **Notícias da Loja**. 2 - Dentro de **Notícias da Loja**, você pode realizar algumas configurações típicas da Tray. Para acessar o editor de notícias/posts de blog, clique em **Gerenciar Notícia** da Loja. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FYQ03e9CQ4SGqZsJYWQgp%2Fimage.png?alt=media\&token=61e20f18-48d8-4ebe-a5d7-d2e0f1b380c2) 3 - Dentro dessa página, estarão **listadas as notícias cadastradas**, ou caso ainda não tenha nenhuma, uma lista em branco. Clique em **Incluir Notícias**. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2Fbu0fgM79EE6CzG7GBbdY%2Fimage.png?alt=media\&token=265a7cd4-2d80-42b7-8217-c72ccac3de0e) Na página de inclusão de notícias, você terá alguns pontos a serem preenchidos. Que listaremos abaixo. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FByKbWpSFCYboJH0TrVva%2Fimage.png?alt=media\&token=0b5980b1-9238-480f-abdf-3f8456dd017a) **Pontos a serem preenchidos no cadastro:** **Status** - aqui você mantém o post de blog ativo ou não. **Destaque** - aqui você marca se deseja que o post esteja destacado na página ou não. **Categorias** - no blog da Tray, é possível criar categorias para separar os temas de seus posts. Aqui você seleciona a categoria que desejar, caso tenha criado alguma. **Título** - título do seu post de blog. **Imagem** - imagem que aparecerá na página principal do blog e também na página do post. {% hint style="danger" %} **OBS**: o tamanho de imagem ideal para a notícia do Blog é de 1200x500px. **OBS 2** : o nome das imagens cadastradas aqui deve estar com LETRA MAIÚSCULA, e sua extensão deve ser .JPEG. \ ***Exemplo***: IMAGEMDANOTICIA.JPEG caso a foto não seja cadastrada desta forma poderá causar algum erro no visual da página. {% endhint %} **Descrição Simplificada** - texto que aparece abaixo do título principal na página principal do blog. **Descrição** - local onde você digita o conteúdo do seu post. **APÓS CLICAR EM CONTINUAR:** **Arquivos x Arquivos Selecionados** - aqui você pode colocar arquivos que tenha subido na loja no post, caso deseje. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FWmby8JLwBQteKWV5t1tV%2Fimage.png?alt=media\&token=939d313e-8c26-448b-a9fe-9b9062b0a7d1) **APÓS CLICAR EM CONTINUAR NOVAMENTE:** **Produtos Relacionados da Notícia** - aqui você seleciona produtos específicos para aparecerem no fim da notícia, de modo que possa divulgá-los. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FTHPy1SyXZiiDLkCe2c42%2Fimage.png?alt=media\&token=18aafdc9-c4f6-4dc3-b801-5c762f3576cd) **APÓS CLICAR EM CONTINUAR NOVAMENTE, SUA NOTÍCIA SERÁ SALVA**. **OBS**: caso queira entender melhor sobre criação de categoria de blog, arquivos e produtos para o post blog, acesse o tutorial da Tray aqui ( colocar link: ) # 3.1.10 - Rodapé Como o **Rodapé** é uma seção grande, para facilitar o entendimento, dividimos a imagem a seguir em **3 PARTES:**\ **1a parte** - logo, descrição, texto extra 1, dados de contato, listas de links e widget do Facebook;\ **2a parte** - bandeiras de Meio de Pagamento e Certificados de Segurança; \ **3a parte** - texto extra 2 e ícones das mídias sociais. > Chegou a hora de inserir as informações e imagens no **Rodapé** do seu e-commerce! > > Observe abaixo na caixa que existem **7 abas** para que você navegue entre os itens da seção **Rodapé**. {% tabs %} {% tab title="Logo" %} ## Logo do Rodapé > Para inserir a **LOGO DO RODAPÉ**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral para selecionar e editar; > 3. Clique na **Logo existente** para editar e na sequência escolha a logo que deseja salvar. > > **OBS:** *O tamanho ideal para logo do rodapé é de 250px x 50px*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtG1KTwJZJOdEoI4mf%2Fimage.png?alt=media\&token=4faafa3a-6cc2-418d-a666-6fa58abd5ea4) {% endtab %} {% tab title="Lista de Links" %} ## Lista de Links Aqui você consegue editar o **título**, os **nomes** **dos itens da lista** e os **links** para onde o usuário será enviado. > Para inserir as **LISTAS DE LINKS**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral para selecione editar; > 3. Digite o **Titulo da 1a lista** no campo Título;\ > Esse c*ampo é destinado para o título da lista, por exemplo: Institucional* > 4. Digite o **Texto do 1o item da lista** no campo Texto;\ > Esse c*ampo é destinado para o 1o item da lista, sendo ele uma página interna ou externa, por exemplo: Quem Somos* > 5. Digite o **Link do 1o item da lista** no campo Link;\ > *Campo destinado para o Link do 1o item da lista. Se for uma página interna, você deve usar a url curta cadastrada no painel da Tray, mas se for uma página externa você deve colocar a url completa do destino. Exemplos:*\ > *- página interna: Quem-somos*\ > *- página externa: *\ > \ > ***OBS:** Caso você ainda não saiba sobre **páginas internas e ocultas**, não tem problema, pois preparamos um material para você sobre esse assunto na seção 4.2 desse manual.*
> 6. Se você chegou até aqui é porque o título da 1a lista, o nome da 1a página e o link dela já estão cadastrados. Para cadastrar as outras páginas e/ou a 2a lista, basta seguir esses mesmos passos acima!
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtHT9clA6XIGSXeMjj%2Fimage.png?alt=media\&token=3bcf1ae5-d00f-4d02-854f-9c9c808eb20a) {% endtab %} {% tab title="Outros textos" %} ## Outros Textos Aqui você consegue editar o **Texto abaixo da logo** e o **Texto dos Direitos Reservados** que fica no final do RODAPÉ. > Para inserir a **TEXTO ABAIXO DA LOGO**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral para selecionar e editar; > 3. Digite o **Texto** no campo **Texto Abaixo da Logo**;\ > Esse c*ampo é destinado para o texto que ficará logo abaixo da logo do rodapé*. Geralmente é colocado um texto de boas vindas ou de apresentação da marca.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtIWooS4jLosihUtZn%2Fimage.png?alt=media\&token=273d4515-604b-423a-8853-ca8ddbaeb154) > Para inserir a **Direitos Reservados**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral para selecionar e editar; > 3. Digite o **Texto** no campo **Direitos Reservados**\ > Esse c*ampo é destinado para o texto copyright que fica logo abaixo da Faixa Assine nossa NewsLetter. O exemplo que colocamos foi: © 2021 Template Fábrika de E-commerce - Flat MODA. Todos os direitos reservados.*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtIl76sykzQQVUEOt9%2Fimage.png?alt=media\&token=0f0b877a-c273-4af0-bb37-acd4b1e73397) {% endtab %} {% tab title="Contatos" %} ## Contatos Os **Dados de Contato** (Telefone, Whatsapp e E-mail), aparecerem no **rodapé** e na **área de contato (Fale Conosco)** da sua loja online. > Para inserir os **Dados de Contato**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Contatos** do Menu lateral para selecionar e editar; > 3. Preencha com os campos **Telefone, E-mail e Whatsapp** que você quer que apareça para seus clientes; > 4. Após realizar as alterações desejadas, clique em **salvar** no final da página. > > **OBS:** o número colocado na caixinha “WhatsApp” é o que fará com que seu cliente seja direcionado ao clicar no ícone do WhatsApp Flutuante. Esse ícone será explicado melhor no item 3.1.9. Por isso, muita atenção ao número colocado nessa área.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtJKoCuYOtn98UVir9%2Fimage.png?alt=media\&token=7400cd5b-09cd-4bc9-998b-2835dc48615f) {% endtab %} {% tab title="Bandeiras de Pagamento e ..." %} ## Bandeiras de Pagamento e Certificados de Segurança Nessa região das **Bandeiras de Pagamento e Certificados de Segurança**, automaticamente estão inseridas as Bandeiras de Pagamento e Certificados de Segurança da Plataforma Tray. Porém, também é possível personalizar essas informações e/ou colocar algo especifico. > Para personalizar as **Bandeiras de Pagamento**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral; > 3. Desative o **Usar Bandeiras Padrão do Tema**; > 4. Para Inserir as **Bandeiras de Pagamento Personalizadas**, clique na **Imagem existente** e na sequência escolha a imagem que deseja salvar; > 5. Depois, digite o **Titulo** que irá aparecer nessa seção. > 6. Após fazer as alterações desejadas nas BANDEIRAS DE PAGAMENTO, clique em **salvar** no final da página. > > **OBS:** *O tamanho ideal para Bandeira de Pagamento é de 605px x 92px*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtK-muDxpbckh_P30e%2Fimage.png?alt=media\&token=ab03b353-1abe-4961-ba66-77066d966757) > Para inserir as **Bandeiras de Certificado de Segurança** personalizadas, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral; > 3. Desative o **Usar Bandeiras Padrão do Tema**; > 4. Para Inserir a **Imagem do Certificado de Segurança Personalizada**, clique na **Imagem existente** e na sequência escolha a imagem que deseja salvar; > 5. Depois, digite o **Titulo** que irá aparecer nessa seção. > 6. Após fazer as alterações desejadas no CERTIFICADO / SEGURANÇA, clique em **salvar** no final da página > > **OBS:** *O tamanho ideal para Bandeira de Certificado e Segurança é de 605px x 92px*
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MYr9lYnl4JAsajUXZ1B%2F-MYtKAFJc50KKPQau1-c%2Fimage.png?alt=media\&token=ebf79d17-50a6-4505-9ab3-3b02e4ee6094) {% endtab %} {% tab title="Mídias Sociais" %} ## Ícones das Mídias Sociais Os **Ícones das Mídias Sociais** aparecerem no **rodapé** e no **cabeçalho** da sua loja online. > Para inserir os **Links nos Ícones das Mídias Sociais** que aparecem no rodapé e no cabeçalho, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Redes Sociais** do Menu lateral; > 3. Escolha o **Perfil da Mídia Social** que sua empresa já possua uma conta e que você queira que apareça no seu e-commerce > 4. Preencha o campo com a **url** correta.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZonPjvVF9pbFufog5E%2F-MZoomx5YBIrDEzDkd2f%2Fimage.png?alt=media\&token=3e6edc2b-3be8-453d-82ec-84e0fbafbcd7) > {% endtab %} {% tab title="Widget Facebook" %} ## Widget do Facebook A configuração do **Widget do Facebook** é explicada em detalhes na seção **X.X.X - MÍDIAS SOCIAIS**. Agora você aprenderá somente a inseri-lo no rodapé da sua loja online. > Para inserir o **Widget do Facebook**, siga os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Rodapé** do Menu lateral; > 3. Role a página para baixo e em **Facebook Widget**, preencha os dados solicitados; > 4. Preencha com o **Título** que você quer que apareça; > 5. No campo **Código do Widget**, clique em **`SAIBA MAIS`**, conforme tela abaixo para acessar a página **FACEBOOK for Developers** e criar o seu código; ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZonPjvVF9pbFufog5E%2F-MZorDk1oifIIHgaYmq3%2Fimage.png?alt=media\&token=b45e2aba-4a91-4c07-b70f-098823dd8f52) > Na página **FACEBOOK for Developers** conforme print, basta seguir os passos abaixo: > > 1. Coloque a **url da sua página** no Facebook; > 2. Marque a opção: **Usar cabeçalho pequeno**; > 3. Clique em **obter código** para abrir uma nova janela. > > ***OBS.: os outros campos devem ficar vazios.*** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FYFKqB6VNCqJEYxb6gYhp%2Fimage.png?alt=media\&token=45d114df-4aed-492d-b1f0-52238d9de5e5) > Nessa **nova janela**, conforme print abaixo, siga os passos: > > 1. Clique em **IFRAME**; para acessar os dados que devem ser copiados. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FFAuoUqGtAFGw1yJChxXz%2Fimage.png?alt=media\&token=ef70256f-050f-4edc-abb3-8fbc5e3bbd2c) > Depois que você clicou em **IFRAME**, você deverá estar vendo o print abaixo. Agora você precisa copiar os dados conforme sinalizado no print abaixo e retornar para o editor de seu tema. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FKFOmM8VC8y2Z1R2qTvSg%2Fimage.png?alt=media\&token=7dbf1afc-da0d-4892-811b-501c39411b78) > Com os dados copiado e em seu editor de temas, agora você precisa substituir por todo o conteúdo que está no campo **CÓDIGO DO WIDGET** em seu tema e depois salvar para que os dados inseridos passem a funcionar em seu tema. > {% endtab %} > {% endtabs %} # 3.1.11 - Botão Voltar ao Topo O **Botão Voltar ao Topo** é usado para facilitar a vida do usuário quando ele quer subir rapidamente para o topo do e-commerce. > Esse é o **Botão Voltar ao Topo**. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVvTiboRLROOktbe58z%2F-MVvUeOM1BL9QQNB5EPe%2F3.2.10%20-%20WHATSAPP%20FLUTUANTE%20E%20BOTA%CC%83O%20DE%20VOLTAR%20AO%20TOPO.png?alt=media\&token=60fd9aeb-054c-46f4-874f-fea5850703d3) > Agora chegou o momento de configurar o **Botão Voltar ao Topo**. Para isso, basta seguir os passos abaixo: > > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Botão Voltar ao Topo** do Menu lateral; > 3. Para ativar (ou desativar) essa funcionalidade, clique em **Ativar o Botão Voltar ao Topo**; > 4. Na sequência clique em **salvar**.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZosaciVq512gCGcSoM%2F-MZot5ecCquq22KHO0Lb%2Fimage.png?alt=media\&token=a409e97c-ea06-482c-b581-e7e418010de3) # 3.1.12 - WhatsApp Flutuante O **Whatsapp** é amplamente utilizado como ferramenta de comunicação instantânea entre pessoas e empresas. Pensando nisso, colocamos em nosso tema o **Ícone do WhatsApp Flutuante**. > Esse é o **Ícone do WhatsApp Flutuante**. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MVvTiboRLROOktbe58z%2F-MVvUeOM1BL9QQNB5EPe%2F3.2.10%20-%20WHATSAPP%20FLUTUANTE%20E%20BOTA%CC%83O%20DE%20VOLTAR%20AO%20TOPO.png?alt=media\&token=60fd9aeb-054c-46f4-874f-fea5850703d3) > Agora chegou o momento de configurar o **Ícone do WhatsApp Flutuante**. Para isso, basta seguir os passos abaixo: > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no item **Ícone do Whatsapp Flutuante** do Menu lateral; > 3. Para ativar (ou desativar) essa funcionalidade clique em **Ativar o Botão Voltar ao Topo**; > 4. Escolha entre o posicionamento **Horizontal** e **Vertical;** > 5. Na sequência clique em **salvar**.
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZosaciVq512gCGcSoM%2F-MZotNo2usSjA_4Rep6v%2Fimage.png?alt=media\&token=76c1fbde-2a6f-4897-a0e9-87c628d434b4) # 3.2. Edição das Cores Essa região do painel de edições é uma das mais importantes, já que é a partir daqui que você consegue controlar as cores de grande das regiões de seu tema, como por exemplo: fundo da loja, cores de botões, menu, textos, entre outras. Dessa forma, você pode deixar o layout de seu tema de acordo com sua identidade visual e em alinhamento com a imagem da sua marca. O painel de cores é composto pelo título principal (exemplo: Cabeçalho), nome principal da região de edição (exemplo: Pré-Cabeçalho) e depois pelo local especificado dessa região (exemplo: cor de fundo, cor dos textos). Na caixinha ao lado do local especificado dessa região, você pode colocar as cores no formato hexadecimal (mais comum utilizado na internet) ou também pode clicar na caixinha de cor para que o seletor abra e você encontre a cor que deseja. Quando a cor dentro da caixinha for selecionada, o número hexadecimal dela se preencherá automaticamente ao lado. > Para editar as cores do seu site, siga os passos abaixo. Atenção: ele servirá para TODAS as regiões de edição de cor. > 1. Com o **Painel de Edição do seu Tema** aberto; > 2. Clique no título principal (exemplo: Cabeçalho); > 3. Verifique o nome principal da região de edição, para saber a região de cor que está editando. (exemplo: Pré-cabeçalho); > 4. Vá até o local especificado dessa região (exemplo: Cor de fundo, cor dos textos); > 5. Clique na caixinha de cor e selecione a cor que deseja, ou coloque o código hexadecimal da cor desejada na caixinha ao lado.
{% hint style="danger" %} Caso você tenha a intenção de mudar as cores do seu tema no futuro, aconselhamos que você faça uma nova cópia para testar as novas cores que deseja. Assim, você pode experimentar a vontade, sem problemas e sem perder as configurações já feitas inicialmente. Assim você pode voltar a qualquer momento para as cores iniciais se necessário, sem dor de cabeça. {% endhint %} Agora que você já conhee os passos para configurar as cores de sua loja, a seguir, explicaremos exatamente onde você estará editando a partir do título, do nome principal da região de edição e do local especificado nessa região. # 3.2.1 - Cabeçalho O **Cabeçalho** é dividido em **2 seções: Pré Cabeçalho e Cabeçalho** e cada uma dessas seções é **composta por alguns elementos**.O Cabeçalho engloba as regiões onde estão a logo e tarja superior onde está a região para login e os ícones das Mídias Sociais. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZotbjFsj3bPM_9hApO%2F-MZotzEgXte1u04E692D%2Fimage.png?alt=media\&token=f68ea8e4-6a55-4799-8c8d-83d0e76d50b8) {% tabs %} {% tab title="Pré-cabeçalho" %} **Cor de fundo** - cor do background da tarja que fica antes do cabeçalho, onde tem os ícones de login | cadastre-se, lista de desejos, minha conta, rastreio rápido e também os de mídias sociais. **Cor dos textos** - cor do textos que estão na região do pré-cabeçalho. Alterando aqui os textos de login, cadastre-se, até rastreio rápido ficarão na cor selecionada. **Cor dos textos ao passar o mouse** - cor do mouse hover, ou seja, cor que aparece quando você colocr o mouse em cima de um dos textos da região. **Cor dos ícones links** - cor dos ícones que ficam ao lado de login | cadastre-se, lista da desejos, minha conta e rastreio rápido. **Cor dos ícones redes** - cor dos ícones das redes sociais que aparecem no pré-cabeçalho. **Cor dos ícones redes ao passar o mouse** - cor do mouse hover, ou seja, cor que aparece quando você coloca o mouse em cima de um dos ícones de redes sociais. {% endtab %} {% tab title="Cabeçalho" %} **Cor de fundo** - cor do background apenas do cabeçalho. Alterando aqui, toda região de cima onde está a logo, a caixa de busca e o carrinho ficarão da cor selecionada. {% endtab %} {% tab title="Busca" %} **Cor de fundo** - cor do background do campo de busca. Alterando aqui, a parte onde você digita o texto para buscar, ficará na cor selecionada. **Cor da borda** - cor da borda que circula o campo de busca. **Cor do texto** - cor do texto que aparece quando você digita o que deseja buscar no campo de busca. **Cor do botão** - cor do botão onde aparece a lupa, que fica do lado direito do local onde você digita o texto para buscar. **Cor do ícone** - cor da lupa que aparece no botão, do lado direito do local onde você digita o texto para buscar. . {% endtab %} {% tab title="Sugestão de Busca" %} **Cor do fundo** - quando você digita uma palavra no campo busca, aparece abaixo uma caixa com a sugestão do que você pode buscar. Alterando a cor aqui, o background dessa caixa que aparece fica na cor selecionada. **Cor do texto** - texto da busca que o usuário digita. **Cor do fundo “Você quis dizer”** - cor do background da região que aparece o “Você quis dizer”. **Cor do texto “Você quis dizer”** - cor do texto “você quis dizer” e também da sugestão de busca que aparece abaixo dele. {% endtab %} {% tab title="Carrinho" %} **Cor do título** - cor das palavras “meu carrinho” que aparecem no cabeçalho. **Cor do texto** - cor do valor que aparece abaixo de “meu carrinho”. **Cor do ícone** - cor do ícone de carrinho de compras que aparece ao lado de “meu carrinho”. **Cor da quantidade** - cor do background da bolinha que aparece acima do carrinho de compras. **Cor do texto quantidade** - cor do número que aparece dentro da bolinha de quantidade. {% endtab %} {% endtabs %} # 3.2.2 - Menu O **Menu** engloba a região onde aparecem as categorias e também as subcategorias. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZotbjFsj3bPM_9hApO%2F-MZov09tjef0c4QFrngP%2Fimage.png?alt=media\&token=79362556-6a31-4ab0-b62b-b252ba80d6a7) {% tabs %} {% tab title="Menu" %} **Fundo 1a Nível** - cor do background onde aparecem as categorias. **Fundo 2a Nível** - cor do background onde aparecem as subcategorias, ou seja, o fundo do dropdown menu que aparece ao se colocar o mouse por cima de uma categoria, quando houver uma subcategoria. **Fundo 3a Nível** - cor do background onde aparecem a subcategorias que estão ligadas a subcategorias, e não à categoria principal, ou seja, o terceiro nível do dropdown menu. **Categorias de 1a Nível** - cor do texto que aparece nas categorias principais do menu. **Categorias de 2a Nível** - cor do texto que aparece nas subcategorias de segundo nível do menu. **Categorias de 3a Nível** - cor do texto que aparece nas subcategorias de terceiro nível do menu. **Setas de categorias** - cor da seta que aparece ao lado da categoria principal ou subcategoria, quando tem uma subcategoria ligada a ela. **Categoria ao passar o mouse** - cor do mouse hover das categorias, ou seja, a cor que aparece ao passarmos o mouse pelos nomes das categorias e subcategorias nos 3 níveis. **Borda das subcategorias** - cor da borda que aparece ligando a subcategoria a sua categoria principal. {% endtab %} {% endtabs %} # 3.2.3 - Régua de Informações A **Régua de Informações** é a conhecida tarja de vantagens que fica logo abaixo do banner principal, onde você pode incluir 3 mini banners de vantagens que sua loja oferece, ou a informação que você preferir. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MZotbjFsj3bPM_9hApO%2F-MZov4qRirqBWuG5MCyQ%2Fimage.png?alt=media\&token=cb980345-75d0-43a7-84fc-ea281721319f) {% tabs %} {% tab title="Régua de Informações" %} **Título** - cor do texto. Você escreve o que deseja na aba Régua de Informações e aqui você seleciona a cor da fonte. {% endtab %} {% endtabs %} # 3.2.4 - Vitrines de Produtos As **Vitrines de Produtos**, são as regiões na loja onde você pode expor seus produtos com destaque. Aqui você configura as cores que estarão presentes quando e se as vitrines forem ativadas. {% tabs %} {% tab title="Vitrines de Produtos" %} **Título** - cor do título das vitrines. Palavra que aparece acima de cada uma delas com uma linha abaixo. **Borda do Título** - cor da linha que aparece abaixo do título da vitrine. **Seta do Carrossel** - quando a vitrine for utilizada no modo carrossel, uma seta aparece para que você possa passar os produtos tanto para a direita quando para a esquerda. Aqui você consegue alterar a cor dessas duas setas. **Cor de Fundo 1a Vitrine** - assim como você consegue trocar o background do cabeçalho como um todo, o mesmo acontece com a vitrine. Aqui você altera a cor do background da vitrine 1. **Cor de Fundo 2a Vitrine** - aqui você altera a cor do background da vitrine 2. **Cor de Fundo 3a Vitrine** - aqui você altera a cor do background da vitrine 3. {% endtab %} {% tab title="Produtos na Vitrine de Produtos" %} **Nome** - cor do nome do produto que aparece na vitrine e também na página de categoria. **Preço atual** - cor do preço que está ativo no produto. Por exemplo, quando você coloca um produto em promoção, o preço da promoção é o atual, então ele vai aparecer nesta cor selecionada. Caso não tenha promoção, o preço atual é o normal. **Preço anterior** - cor do preço antigo que aparece riscado quando um produto está em promoção. **Preço parcelado** - cor do preço parcelado e do texto que aparece abaixo do preço anterior e atual. Exemplo: em até 12 vezes sem juros. **Botão adicionar ao carrinho** - cor do texto que está dentro do box que aparece quando você coloca o mouse em cima do produto para que seu cliente adicione o produto ao carrinho com um clique. **Fundo do botão “adicionar ao carrinho”** - cor do background do box citado acima. **Borda da imagem do produto** - cor da borda que envolve a foto do produto, caso deseje destacá-lo. {% endtab %} {% endtabs %} # 3.2.5 - Carrossel de Marcas O **Carrossel de Marcas** está na home e nele você encontra as marcas parceiras ou qualquer outra informação que você quera dar destaque. {% tabs %} {% tab title="Carrossel de Marcas" %} **Cor do título** - cor do título que aparece acima do carrossel de marcas, com uma linha embaixo. **Borda do título** - cor da linha que aparece abaixo do título. **Cor de fundo** - cor do background da região onde está o carrossel de marcas. As imagens cadastradas nessa seção aparecerão em cima dessa cor. Caso você deseje colocar alguma cor nesse campo, o ideal é que todas as marcas tenham a imagem em png com fundo transparente. **Cor das setas** - cor das setas que aparecem no carrossel de marcas possibilitando passar para a direita e para a esquerda. {% endtab %} {% endtabs %} # 3.2.6 - Rodapé O **Rodapé** é a região no fim da loja, onde estão sua logo inferior, suas páginas institucionais, os selos de segurança, as bandeiras de pagamento, os dados do copyright, etc. Ele é cortado pela faixa de newsletter. {% tabs %} {% tab title="Rodapé" %} **Cor do Fundo** - cor do background do rodapé. Esse background vai do início do rodapé até onde estão os textos de copyright, sendo cortado pela faixa da newsletter. **Cor de Título** - cor dos títulos que aparecem no rodapé. Por exemplo: título das páginas institucionais como Institucional, Ajuda, Suporte, e dos títulos das bandeiras de pagamento e selos de segurança. **Cor de links** - cor dos nomes que aparecem abaixo dos títulos das páginas institucionais. Ou seja, cor dos nomes dessas páginas e também dos dados de contato logo abaixo da logo de rodapé. **Cor de links ao passar mouse** - cor do mouse hover dos nomes de páginas institucionais, ou seja, cor que aparece ao passarmos o mouse pelo nome dessas páginas. **Cor da frase abaixo da logo** - abaixo da logo você pode inserir uma frase. Aqui você define a cor da fonte dessa frase. **Cor do texto dos direitos autorais** - cor do texto do copyright que aparece no fim da página. **Cor dos ícones** - cor dos ícones que aparecem ao lado das informações de contato que estão abaixo da logo do rodapé. {% endtab %} {% tab title="Newsletter" %} **>> Faixa de newsletter que corta o rodapé da página** **Cor de Fundo** - cor do background da faixa de newsletter logo após o rodapé. **Cor de título** - cor do título “assine nossa newsletter” que fica nesta faixa. **Cor de sub-título** - cor do subtítulo “e fique por dentro das novidades” que fica abaixo do título principal nesta faixa.
**>> Formulário** **Cor de Fundo** - cor do background da caixa onde o cliente vai escrever o e-mail para se cadastrar na newsletter. **Cor do texto** - cor do texto que é digitado na caixa citada acima. **Cor do botão** - cor do background do botão “assinar” que fica ao lado da caixa de texto. **Cor do texto botão** - cor do texto “assinar” que aparece dentro do botão citado acima.
**>> Ícones das Redes Sociais** **Cor dos ícones** - cor dos ícones das redes sociais que aparecem na faixa de newsletter. **Cor dos ícones ao passar o mouse** - cor do mouse hover dos ícones da redes sociais, ou seja, cor que aparece ao passarmos o mouse sobre esses ícones. {% endtab %} {% endtabs %} # 3.2.7 - Breadcrumb O **Breadcrumb** é o local onde você consegue ver o caminho percorrido pelas páginas da loja. Ele aparece em algumas páginas, como categorias, institucionais e contato. Através dele, seus clientes conseguirão se orientar melhor, caso queiram voltar para uma seção anterior, mais abrangente. {% tabs %} {% tab title="Breadcrumb" %} **Itens** - cor do texto com o nome da página que você estava anteriormente. **Item atual** - cor do texto com o nome da página que você está no momento. **Separador do item** - cor do símbolo de “**>**” que separa e mostra o caminho que foi percorrido entre as páginas. {% endtab %} {% endtabs %} # 3.2.8 - Popups Os **Popups** de **Entrada** e o de **Saída** aparecem ao abrir o site e ao levar o mouse até o botão de fechamento, respectivamente. As orientações abaixo servem para ambos os popups de entrada e de saída. {% tabs %} {% tab title="Popup de Entrada e de Saída" %} **Fundo** - cor do background dos popups. Caso esteja utilizando uma imagem nele, essa cor fica invisível. **Fundo do conteúdo** - cor do background da caixa de informação dos pop ups. A cor selecionada aqui vai aparecer ao redor das chamadas textuais cadastradas. **Título** - cor do título principal dos pop ups. **Subtítulo** - cor do subtítulo que fica logo abaixo do título principal. **Botão cadastrar** - cor do background do botão onde está escrito cadastrar. **Texto do Botão cadastrar** - cor da palavra cadastrar. **Texto de observação** - cor do texto que aparece no fim dos popups. Geralmente é uma informação do tipo “não divulgamos seus dados”, como está em nosso exemplo. **Botão fechar** - cor do background do botão fechar, que é a bolinha que fica no canto superior direito do quadrado dos popups. **Ícone do botão fechar** - cor do X que aparece dentro do botão fechar. {% endtab %} {% endtabs %} # 3.2.9 - Botão Voltar ao Topo O **Botão Voltar ao Topo** estará sempre acompanhando quem navega no seu e-commerce, no canto inferior direito da tela. Clicando nele, é possível voltar ao topo do site instantaneamente. {% tabs %} {% tab title="Botão Voltar ao Topo" %} **Cor de Fundo** - cor do background do botão, preenchendo a bolinha toda. **Cor do ícone** - cor do ícone de seta para cima que está dentro do botão. {% endtab %} {% endtabs %} # 3.2.10 - Páginas Aqui na seção **Páginas**, você verá onde alterar as cores de todas as seções relacionadas abaixo, sem depender de um desenvolvedor para isso. * Página de Produto * Página de Produto Indisponível * Modal do Meu Carrinho * Catálogo / Pagina de Categorias * Filtros Inteligentes * Página de Busca sem Resultado * Página de Login * Página de Cadastro de Cliente * Página de Contato {% tabs %} {% tab title="Produto" %} A **Página de Produto**, contem todas as informações do produto que está sendo vendido! **Nome do produto** - cor do nome do produto, que aparece no início das informações, no canto superior direito. **Informações técnicas** - cor das informações técnicas que podem ser cadastradas no admin, como por exemplo: marca e/ou modelos do produto. **Preço anterior** - cor do preço que o produto estava antes do preço atual, ou seja, antes de entrar em promoção. Esse preço anterior aparecerá somente caso você coloque o produto com o preço em promoção. **Preço atual** - cor do preço que o produto possui atualmente. **Texto “a partir de”** - cor da palavra “por” que aparece antes do preço atual do produto. Por exemplo, quando um produto está em promoção, temos a informação “DE: R$ xxx POR: R$ xxx”. **Texto economize** - cor da palavra “economize” e também do valor que vem depois dela. Isso irá aparecer quando o produto estiver em promoção, como o valor que o cliente irá economizar. **Formas de pagamento** - cor que aparece abaixo do preço atual, ou do economize, caso seja uma promoção. Ele indica as formas que o produto pode ser pago, por exemplo: em até 12 vezes com juros de R$xxx. **Descrição simplificada** - cor da mensagem adicional sobre o produto que pode ser cadastrada em “mensagem adicional” dentro da página de cadastro do produto. **Título da variação** - cor do título que aparece acima das variações do seu produto. Como por exemplo: COR, TAMANHOS. **Título do frete** - cor do título do local onde é calculado o frete. Esse título no template é “frete e prazo”. **Borda do frete** - cor da borda que envolve a caixinha onde o cliente poderá escrever o CEP para cálculo do frete. **Botão do frete** - cor do background do botão que aparece para clicar e calcular o frete, esse botão fica ao lado da caixinha citada acima e abaixo de “frete e prazo”. **Texto do botão frete** - cor do texto que fica dentro do botão citado acima. **Links extras** - cor dos links “indique um amigo” e “tire suas dúvidas” que ficam logo abaixo de onde é calculado o frete. **Links extras hover** - cor do mouse hover dos links extras, ou seja, cor que aparece quando passamos o mouse sobre “indique um amigo” e/ou “tira suas dúvidas”. **Fundo quantidade** - cor de background do botão de quantidade do produto, que fica logo acima do botão “comprar”. **Texto quantidade** - cor dos números e do sinal de “+” e “-” que aparecem dentro do botão de quantidade. **Favoritar** - cor do texto e do ícone da lista de desejos que fica ao lado do botão de quantidade e acima do botão “comprar”. **Botão comprar** - cor do background do botão “comprar”. **Texto botão comprar** - cor da palavra comprar que aparece dentro do botão acima. **Título aba** - cor do título das abas de informação que ficam logo abaixo da imagem do produto e das informações de preço e frete, como por exemplo: descrição geral, itens inclusos, garantia, comentários. **Título aba ativa** - cor que o título da aba que estiver selecionada ficará, enquanto os demais se manterão da cor citada no ponto acima. **Borda abas** - cor da borda que envolve o retângulo da área onde estão as abas citadas acima. **Título de “comentários” e “aproveite também”** - cor dos títulos das partes de comentários, da fileira de produtos do aproveite também e da fileira de produtos visitados. Eles estão logo abaixo das abas de informações na página de produto. **Títulos “comentários” 2** - cor da linha que fica abaixo dos títulos “comentários” e “páginas visitadas”. **Botão “comentários**” - cor do background do botão que aparece abaixo do título “comentários”, onde o cliente clica para deixar seu comentário sobre o produto. **Botão “comentários” texto** - cor do texto que aparece dentro do botão acima. **Mensagem do comentário** - cor da mensagem que aparece abaixo do botão para deixar comentário, “avalie e veja as avaliações desse produto”. **Nome do avaliador em comentários** - cor do nome que a pessoa que avaliar deixar no comentário. **Comentário** - cor do texto do comentário deixado pela pessoa que avaliou. **Email em comentário** - cor do texto do e-mail que a pessoa deixou no comentário. **Paginação de produtos visitados** - cor do número da página que aparece abaixo da fileira de produtos visitados. {% endtab %} {% tab title="Produto Indisponível" %} Quando o **Produto está Indisponível**, aparece uma região nova para que o cliente possa digitar o e-mail e receber uma mensagem quando ele estiver disponível novamente. **Borda esquerda** - cor da linha que aparece ao lado da informação de “sem estoque”. **Título “não disponível”** - cor do texto “sem estoque”, que aparecerá quando o estoque do produto zerar. **Texto “deixe seu e-mail”** - cor do texto “avise-me quando estiver disponível”. **Texto input** - **Borda input** - **Botão enviar** - cor do background do botão “enviar”. **Texto botão enviar** - cor da palavra ënviar" que aparece dentro do botão acima. {% endtab %} {% tab title="Meu Carrinho" %} **Modal do Meu Carrinho**, é a janela que abre ao clicar “comprar”, digamos que é o “pré-carrinho”. **Botão continuar compra** - cor do background do botão de continuar comprando que aparece no pré-carrinho. **Texto do botão continuar comprando** - cor das palavras "continuar comprando que aparece dentro do botão acima **Botão avançar** - cor do background do botão avançar para check-out. **Texto botão avançar** - cor da palavra "checkout" que aparece dentro do botão acima {% endtab %} {% tab title="Catálogo" %} O **Catálogo** e a **Página de Categoria** são a mesma coisa, ou seja, a página onde você cadastra seus produtos. São as páginas que aparecem no menu principal. **Título da categoria** - cor do nome que aparece logo no início da página. Esse nome é o nome que foi cadastrado para cada categoria. **Textos da ordenação** - logo abaixo do nome, tem caixinhas de ordenação, onde é possível organizar os produtos por nome, mais vendidos, menor preço, entre outros. Aqui você altera a cor dos textos desse local. **Borda da ordenação** - cor da borda que envolve as caixinhas de ordenação citadas acima. **Texto comparar produto** - **Borda comparar produto** - **Número paginação** - cor do número que aparece na caixinha de numeração da página no fim da página de categoria. Quando você ultrapassa certo número de produtos, é criada uma outra página para eles. A numeração dessas páginas fica no fim dos produtos que aparecem na categoria. **Número de paginação selecionado** - cor que o número da pagina fica ao ser selecionado. **Borda paginação** - cor que envolve a caixinha do número de paginação. **Borda paginação selecionado** - cor que envolve a caixinha do número de paginação que está selecionado no momento. **Fundo paginação selecionado** - cor do background da caixinha de número selecionada na paginação. {% endtab %} {% tab title="Filtros" %} **Filtros Inteligentes** são os filtros que ficam ma parte superior esquerda, ao lado dos produtos na página de categoria. **Título seção filtro inteligente** - cor do background da caixinha que contém o nome do filtro em questão, por exemplo: caixinha que está filtro de “categorias” ou “preço”. **Texto do título seção filtro inteligente** - cor do texto que está dentro da caixinha de seção do filtro. **Fundo dos itens da seção filtro inteligente** - cor do background onde estão as opções de filtro a serem marcadas. **Texto dos itens da seção filtro inteligente** - cor do texto dos filtros possíveis de serem selecionados dentro da seção de filtros. **Botão filtro inteligente** - cor do background do botão “filtrar” que fica no fim dos filtros inteligente, onde é necessário clicar para ativar os filtros. **Texto do botão filtro inteligente** - cor da palavra "filtrar", dentro do botão acima. **Borda botão filtro inteligente** - cor que envolve a caixinha do botão "filtrar. {% endtab %} {% tab title="Busca sem Resultado" %} Essa página aparece quando o item pesquisado no campo de busca não for encontrado na loja. **Título** - cor do título “busca avançada” que aparece na página quando o item não é encontrado na busca. **Borda do título** - cor da linha que aparece abaixo do texto “busca avançada”. **Borda do formulário** - cor da linha que fica envolta do formulário de busca avançada. **Título dos campos do formulário** - cor dos textos de título que aparecem no formulário, como por exemplo: "palavra-chave" e "faixa de preço. **Texto dos campos do formulário** - cor das informações que aparecem abaixo dos títulos, como por exemplo: de R$XXX até R$XXX, promoção, destaques, lançamento. **Botão enviar** - cor do background do botão “enviar” do formulário de busca avançada. **Texto do botão enviar** - cor da palavra "enviar" que aparece dentro do botão acima. **Borda do botão enviar** - cor da borda que envolve o botão enviar.
{% endtab %} {% tab title="Login" %} Essa página aparece ao clicar em “login | cadastre-se” no topo da loja. É a página para que o cliente se logue ou se cadastre em seu e-commerce. **Título** - cor do título “identificação” que fica no início da página. **Borda do título** - cor da linha que fica abaixo do título “identificação”. **Texto “já sou cadastrado”** - cor do texto “já sou cadastrado”, que fica do lado esquerdo da página, no local onde quem já tem cadastro clica para se logar. **Texto “criar uma nova conta”** - cor do texto “criar uma nova conta”, que fica do lado direito da página, no local onde quem não é cadastrado ainda deve colocar o e-mail para iniciar o cadastro. **Borda dos formulários** - cor da borda que fica ao redor dos campos “já sou cadastrado" e “criar uma nova conta”. **Título dos campos do formulário** - cor dos textos que ficam abaixo dos títulos “já sou cadastrado” e “criar uma nova conta”. Esses textos são: informe seu e-mail e CPF (...) e endereço de e-mail. **Botão de login** - cor do background do botão “login” que fica um pouco abaixo de “já sou cadastrado”. **Texto do botão login** - cor da palavra "login que aparece dentro do botão acima. **Botão cadastre-se** - cor do background do botão “cadastre-se” que fica um pouco abaixo de “criar uma nova conta”. **Texto botão cadastre-se** - cor do texto “cadastre-se” que aparece dentro do botão acima.
{% endtab %} {% tab title="Cadastro" %} Essa é a página onde seu cliente se cadastra na sua loja. Ele será direcionado para ela ao digitar o e-mail e clicar em “cadastre-se” na página de login. **Título** - cor do título “cadastre-se” que fica no topo da página. **Subtítulo** - cor do subtítulo “basta preencher o formulário” que fica logo abaixo do texto “cadastre-se”. **Título da seção** - cor do texto “dados pessoais” que aparece um pouco abaixo do título principal. **Textos** - cor dos textos da página, onde estão escritos os dados que o cliente precisará preencher, por exemplo: nome completo, data de nascimento, CPF, etc.
{% endtab %} {% tab title="Contato" %} Esta é a **Página de Contato** da sua loja online, onde o cliente pode digitar seu dados e enviar mensagens para você, como feedbacks ou dúvidas. Em nosso template, essa página de contato está com nome de Fale Conosco. \ **Título “entre em contato”** - cor do texto “entre em contato” que fica no título principal da página. **Título “deixe sua mensagem”** - cor do texto “deixe sua mensagem” que fica no título principal da página. **Fundo do botão enviar** - cor do background do botão “enviar” que fica logo abaixo da caixa onde o cliente pode digitar sua mensagem. **Texto botão enviar** - cor da palavra "enviar” que fica dentro do botão acima. **Fundo do botão enviar ao passar o mouse** - cor do mouse hover do botão “enviar”, ou seja, cor que o botão fica ao passarmos o mouse por cima dele. **Texto do botão enviar ao passar o mouse** - cor do mouse houver do texto “enviar”, ou seja, cor que a palavra “enviar” fica quando o mouse está em cima do botão. **Título “informações”** - cor do texto “informações” que fica na caixa ao lado do formulário para envio de mensagem. **Título “contato”** - cor da palavra “contato” que fica na caixa ao lado do formulário para envio de mensagem. **Textos do bloco de informações** - cor dos textos que ficam no bloco de informações, logo abaixo dos títulos “informações” e “contato”. **Fundo do bloco de informações** - cor do background da caixa de informações. **Ícones** - cor dos ícones que aparecem dentro do bloco de informações, o de telefone, de carta e de internet. **Fundo dos ícones** - cor do background do quadrado onde ficam os ícones citados acima. {% endtab %} {% endtabs %} # 04. Configurações específicas do seu tema Nosso template possui configurações especiais e funcionalidades únicas, por isso, foi necessário explicar ponto a ponto nossas possibilidades dentro do "**Editar Tema**”. Contudo, existem configurações do tema que você realizará fora da área "**Editar Tema**”, como por exemplo: configurar seu BLOG, suas páginas institucionais e seus banners. A seguir, vamos explicar como realizar as configurações desses pontos. A Tray possui também configurações diretas na plataforma que você também precisará aprender, para que possa tornar sua loja 100% funcional. Por exemplo, é importante entender o cadastro de categorias e produtos para que eles estejam bem definidos e ajude seus clientes a encontrar o que eles desejam. A Tray possui uma página com tutoriais sobre toda a plataforma que você pode consultar [**aqui**](https://basedeconhecimento.tray.com.br/hc/pt-br). Além disso também é possível entrar em contato com eles e tirar dúvidas específicas através da Central de Atendimento, [**clicando aqui**](https://www.tray.com.br/canais-de-atendimento/). Mas a Fábrika também procurará sempre ajudá-los para acelerar o processo de lançamento de sua loja, por isso, listaremos a seguir alguns pontos básicos de sua loja que é muito importante você saber. # 4.2 - Páginas Institucionais Toda loja online conta com páginas institucionais que explicam melhor os valores, politicas de troca e privacidade e demais informações da empresa. São páginas com conteúdo fixo, que se diferenciam das páginas de produtos ou categorias, pois nelas não são encontrados produtos, e sim as informações que o lojista deseja passar sobre a marca para o cliente. Elas geralmente ficam no rodapé da loja, listada abaixo do título decidido, como explicamos no ponto ***3.1.6 - Rodapé***, mas lembramos que em nosso tema, também é possível colocá-las no topo, junto das categorias, como também explicamos no ponto ***3.1.2 - Menu***. Vamos falar agora sobre **Criação e Edição** e depois sobre **Formatação de Conteúdo**. Como exemplo, citamos as páginas **Políticas de Privacidade** e **Quem Somos**, anteriormente. Lembrando sempre que a criatividade não tem limite. A Página **Políticas de Privacidade** abaixo mostra a possibilidade de inserção de banners e conteúdo personalizado conforme a sua necessidade. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2F9PnTUQRyP2s4oqN2qflQ%2Fimage.png?alt=media\&token=162a5835-6fcd-4f14-bbd5-ef7ff7ec80b3) A Página **Quem Somos** abaixo mostra a possibilidade de trabalhar com foco no conteúdo personalizado conforme a sua necessidade. ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FFs2jYmEZJphnijG9SHBr%2Fimage.png?alt=media\&token=c63396f5-26b4-4323-93c2-9bfdde7fc7a1) {% tabs %} {% tab title="Criação / Edição" %} > Para criá-las ou cadastrá-las, você deve ir em ***`Minha Loja / Páginas da Loja`*** . Lá você consegue criar essas páginas, excluí-las e também alterar o conteúdo das mesmas. > > Agora que você já entendeu melhor sobre essas páginas institucionais, explicaremos em detalhe como criá-las/alterá-las no passo a passo abaixo: > > 1. Com o **Painel Administrativo do seu E-commerce** aberto, clique na aba **Minha Loja** e em seguida em **Páginas da Loja**. > 2. Será possível observar as páginas já cadastradas. Sendo que você poderá editá-las, ou criar uma nova. > 3. Para editar uma que já existe, clique no ícone azul na fileira ações. > 4. Para criar uma nova, clique no botão verde no início da página, “incluir página”. > 5. Dentro da página de edição da loja, você terá alguns pontos a serem preenchidos. Preencha-os e clique em salvar. > > **OBS:** Aconselhamos usar imagens com o tamanho de 1200px x 500px
![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2Fh8kpxv1jnb5v55Owm9vL%2Fimage.png?alt=media\&token=9024b9ee-cf2b-4a4b-b353-0ac5834a013b) {% hint style="warning" %} Pontos a serem preenchidos no cadastro: * Ativa: aqui você marca sim ou não, para manter a página ativa ou não na loja. * Nome da página: coloque aqui o nome que representa a página. * URL da página: a URL que colocar aqui, será utilizada para conectar a página na loja, como explicamos no ponto ***3.1.6 - Rodapé***. Ela será a URL encurtada da página institucional em questão. * Título da página: aqui você coloca o nome que aparecerá no título da página. * Conteúdo: coloque aqui o conteúdo escrito da página institucional. **Obs:** Nosso template possui uma pré-formatação para esse conteúdo, que explicaremos no próximo ponto, 4.3. Mas caso não deseje utilizá-lo, você poderá fazer alterações como cores, tamanho de fontes entre outras opções.
{% endhint %} {% endtab %} {% tab title="Formatação de Conteúdo" %} A formatação de nossas páginas institucionais está pré-estabelecida, como pode ver na página-exemplo QUEM SOMOS: ![](https://lh6.googleusercontent.com/dbl0GfNbeviFcQKbQ77q0n_KGvVDhC_RK19VCbXQlOEs-J3mzBLkM9wWzPBX2t6wGevQ5-i1NjBwiooyJxF8cwIEG6uYT6qFgvbKL1OW96K0SOpHrizsaNIR4mQwC8deSrw8ZjNy) Para que seu texto receba a formatação como da página acima, você precisará colocar seu conteúdo em um arquivo .txt. Depois diso, copie o conteúdo do arquivo sem formatação e cole no espaço para texto dentro da edição das páginas institucionais. Caso você prefira copiar e colar seu conteúdo diretamente de um arquivo Word (e não de um txt, como explicado acima) a formatação do Word virá junto. Observe as referências visuais do processo a seguir: 1\. Cole o conteúdo no bloco de notas ou escreva-o lá mesmo. Depois copie esse conteúdo. ![](https://lh3.googleusercontent.com/dTFre8oub9S6_hpQIL4Ow3c6RLms2mmSD0hwWp3PyevAwgWLVCNdXTbA7Q89MauHg4K5AKXSLIzITwGEj5SmPS7kq8ZiU9fzOWQj4tcxoYpPXtzeA_TCh4cSImRDXlwsfpiLtk0n) 2\. Cole o conteúdo no local de edição do texto das páginas institucionais, seguindo os passos: `MINHA LOJA > PÁGINAS DA LOJA > BOTÃO DE EDIÇÃO DE UMA PÁGINA EXISTE e/ou CRIAR NOVA PÁGINA` ![](https://lh4.googleusercontent.com/8xunRKuBiJMkce0NOQCDhdxl2bUl2_7r2oCxq0_zCZsYAbmHiE7DiJghlLFYzeTe3Iu-40DxviAHdXgDu0KnK5ybMQuP7yJnNuNjACEGnA4QizP4IlRd8jp8dgBZHE8Cng6RGVgc) 3\. Conteúdo formatado na sua loja online com fonte e espaçamentos corretos: ![](https://lh3.googleusercontent.com/P1N2tLUQptMitX104cm7m-JDCAteg8Jqn5nv1Iw3K68PiahO6EFt2yN6u_wP4Yf7upL8Pbaj7-81pgRz_uscvvAnTB_s0QSzBOmzIkzbG_15IjjzLEajpqD-tAWwJdnxyz_fv7Ae) Pronto! Agora você terá a página com nossa pré-formatação. Você só precisa ajustar tamanhos de texto e colocar negrito, se necessário. É importante dizer que caso você deseje colocar o texto de seu jeito, basta utilizar as opções de edição do próprio tema e customizá-lo. Para entender melhor sobre os locais de edição das páginas institucionais, acesse o artigo explicativo da Tray:
{% endtab %} {% endtabs %} # 4.4 - Categorias e Subcategorias A Tray é uma plataforma que conta com funcionalidades variadas comuns a todas as lojas, independente do tema, como explicamos anteriormente. Aqui vamos falar sobre as Categorias e as Subcategorias e o uso de Banners para elas. **Veja abaixo como ficam os banners no topo, conteúdo e rodapé das categorias. Mas antes as Categorias precisam estar bem definidas e cadastradas da forma correta. Acompanhe o tutorial até o final e veja tudo isso com detalhes.** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FxCidVBvhPfbzkrVqaGlk%2Fimage.png?alt=media\&token=a6bdf33f-4b98-4180-8af1-13681234fba0) As Categorias são páginas importantes de sua loja que abrigam seus produtos ou serviços, ou seja, são as páginas que organizam seu site. Exemplo: uma loja de roupas, geralmente tem as categorias BLUSAS, CALÇAS, VESTIDOS, SHORTS, etc. Nessas categorias os produtos são divididos de forma que tudo fique mais organizado para o cliente. Já as Subcategorias, são páginas que subdividem uma categoria principal no site. Ou seja, páginas que correspondem a uma modalidade específica de serviços ou produtos. Por exemplo: se temos uma categoria MASCULINO, as subcategorias ligadas a ela poderiam ser BLUSAS, SHORTS, CALÇAS e CUECAS. Agora que você já sabe o que são as categorias e subcategorias, siga o passo a passo abaixo para cadastrar uma categoria. 1. No seu painel administrativo, clique em **Produtos** e depois **Categorias**. Caso não tenha nenhuma cadastrada ainda, aparecerá para você “incluir primeira categoria”. 2. Dentro da página de categorias, clique em “Incluir Categoria”. 3. Preencha todos os campos necessários, após isso, basta salvar e aguardar um pouco para a categoria aparecer em seu menu. 4. Caso deseje inserir uma subcategoria, clique na seta ao lado da categoria já cadastrada, e depois em “Incluir subcategoria”. ![](https://lh5.googleusercontent.com/NLxUQVNzChT3kY33qenqwH747REHP7egGNK2wTlJtt2rXWOzwxYXl7RDiKd9EGxduI3WmoAnf844HX5PtqZYaBU-ikOlTx0OtblLot9LLvfDMIxw1Fh0eIwcuq3PgG4Q42U5wTe3) Observe acima, na coluna Categoria que ao lado do nome de cada uma das categorias tem um número. Esse é o número de categoria que você vai precisar para cadastrar sua vitrine, como também explicamos no ponto ***3.1.4 - Vitrines de Produtos**.* **Imagem do Painel Tray da área de Categorias** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FkSvm0yGDeQsNLlrQuapX%2Fimage.png?alt=media\&token=5fa913ce-19d9-492a-8295-ecf5097c528c) **Dentro de “Incluir Categoria”, você precisará preencher os seguintes campos:** **Categoria Ativa** - Deixar marcado para que a categoria apareça no site. **Selecione o Nível da Categoria** - Aqui você decide se a categoria é principal, ou subcategoria, ou seja, se colocá-la como nível secundário de uma categoria já cadastrada, ela se tornará uma SUBCATEGORIA **Nome** - O nome da categoria que aparecerá no site. **Características** - essa parte é opcional e serve para associar a alguma característica já cadastrada. **SEO** - Serve para auxiliar o rankeamento da sua loja online no Google. É importante preencher o SEO corretamente, por isso sugerimos que você busque alguém com conhecimentos básicos, caso não o tenha. **Descrição da Categoria** - Aqui você escreve um pouco sobre o que é essa categoria, que tipo de produtos estarão disponíveis nela e coloca o **Banner de Conteúdo**. **OBS**: o tamanho de imagem ideal para o **Banner de Conteúdo** da categoria é de 1200x250px. ![Print da Tela de Edição da Página de Categoria no painel da Tray](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU9T8TA4eLNm5lB7ak8%2F-MlLkPh4K-H9C_sbyE5W%2F-MlLkpuii0rFzxX9MGqw%2Fimage.png?alt=media\&token=f9e646ea-ff61-4390-bc61-e8f3c3245545) ![Banners de Topo, Conteúdo e no Rodapé](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2F96bna6xhiDRS6SFhdo4c%2Fimage.png?alt=media\&token=ccc96495-0e65-41c7-aeec-20623cb5fa08) > Certamente você já inseriu os Banners tradicionais da home de sua loja e agora chegou o momento dos Banners das Categorias. > > Para alterá-los, você precisa ir em ***`MARKETING > BANNERS`*** e seguir o passo a passo abaixo: > 1. Com o **Painel Administrativo do seu E-commerce** aberto, clique na aba **Marketing** e em seguida em **Banners da Loja**. > > 2. Ao ser redirecionado para página de banners, você encontrará o nome de cada um dos banners do template. Basta clicar no ícone de edição que fica na fileira ações do banner que deseja alterar. > > 3. Dentro da página de edição, procure “escolher arquivo”, logo acima da foto cadastrada e escolha a nova imagem. > > 4. Após isso, clique em salvar. > > **OBS**: o tamanho de imagem ideal para o **Banner de Topo ou Rodapé** da categoria é de 2000x250px (ou altura que desejar). ![Exibição do ADMIN da loja](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FIO8k6BDsJMtatchlksFq%2Fimage.png?alt=media\&token=33e40c21-0da7-4996-9a3a-5be9e38ec83d) ![Editando Banner TOPO](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2F5WaiHOwNGLI7gWqooxEl%2Fimage.png?alt=media\&token=36b3f772-4ecb-483e-b4d6-ffd459bb5278) ![Editando Banner RODAPÉ](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FsXAaYkH136aisrwROOFj%2Fimage.png?alt=media\&token=cfb33342-90d8-4f44-9389-3f93492dccfc) {% hint style="danger" %} Todas as informações referente a inserção de Banners, nós também explicamos no ponto ***4.1 - Banners**.* {% endhint %} {% hint style="danger" %} **ATENÇÃO**, sua categoria só aparecerá no site caso tenha algum produto dentro dela. {% endhint %} Caso queira saber mais sobre CATEGORIAS e SUBCATEGORIAS, acesse o tutorial da Tray: # 4.5 - Listas de Desejo A Tray é uma plataforma que conta com funcionalidades variadas comuns a todas as lojas, independente do tema, como explicamos anteriormente. Aqui vamos falar sobre as **Listas de Desejo**. Muitas Lojas fazem uso das Listas de Desejo, mas de forma simples, agora preparamos um layout personalizado para a sua seção de Listas de Desejo. {% hint style="danger" %} **OBS**: o tamanho das imagens:\ \- Banner Lista - 250x250px\ \- Banner Topo Lista - 1200x250px {% endhint %} **Página Principal das Listas** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FnDfLKsPu7sfYv76fc9En%2Fimage.png?alt=media\&token=164c53f8-47e8-4260-9106-da2578f17979) **Páginas Interna de uma Lista de Desejo** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FmllM3mN6nXQE9RhsfEGp%2Fimage.png?alt=media\&token=7ae06aa8-8123-4a40-aed5-20918e34053d) {% hint style="info" %} Nesse link você encontra todas as informações sobre administração de Listas, acesse o tutorial da Tray: {% endhint %} # 4.6 - Página de Produto Em qualquer loja é preciso dedicar tempo e atenção para fazer o cadastro dos produtos e/ou serviços que serão vedidos. Aqui explicaremos um pouco sobre as opções de cadastro dos produtos em sua loja. Na plataforma você pode cadastrar os produtos, as variações dele, como tamanho e cor, por exemplo, colocar preços em promoção, controlar seu estoque, criar kits e muito mais. É muito importante fazer o cadastro com planejamento e atenção, seguindo o passo a passo abaixo: 1. No seu painel administrativo, vá até **Produtos** e depois **Produtos Cadastrados.** 2. Caso não tenha adicionado nenhum produto, clique para adicionar seu primeiro produto. Caso já tenha, você estará na página de produtos cadastrados e basta clicar em **Cadastrar** **seus Produtos**. 3. Dentro desta página, **preencha** todos os campos que serão detalhados a seguir e **salve**. ![](https://lh4.googleusercontent.com/d3DS2GAIDCLPTPssepUtXF9R6yRywsvf8DJozHJsxIKFOvA_3Ru2NIVAG0HGuNbzEQwUUywnhxgOdY1MgmJcSHIuKigV7xYzC_egs-7uaIxNgmQ4Wr9q7MqGaeg_4qFtmprABmfk) Imagem do painel da Tray para Produtos Cadastrados Os campos que devem ser preenchidos são: APRESENTAÇÃO - aqui você escolhe se o produto estará ATIVO na loja, além de poder selecioná-lo para aparecer neles selos de DESTAQUE e de LANÇAMENTO. Esses selos são necessários para que os produtos apareçam dependendo da configuração de sua vitrine. Rever ponto 3.2.7. NOME e CATEGORIA - na primeira parte você escreve o nome do produto em questão e, logo abaixo, marca as categorias que o mesmo vai aparecer. Você pode marcar a categoria PRINCIPAL e também outras categorias que esse produto se encaixa. DESCRIÇÃO - aqui você coloca a DESCRIÇÃO do produto, que aparecerá na aba abaixo do botão comprar. PREÇO - onde você coloca o preço do produto. Você pode colocar também um preço em promoção e marcar o período de tempo que essa promoção durará. IMAGENS - o template funciona com imagens de produtos em diversos formatos da sua preferência (quadradas ou retangulares), contudo, você precisa escolher um formato para que sua loja fique padronizada, sem desalinhar e sem quebras. Importante não esquecer do limite imposto pela própria plataforma: até 350kb e 2000px, nas extensões JPG, JPEG e PNG.
**OBS.:** Nossas imagens usam o formato retangular no tamanho 1445px x 2000px e sugerimos o formato quadrado no tamanho de 1000px x 1000px. Nunca misture os formatos (retangulares, quadrados e outros) para que seu layout não fique desalinhado ou com quebras. {% hint style="warning" %} Configuração que você precisa fazer em seu painel administrativo da Tray, caso queira ter o mesmo visual de nossas páginas. Segue o **link** com informações da Tray e o **print** igual ao do nosso tema. {% endhint %}
ESTOQUE - onde você marca o estoque geral de seu produto. PESOS E DIMENSÕES - aqui você coloca o peso e a dimensão da EMBALAGEM que vai levar seu produto. É necessário preencher com cuidado, porque isso influenciará diretamente no cálculo de seu frete. INFORMAÇÕES ADICIONAIS - dados do produto que podem ser preenchidas para controle interno. Preenchendo a MENSAGEM ADICIONAL, você pode acrescentar uma descrição menor que fica logo abaixo do preço do produto, com até 500 caracteres. CARACTERÍSTICAS E VARIAÇÕES - esse tópico está detalhado no próximo tópico do manual, item **4.6 - Características e Variações**. Aqui você tem como cadastrar até duas características e suas respectivas variações. Após selecioná-las, você clica em GERAR VARIAÇÕES, e preenche o número de estoque que possui de cada uma delas. Por exemplo, tenho 3 peças da blusa VERMELHA tamanho P. Após preencher todos os campos, clique em SALVAR para que seu produto seja gerado.\ \ Para mais detalhes, como a possibilidade de fazer KITS de produtos e Listas de Desejos, acesse os tutorias de cadastro de produtos na Tray: | | # 4.7 - Características e Variações As características e variações são as opções de escolha que o cliente tem dentro de um produto. Por exemplo, caso ele queira comprar uma camisa, poderá escolher a COR VERMELHA e, dentro da CARACTERÍSTICA TAMANHO, as variações P, M e G. É essencial que no cadastro do produto você coloque a variação existente corretamente. Mas antes, é preciso criar a característica e suas variações. Para isso, você deve ir em PRODUTOS > CARACTERÍSTICAS > GERENCIAR CARACTERÍSTICAS E COR. ![](https://lh3.googleusercontent.com/4Dt3HiLSraVAHVhdN2GFAP6Dsqqvp6xiIuuKN9-lvVfyyrxgwOv4wU-20EsMphYJBILVb1KeUSTs3dXbUGrmVqCO5re5P0p3fFjDL7JPD2-wjcgzmjEbhHgJy381nDeqGqKDu6XR) Imagem do local na Tray de Gerenciamento de Características e Cor Dentro de GERENCIAR CARACTERÍSTICAS E COR, você já tem várias opções de características e suas variações dadas pela Tray. Verifique se as opções que já estão na listagem oferecem o que você precisa. Caso não, basta clicar em INCLUIR CARACTERÍSTICA, colocar o nome da característica e depois preencher o campo INCLUIR OPÇÕES, com as variações dessa característica. Por exemplo: CARACTERÍSTICA - ESTAMPA, VARIAÇÕES: TIGRE, ZEBRA, LISTRADA. Esse campo depende muito do que é oferecido na loja online e fica a cargo do cliente. \ \ Para saber mais, acesse o tutorial da Tray sobre características e variações: # 05. Edição do código fonte do seu tema ATENÇÃO! Antes de realizar qualquer edição no código fonte do seu tema, crie uma cópia de segurança, para que você não perca os códigos HTML e CSS, ou até mesmo para que você consiga voltar o código anterior, se necessário. A Fábrika NÃO SE RESPONSABILIZA por QUAISQUER edições do código fonte de seu tema ou erro que possa vir a partir disso. Isso fica exclusivamente a cargo do cliente. Temos o código original de todos os temas e sabemos quando alguma edição acontece. Orientamos que você realize qualquer edição no código fonte APENAS se tiver conhecimento AVANÇADO em HTML, CSS e JS. E também se, de fato essa edição for necessária, já que nossos temas estão prontos e testados, já preparados para o uso. DITO ISSO, caso ainda assim você sinta necessidade de modificar seu tema um pouco mais a fundo, mostraremos onde você poderá realizar essas modificações. LEMBRANDO, MAIS UMA VEZ, QUE NÃO NOS RESPONSABILIZAMOS POR QUALQUER PROBLEMA CAUSADO EM DECORRÊNCIA DE ALTERAÇÕES NO CODIGO FONTE. Para acessar o código fonte de seu tema, vá em MINHA LOJA > DESIGN DA LOJA. Encontre o tema (de preferência uma cópia, como orientamos anteriormente) e clique em EDITAR HTML. ![](https://lh6.googleusercontent.com/W6hUfcZYyfJyqYaAJi8w2J2FmZMVdURw1c4viKWpsm_MRNo-fmw-v6korl7dcaSa391G7QJMhWHu_KUiDo00kqOqKlqnCITNwXkDgtA8ThzGDk_0a62t0bovrwf0se9-fchHgVGe) Você poderá editar qualquer arquivo no editor de arquivos que aparecer. A Fábrika aconselha a alterar apenas arquivos style.css e style.min.css, que são responsáveis por controlar os estilos do tema. Dentro do editor online, os arquivos CSS mencionados anteriormente, podem ser encontrados dentro da pasta CSS. Clicando em algum arquivo, ele será carregado como na imagem abaixo: ![](https://lh4.googleusercontent.com/_YSGq9IKgCdFxwUvhVZRo2t8tQPZX-9SAWXMghD6J4B-S4u0Fkgk7-9Ctt0FWG92gvXFeC6RMAL9QLkRb5dPHN1IzaK8OSMKLqwX1DIqyOnVE8ZWodyX-G4SCySe5pRZ5I5jmPPT) Você pode realizar as alterações possíveis que desejar, mas para que elas sejam refletidas na loja você precisa atualizar o arquivo css minificado, o style.min.css. Copie o código do arquivo style.css e trabalhe com uma ferramenta de minificação de css. Exemplo: a Minifier. (colocar o link: ) Após o processo de minificação, copie o código (style.min.css) e sobrescreva o conteúdo já presente dentro da loja. Não esqueça de clicar em salvar após o fim do processo. Verifique se tudo está como desejado em VISUALIZAR LOJA. Estando tudo certo, volte a duplicar e publique seu tema para que fique visível para seus clientes. As atualizações podem levar um tempo até serem vistas devido a atualização de cachê. LEMBRAMOS QUE QUAISQUER ERROS VINDOS DESSA EDIÇÃO, NÃO SÃO RESPONSABILIDADE DA FÁBRIKA DE E-COMMERCE E PODERÃO NÃO SOMENTE DANIFICAR O TEMA, COMO TAMBÉM IMPEDIR SEU USO. NESSE CASO NÃO REALIZAMOS QUALQUER AJUSTE. PARA CORRIGIR O PROBLEMA, CASO VOCÊ NÃO TENHA FEITO UMA CÓPIA DO TEMA ORIGINAL, SERÁ NECESSÁRIO QUE VOCÊ COMPRE UM NOVO TEMA. # 06. Sua sugestão é muito importante para nós Antes de mais nada, gostaríamos de agradecer pela leitura até aqui. E vamos lembrar alguns pontos ditos lá no início. Esse manual diz respeito aos temas da linha FLAT, porém as imagens utilizadas são relacionadas ao tema FLAT MODA, o que nada altera em sua experiência. Os temas da linha FLAT que você também pode conhecer são: * [FLAT Moda](https://temas.tray.com.br/tema/flat-moda) - Tema com o visual focado no segmento da Moda e Acessórios * FLAT Decor - Tema com o visual focado no segmento de Casa e Decoração * FLAT Geek - Tema com o visual focado no segmento Geek e Anime * FLAT Cosméticos - Tema com o visual focado no segmento de Cosméticos * FLAT Jóias - Tema com o visual focado no segmento de Jóias e acessórios * FLAT Sapatos - Tema com o visual focado no segmento de Calçados * FLAT Pet - Tema com o visual focado no segmento Pet * FLAT Kids - Tema com o visual focado no segmento Infantil Se deseje colocar em seu e-commerce um dos temas acima da[ Fábrika de E-commerce](https://temas.tray.com.br/parceiro/fabrikadeecommerce), você pode comprá-lo na loja[ clicando aqui](https://temas.tray.com.br/parceiro/fabrikadeecommerce). Criamos uma linha de temas completa para que sua loja possa ser utilizada da melhor forma possível dentro da plataforma Tray, mas acreditamos que sempre seja possível evoluir! E para isso, contamos com a sua ajuda. Caso queira deixar algum feedback ou nova ideia em relação a nossos temas e serviços, basta enviar um e-mail para . Ficaremos felizes em receber sua mensagem. # 07. Atualizações do tema (changelog) Nessa seção, você encontrará todas as melhorias e correções implementadas por nossa equipe no tema! Os blocos abaixo são formados por informações referentes às atualizações. Entenda o conteúdo deles. **Data**: quando a nova versão ficou disponível na Tray para você fazer a atualização na sua loja;\ **Versão**: número da versão do tema, com base nas melhorias e atualizações implementadas;\ **Implementações**: melhorias ou correções implementadas na nova versão do tema. {% hint style="danger" %} **Quer saber sobre as atualizações do seu tema no momento em que as enviamos para a Tray?** Siga a Fábrika no Facebook e no Instagram: * * [https://www.instagram.com/fabrikadeecommerce](https://www.instagram.com/fabrikadeecommerce/) {% endhint %} {% hint style="info" %} **Se o seu tema tiver o botão de nova versão do tema disponível com o link de instalação, conforme imagem abaixo, isso quer dizer que seu tema está desatualizado.** ![](https://1251761160-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MU9T8TA4eLNm5lB7ak8%2Fuploads%2FFSK1H4he07t9DfhEIBJ8%2Fimage.png?alt=media\&token=0561735a-4f28-4932-bb47-97371808b814) **Como proceder a atualização?** **Segue abaixo, o link da Tray que explica como proceder essa atualização.** \==> **Manual da Tray para atualizar seu tema sem perder configurações** - {% endhint %} {% hint style="success" %} **2024/05/09 - Versão 2.1.6 - ATUAL** \[**MELHORIA**] - Implementamos melhorias no tamanho da fonte dos preços. \[**MELHORIA**] - Implementamos melhorias com inserção de edição dos textos via painel do tema para os produtos com os status: Sem estoque, Indisponível e Sob Consulta. \[**MELHORIA**] - Implementamos melhorias de SEO para Páginas de Categorias. \[**MELHORIA**] - Implementamos melhorias de SEO para Páginas Personalizadas. \[**MELHORIA**] - Implementamos melhorias com a inserção de quantidade de avaliações ao lado das estrelas de avaliação do produto. \[**MELHORIA**] - Implementamos melhorias na Página de Comparação com uma estrutura 100% alinhado com o layout do tema e nova área de edição de cores via painel do tema. \[**MELHORIA**] - Implementamos melhorias no Botão Flutuante do WhatsApp para abrir mais rápidos e sem erros as mensagens nos celulares Android e iOS e nos Sistemas Operacionais (Windows, Linux e MacOS). \[**CORREÇÃO**] - Corrigimos no Botão Flutuante do WhatsApp a formatação de acentos e caracteres especiais para as mensagens pré definidas de 1o contato. \[**MELHORIA**] - Implementamos melhorias no Modal que antecede o checkout no quesito cálculo de frete quando a quantidade do produto é maior que 1. \[**MELHORIA**] - Implementamos melhorias no WhatsApp permitindo o uso de celulares do exterior. {% endhint %} {% hint style="success" %} **2024/03/30 - Versão 2.1.5** \[**MELHORIA**] - Implementamos melhorias na identificação do nome e versão do tema para o lojista e suporte da Tray. Antes tínhamos apenas dentro do painel do tema e agora temos também no código do tema que pode ser visto ao inspecionar o código da loja. \[**MELHORIA**] - Implementamos melhorias na visualização do e-mail do rodapé. Inserimos um espaço para que fique mais legível para quem for buscar a informação. \[**MELHORIA**] - Implementamos melhorias no controle dos cadastros dos e-mail de newsletter. Agora para inserção de textos que não sejam e-mail a validação está rigorosa. \[**MELHORIA**] - Implementamos melhorias na visualização do campo buscar do tema. Antes ele apresentava um bloco branco quando o produto não era achado e agora esse bloco não existe, deixando o layout ainda mais clean. \[**CORREÇÃO**] - Corrigimos o alinhamento do ícone "X" de fechar o modal do mobile. Agora ele está centralizado. {% endhint %} {% hint style="success" %} **2024/03/22 - Versão 2.1.4** \[**MELHORIA**] - Implementamos melhorias na gestão da PÁGINA DE CATEGORIAS permitindo que o lojista configure via painel para aparecer 4 produtos por fileira, como acontece na HOME da Loja. \[**MELHORIA**] - Implementamos melhorias na gestão dos BANNERS: 1. inserindo a opção de desabilitar os DOTS do Full Banner. 2. inserindo a opção de alterar as cores dos DOTS do Full Banner. \[**MELHORIA**] - Implementamos melhorias na gestão do MENU: 1. aumentamos o tamanho do campo do texto do 2o e do 3o nível do menu principal para evitar quebrar no texto 2. inserimos a opção do lojista ativar todos os itens de menu dentro de um item de menu com o uso do item de menu "todas as categorias". \[**MELHORIA**] - Implementamos melhorias na gestão do uso do WHATSAPP do Tema: 1. no uso do campo de mensagem, agora o lojista consegue quebrar o texto com o uso do "enter" para evitar que o texto fique em uma única linha. 2. com o novo campo de mensagem pré definida, o lojista tem a opção de inserir ou não uma mensagem que seja disparada no momento do click para inicia da comunicação. 3. no comportamento do tamanho do campo de mensagem. \[**CORREÇÃO**] - Corrigimos uma característica na visualização das FORMAS DE PAGAMENTO quando parecia a opção "permitir venda com estoque igual a 0" estiver ativa". \[**CORREÇÃO**] - Corrigimos uma característica na visualização das FORMAS DE PAGAMENTO quando parecia a opção "permitir venda com estoque igual a 0" estiver ativa". \[**CORREÇÃO**] - Corrigimos a duplicidade de preço que aparecia quando o lojista tinha seus produtos cadastrados no Google Merchant \[**MELHORIA**] - Implementamos uma função para ajudar ao lojista e evitar problemas futuros quando houver a tentativa de inserção por engano de imagens fora do padrão da Tray . {% endhint %} {% hint style="success" %} **2023/05/02 - Versão 2.1.3** \[**MELHORIA**] - Implementamos melhorias na gestão de atualização de valores no ícone do carrinho de compras localizado no topo da loja. \[**MELHORIA**] - Implementamos melhorias na gestão do WhatsApp permitindo usar sem mensagem na caixa de texto. \[**MELHORIA**] - Implementamos melhorias no alinhamento dos textos dos produtos das vitrines da home. \[**MELHORIA**] - Implementamos melhorias no comportamento da funcionalidade nativa brinde. \[**CORREÇÃO**] - Corrigimos uma característica do Whatsapp no mobile. {% endhint %} {% hint style="success" %} **2023/03/15 - Versão 2.1.2** \[**MELHORIA**] - Implementamos melhorias na gestão dos banners. \[**MELHORIA**] - Implementamos melhorias na gestão do incremento da quantidade no carrinho no topo ao adicionar um produto. \[**CORREÇÃO**] - Corrigimos a opções na edição de cores dos ícones das redes sociais. \[**MELHORIA**] - Implementamos a abertura dos links da Redes Sociais em novas abas ao invés da mesma aba. \[**CORREÇÃO**] - Corrigimos a exibição do formato de fonte do texto de características quando no tipo de radio button. {% endhint %} {% hint style="success" %} **2022/12/20 - Versão 2.1.1** \[**CORREÇÃO**] - Corrigimos a exibição do módulo banner principal quando o lojista cadastrava apenas uma imagem \[**CORREÇÃO**] - Corrigimos o funcionamento da aplicação de cores de tags de produto \[**CORREÇÃO**] - Corrigimos o funcionamento da logo nas versões desktop e mobile \[**MELHORIA**] - Implementamos a estilização no texto do produto sob consulta, via painel do tema. {% endhint %} {% hint style="success" %} **2022/11/23 - Versão 2.1.0** \[**MELHORIA**] - Implementamos melhorias nas Miniaturas da Vitrine dos Produtos das Páginas de Notícias/Blog. \[**MELHORIA**] - Implementamos melhorias na visualização da Logo na versão mobile. \[**MELHORIA**] - Implementamos mais opções na edição de cores via painel do tema para a Cor de fundo da foto do produto da Vitrine. \[**CORREÇÃO**] - Corrigimos a exclusão automática do botão quando a variação não estiver disponível na página de produto. \[**MELHORIA**] - Implementamos melhorias no código para ganho de performance do tema. \[**MELHORIA**] - Implementamos a opção de ter o Botão Comprar nos Produtos da Vitrine na versão mobile, via painel do tema. \[**MELHORIA**] - Implementamos melhorias na estrutura das vitrines dos produtos para que automaticamente a moldura se adaptasse conforme o tamanho da imagem no caso das lojas que não possuem uma padrão nas imagens e facilitando também para as lojas que trabalham com imagens quadradas no padrão dos Marketplaces. \[**MELHORIA**] - Implementamos a funcionalidade de Desconto Progressivo nas seções: Produtos de Vitrine, Catálogo e Página de Produto. \[**CORREÇÃO**] - Corrigimos a instabilidade na Configuração das Vitrines que as vezes perdia a configuração feita pelo lojista. \[**MELHORIA**] - Implementamos mais opções na edição de cores via painel do tema para a Página de Cadastro. \[**MELHORIA**] - Implementamos mais opções na edição de cores via painel do tema para o Fundo dos Banners da Página de Catálogo. \[**MELHORIA**] - Implementamos a opção de habilitar / desabilitar os banners topo e rodapé da Página das Categorias, via painel do tema. \[**CORREÇÃO**] - Corrigimos a exibição do nome do usuário logado na versão mobile e desktop. \[**CORREÇÃO**] - Corrigimos a imagem do ícone do cadeado da Régua de Informações. \[**MELHORIA**] - Implementamos a opção de fechar a mensagem do Whatsapp, via painel do tema. \[**MELHORIA**] - Implementamos a opção de efeito Fade no Full Banner (banner principal), via painel do tema. \[**MELHORIA**] - Implementamos a opção de Habilitar e Desabilitar a Régua de Informações, via painel do tema. \[**MELHORIA**] - Implementamos no Rodapé uma nova Logo da Fábrika, mais leve e mais clara. \[**MELHORIA**] - Implementamos no Rodapé novas Imagens dos Selos de Segurança e dos Meios de Pagamento. \[**MELHORIA**] - Reorganizamos o Painel de Edição do Tema e inserimos a versão do tema que atual para que o lojista saiba que versão está usando. \[**MELHORIA**] - Implementamos uma melhora no uso do Selo Adicional e da Visualização dos Selos na Página do Produto. {% endhint %} {% hint style="success" %} **2022/04/06 - Versão 2.0** \[**MELHORIA**] - Implementamos melhorias no funcionamento do menu na versão mobile. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para os Produtos Relacionados da Página de Produtos. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para o Ícone Buscar na versão mobile. \[**MELHORIA**] - Implementamos um novo Filtro Inteligente na página de categorias da versão mobile. \[**MELHORIA**] - Implementamos no Filtro Inteligente da página de categorias da versão desktop uma opção de esconder o filtro deixando a página mais limpa. \[**MELHORIA**] - Implementamos uma nova página Fale Conosco (contato) com a adição de mapa do Google Maps para as lojas que possuem ponto físico utilizarem. \[**MELHORIA**] - Implementamos na Vitrine da home, a opção para aparecer a 2a imagem do produto. Dessa forma, você poderá configurar no painel se deseja utilizar ou não essa opção. Quando a opção estiver ativada, ao passar o mouse sobre a imagem do produto, a 2a imagem aparece e quando retirar o mouse a 1a imagem volta. \[**CORREÇÃO**] - Corrigimos a visualização do banner mosaico na versão mobile. \[**MELHORIA**] - Implementamos na Régua de Informações a opção da edição de cores via painel do tema para. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para o Pop-up de saída (modal de saída). \[**CORREÇÃO**] - Corrigimos o comportamento de exibição da Seção Blog (notícias) na Home. \[**CORREÇÃO**] - Corrigimos o comportamento de exibição da Seção Depoimentos na Home. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para os Produtos Visitados da Página de Produtos. \[**MELHORIA**] - Implementamos na Página de Produtos a opção da edição de cores via painel do tema para a Seção Compre Junto. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para o Título dos Post de Blog (notícias). \[**MELHORIA**] - Implementamos mais opções na edição de cores via painel do tema para a Página Central das Listas e a Página Única da Lista. \[**CORREÇÃO**] - Corrigimos o comportamento de exibição do fundo do botão adicional quando inserido na loja. \[**MELHORIA**] - Implementamos mais opções na edição de cores via painel do tema para a exibição do Nome e do Valor do Produto relacionado ao Post Blog. {% endhint %} {% hint style="success" %} **2022/02/07 - Versão 1.9** \[**MELHORIA**] - Implementamos a Seção Notícias (Blog) na Home do seu tema com várias opções de visualização. \[**MELHORIA**] - Implementamos a Seção de Depoimentos na Home do seu tema. \[**MELHORIA**] - Implementamos a Página de Depoimentos com as mesmas personalizações do seu tema. \[**MELHORIA**] - Implementamos para o item Produtos Relacionados a opção de rolagem na horizontal ou padrão com bloco de produtos. \[**MELHORIA**] - Implementamos melhorias na visualização dos produtos visitados para ajudar na conversão de sua loja e na navegação do seu cliente. \[**MELHORIA**] - Implementamos na Vitrine da home, no formato de Lista, a opção de colocar a quantidade de produtos de sua preferência. Dessa forma, você poderá colocar a quantidade de produtos que desejar. \[**MELHORIA**] - Implementamos no Pop-up (modal) de entrada a opção de colocar uma imagem no padrão mobile. Dessa forma você poderá colocar um Pop-up com medidas para o desktop e outro para o mobile. \[**MELHORIA**] - Implementamos melhorias na visualização das imagens dos Produtos das Vitrines. \[**MELHORIA**] - Implementamos melhorias na visualização das imagens dos produtos nas Páginas de Categorias. \[**CORREÇÃO**] - Corrigimos o comportamento do Botão Comprar da página de produtos para ele aparecer quando estiver configurado no painel para vender sem controle de estoque. \[**MELHORIA**] - Implementamos melhorias na visualização do Full Banner no Mobile. \[**MELHORIA**] - Implementamos a opção de edição do texto do botão dos produtos das vitrines via painel do tema. \[**MELHORIA**] - Implementamos a opção de edição de cores via painel do tema para padronizar todas as setas dos carrosséis (desktop e mobile). \[**MELHORIA**] - Implementamos melhorias no posicionamento do ícone e da caixa do WhatsApp para textos grandes. \[**MELHORIA**] - Implementamos melhorias para visualização de e-mails grandes na home e na página de contatos. {% endhint %} {% hint style="success" %} **2021/11/09 - Versão 1.8** \[**MELHORIA**] - Implementamos uma nova versão do mobile possibilitando que a estrutura de banners do desktop possa estar presente também na versão mobile. Além disso, agora os lojistas podem escolher se querem habilitar ou não os banners do desktop no mobile e de que forma. \[**MELHORIA**] - Implementamos melhorias no uso do helper da Plataforma Tray para exibição dos detalhes do produto na página de produtos com o objetivo de facilitar a configuração e customização do tema. Agora você só precisa configurar no admin da loja e não mais no admin do tema e da loja. \[**MELHORIA**] - Implementamos melhorias na edição de cores para catálogos sem produtos para deixar seu tema muito mais próximo da sua identidade visual. \[**MELHORIA**] - Implementamos melhorias no uso dos comentários na página de produtos, deixando eles mais visíveis. Agora, caso você não deseje utilizá-lo, é possível desabilitá-lo no admin da loja. \[**MELHORIA**] - Implementamos melhorias na página de produto, melhorando a visibilidade das variações do produto de forma que os tamanhos grandes apareçam sem quebras. Exemplo: 41/42 ou 41-42 {% endhint %} {% hint style="success" %} **2021/10/20 - Versão 1.7** \[**MELHORIA**] - Implementamos a opção de edição de cores via painel do tema para o botão abrir/fechar do menu flutuante. \[**MELHORIA**] - Implementamos a opção da edição de cores via painel do tema para buscas sem resultados. \[**MELHORIA**] - Implementamos novas opções de edição de cores via painel do tema para a Página Kit de Produtos. \[**MELHORIA**] - Implementamos novas opções de edição de cores via painel do tema para a Página de Produtos. \[**MELHORIA**] - Implementamos novas opções de edição de cores via painel do tema para a Página de Produtos SEM estoque. \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para página de login. {% endhint %} {% hint style="success" %} **2021/10/02 - Versão 1.6** \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para borda de variação de cores nos Kits de produtos. \[**CORREÇÃO**] - Corrigimos o problema que ocasionava erro de carregamento da loja quando não tinha o Full Banner instalado / configurado. {% endhint %} {% hint style="success" %} **2021/09/15 - Versão 1.5** \[**CORREÇÃO**] - Corrigimos a função Scroll vertical nas sugestões de busca de produtos. \[**CORREÇÃO**] - Corrigimos a função responsável pela exibição do filtro inteligente na página de resultado de busca. \[**CORREÇÃO**] - Corrigimos a função responsável pela paginação nos resultados de busca. \[**CORREÇÃO**] - Corrigimos o link quebrado responsável pela visualização da logo da Fábrika localizado no rodapé. \[**CORREÇÃO**] - Corrigimos os links quebrados do menu do topo do painel de edição do tema. {% endhint %} {% hint style="success" %} **2021/08/25 - Versão 1.4** \[**MELHORIA**] - Implementamos a opção de edição de cores via painel do tema para a borda das variações de cores da página de produto. \[**MELHORIA**] - Implementamos a função para criar a barra de rolagem na listagem de subcategorias quando tiver muitos itens. {% endhint %} {% hint style="success" %} **2021/08/12 - Versão 1.3** \[**MELHORIA**] - Implementamos a opção de edição de cores via painel do tema para o menu da versão mobile do tema. \[**MELHORIA**] - Implementamos na função responsável pela rotação de banners a opção de ser automática via painel do tema. \[**CORREÇÃO**] - Corrigimos a função responsável pelo posicionamento do WhatsApp flutuante. {% endhint %} {% hint style="success" %} **2021/07/02 - Versão 1.2** \[**CORREÇÃO**] - Corrigimos a opção da edição de cores via painel do tema para as tags do produto. \[**CORREÇÃO**] - Corrigimos a função responsável pelo posicionamento das imagens dos selos de segurança e dos meios de pagamentos carregados via painel do tema. \[**CORREÇÃO**] - Corrigimos a função responsável pelos caracteres inválidos na paginação do catálogo. {% endhint %} {% hint style="success" %} **2021/07/01 - Versão 1.1** \[**CORREÇÃO**] - Corrigimos a função responsável pelos carregamento de imagens dos produtos quando o botão "voltar ao topo" é ativado. \[**MELHORIA**] - Implementamos a opção de edição dos subtítulos para os ítens da régua de informações via painel do tema. {% endhint %} {% hint style="success" %} **2021/06/01 - Versão 1.0** \[**INÍCIO**] Lançamento do Tema Linha FLAT no segmento MODA. {% endhint %} # 08. Muito Obrigado! Chegamos ao fim do Manual do **Tema Linha FLAT.** Agora sua loja está pronta para o **sucesso** e nós esperamos que esta nova etapa seja de muitas vendas e conquistas! Obrigado pela confiança,\ **Equipe Fábrika de E-commerce**