> For the complete documentation index, see [llms.txt](https://temaflatnatray.fabrikadeecommerce.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://temaflatnatray.fabrikadeecommerce.com.br/3.-painel-de-edicao-do-tema/3.2.-edicao-das-cores/3.2.10-paginas.md).
# 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 %}