Manual Tema Linha FLAT
Conheça a TraySuporte da TraySuporte do seu TemaCompre um Tema da Fábrika
  • 00. Conheça o Tema FLAT
  • 01. O Manual
  • 02. Como Instalar, Duplicar, Editar, Atualizar e Publicar seu tema
    • 2.1 Instalar seu tema
    • 2.2 Duplicar, Editar e Publicar seu tema
    • 2.3 Atualizar seu tema
  • 03. Painel de Edição do Tema
    • 3.1 - Edição da Estrutura e Elementos
      • 3.1.1 - Cabeçalho
      • 3.1.2 - Menu
      • 3.1.3 - Régua de Informações
      • 3.1.4 - Banners
      • 3.1.5 - Popups
      • 3.1.6 - Vitrines de Produtos
      • 3.1.7 - Depoimentos
      • 3.1.8 - Carrossel de Marcas
      • 3.1.9 - Blog ou Notícias
      • 3.1.10 - Rodapé
      • 3.1.11 - Botão Voltar ao Topo
      • 3.1.12 - WhatsApp Flutuante
    • 3.2. Edição das Cores
      • 3.2.1 - Cabeçalho
      • 3.2.2 - Menu
      • 3.2.3 - Régua de Informações
      • 3.2.4 - Vitrines de Produtos
      • 3.2.5 - Carrossel de Marcas
      • 3.2.6 - Rodapé
      • 3.2.7 - Breadcrumb
      • 3.2.8 - Popups
      • 3.2.9 - Botão Voltar ao Topo
      • 3.2.10 - Páginas
  • 04. Configurações específicas do seu tema
    • 4.2 - Páginas Institucionais
    • 4.4 - Categorias e Subcategorias
    • 4.5 - Listas de Desejo
    • 4.6 - Página de Produto
    • 4.7 - Características e Variações
  • 05. Edição do código fonte do seu tema
  • 06. Sua sugestão é muito importante para nós
  • 07. Atualizações do tema (changelog)
  • 08. Muito Obrigado!
Powered by GitBook
On this page

Was this helpful?

  1. 03. Painel de Edição do Tema
  2. 3.2. Edição das Cores

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

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.

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.

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

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.

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.

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.

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.

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.

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.

Previous3.2.9 - Botão Voltar ao TopoNext04. Configurações específicas do seu tema

Last updated 4 years ago

Was this helpful?