> For the complete documentation index, see [llms.txt](https://ajuda.iset.com.br/inicio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/griff.md).
# Griff
\
O tema GRIFF foi desenvolvido visando melhorar a estética da sua loja virtual e consequentemente a experiência de compra do consumidor.
\
Ele possui um menu interativo que se torna opaco quando o visitante estiver navegando pela página, dando um destaque maior sobre o banner da sua loja virtual.
\
O tema foi criado na cor branca, visando destacar ainda mais os produtos anunciados, ele também possui a opção de inserir animação ao exibir menu, carrinho lateral exibido de forma automática e diversas outras possibilidades de personalização.
\
[Veja a Loja GRIFF e explore o tema em tempo real!](https://roupas.lojavirtual.io/)
\
Nesse tutorial, você vai aprender sobre como adicionar o novo tema Griff em sua loja virtual, para isso, siga o passo a passo completo abaixo:
### **Instalando o Tema Griff**
\
Para acessar seus temas, siga os seguintes passos:
\
1- Com o Painel administrativo aberto, clique em **Personalização** >> **Meus temas**.
\
2- Com a página **Meus Temas** clique na opção **Adicionar novo Tema**.
\
3- Na página **Adicionar novo tema**, aba **Template**, clique no botão do **Tema** **Griff**.
\
4- Após selecionar o tema **Griff**, **selecione a cor** do template disponível em Cores do template e clique em **Aplicar**.
\
5- Em seguida na janela **Deseja aplicar este layout em sua loja?** Basta clicar no botão **Aplicar**.
\
6- Em seguida na janela **Salvar layout atual da sua loja** você deve preencher com o nome do tema atual que você está utilizando.
\
7- Em seguida aparecerá uma mensagem de sucesso, basta fechar a página. Após isso, seu tema ficará disponível na aba **Outros temas disponíveis.**
### **Visualizar Tema**
\
Conforme nossas atualizações, agora é possível visualizar o tema em seu domínio temporário, sem afetar sua loja virtual.
\
1- Para isso clique em **Editar Tema**, observe que o tema selecionado será destacado como **Tema em customização**.
\
2- Agora basta clicar no botão **Visualizar**.
\
Observe que abriu em uma nova guia a sua loja com a URL temporária (meudominio.sualojaonline.com.br) e o tema escolhido.
### **Personalizar**
\
1- Após adicionar o seu tema, ele estará disponível na página **Outros Temas Disponíveis**, para personalizá-lo clique no botão **Personalizar**.
\
2- Na opção **Personalizar**, você poderá editar as seguintes funções:
* Botões;
* Cabeçalho;
* Configurações de tema;
* Grade de produtos;
* Redes sociais;
* Rodapé.
\
Todos esses campos serão melhor detalhados abaixo.
#### **Botões**
\
1- Esse campo irá alterar as Cores dos botões, cada opção terá o título e a descrição na lateral direita para facilitar a sua compreensão:
* Para personalizar a cor dos botões, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar. Ou utilizar o seletor de cor disponível.
#### **Cabeçalho**
\
1- Além da alteração de cores, essa opção irá lhe permitir a alteração da altura da logo em pixel, permitir cabeçalho suspenso, se esse cabeçalho poderá ser exibido em suas Landing Pages, etc.
* **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível;
* **Cor de fundo** **–** **Busca:** cor de fundo do campo de busca;
* **Cor de fundo – Cabeçalho:** cor de fundo do cabeçalho;
* **Cor de fundo – Login:** cor de fundo da barra de login. Deixe vazio para ocultar a barra de login;
* **Cor de fundo – Menu:** cor de fundo da barra de menu;
* **Cor de fundo – Parceiros:** cor de fundo da barra de parceiros;
* **Cor de fundo – Reduzido:** cor de fundo do cabeçalho reduzido usado em etapas de conclusão de compra;
* **Cor de fundo do corpo dos submenus:** cor de fundo dos submenus de categorias;
* **Cor do texto – Busca:** cor do texto do campo de busca;
* **Cor do texto – Cabeçalho:** cor do texto do cabeçalho;
* **Cor do texto – Login:** cor do texto da barra de Login;
* **Cor do texto – Menu:** cor do texto da barra do menu;
* **Cor do texto – Parceiros:** cor do texto da barra de parceiros;
* **Cor de realce – Cabeçalho:** cor de realce do texto do cabeçalho e na barra de parceiros;
* **Cor de realce – Login:** cor de realce do texto na barra de login;
* **Cor de realce – Menu:** cor de realce do texto da barra de menu;
* **Cor do texto – Reduzido:** cor do texto do cabeçalho e rodapé reduzidos;
* **Tamanho da Logo:** você irá definir a altura da imagem em pixel;
* **Limite de categorias:** limita a quantidade de categorias exibida no menu;
* **Exibir em Landing Pages:** exibe ou oculta o cabeçalho em landing pages;
* **Cabeçalho Suspenso:** exibe o cabeçalho de forma suspensa durante a rolagem da página;
* **Logo central:** posiciona a logo centralizada no cabeçalho;
* **Animação ao abrir menu:** exibe itens do menu de forma animada;
* **Menu estendido:** exibe o menu de forma estendida;
* **Cabeçalho transparente:** exibe itens do menu de forma animada.
#### **Configurações do tema**
\
1- Aqui você poderá definir a cor de fundo da loja, cor do texto, contador regressivo, estoque baixo, intervalo dos alertas e pop-up, fonte do texto e a URL da fonte.
* **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível;
* **Contador Regressivo – Estoque Baixo:** exibe estoque baixo no contador regressivo quando atingir este valor;
* **Intervalo de alertas:** intervalo em dias para exibição de banners de alerta na loja virtual. Por exemplo: banner LGPD;
* **Intervalo dos pop-ups:** intervalo em dias para exibição de banners pop-up. Por exemplo: banner newsletter;
* **Fonte do Texto:** Família da fonte utilizada nos textos da loja; Veja mais opções em
* **URL da fonte:** URL da fonte utilizada nos textos da loja; Veja mais opções em
* **Oferta especial texto:** descrição do benefício da oferta especial para quando o valor for atingido; (Caso não queira apresentar a faixa basta deixar ambas opões com o valor 0);
* **Carrinho lateral:** alterna a exibição do carrinho entre lateral (ativo) ou suspenso (inativo);
* **Comentários de clientes abertos:** comentários de clientes abertos;
* **Descrição da página:** exibir descrições das páginas, landing pages e artigos;
* **Títulos de Vitrines:** exibir nomes das vitrines como título;
* **Oferta especial valor:** exibe oferta especial para compras a partir do valor definido; (Caso não queira apresentar a faixa basta deixar ambas opções com o valor 0);
* **Exibir automaticamente carrinho lateral:** exibe o carrinho lateral sempre que um item é adicionado ao carrinho.
#### **Grade de produtos**
\
1- Nesse campo você poderá realizar a edição das cores da grade de produtos, exibição do botão Comprar ou Veja Mais, quantidade de colunas no mobile.
\
Dentre as opções também temos novos recursos de personalização para grade de produtos.
* **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível;
* **Cards de Produtos:** cor de fundo dos cards de produtos nas vitrines e listagens;
* **Cor de fundo:** cor de fundo das vitrines, listagens ou filtros;
* **Nome do produto:** cor do texto do nome dos produtos;
* **Preço:** cor do texto do preço dos produtos;
* **Tag de desconto:** cor do elemento da tag de desconto e contador regressivo;
* **Tag de exclusividade:** cor do elemento da tag de exclusividade;
* **Tag de lançamento:** cor do elemento da tag de lançamento;
* **Tag de oferta:** cor do elemento da tag de oferta;
* **Texto tag entrega imediata:** texto do elemento da tag de Entrega imediata;
* **Texto tag exclusividade:** texto do elemento da tag de exclusividade;
* **Texto tag frete grátis:** texto do elemento da tag de frete grátis;
* **Texto tag lançamento:** texto do elemento da tag de lançamento;
* **Texto tag oferta:** texto do elemento da tag de oferta;
* **Botão Comprar:** alterna entre a exibição do botão comprar ou o botão veja mais;
* **Duas colunas (Mobile):** intervalo em dias para exibição de banners de alerta na loja virtual. Por exemplo: banner LGPD.
#### **Redes sociais**
\
1- Aqui você poderá inserir as URLs das suas Redes Sociais, caso você não possua alguma rede social basta deixar o campo em branco.
#### **Rodapé**
\
1- Nessa parte você poderá definir as cores do rodapé, assim como os textos a serem exibidos e se esse rodapé poderá ser exibido em suas landing pages.
\
Dentre as opções também temos novos recursos de personalização para rodapé.
* **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível;
* **Cor de fundo – Botão Newsletter:** cor de fundo do botão de inscrição na newsletter;
* **Cor de fundo – Dados da loja:** cor de fundo dos dados da loja;
* **Cor de fundo – Newsletter:** cor de fundo do bloco de newsletter;
* **Cor de Fundo – Rodapé:** cor de fundo do rodapé;
* **Cor do texto – Rodapé:** cor dos textos do rodapé;
* **Cor texto – Créditos:** cor dos textos do bloco de créditos;
* **Cor do link – Rodapé:** cor para destaques de links do rodapé;
* **Cor do texto – Newsletter:** cor dos textos do bloco de newsletter;
* **Texto – Coluna A, B e C:** se refere ao título de cada coluna do rodapé, caso você deixe o título em branco, ele remove toda a coluna;
* **Texto – Botão Newsletter:** chamada do botão de inscrição na newsletter;
* **Texto – Newsletter:** texto informativo do bloco de newsletter;
* **Texto – Newsletter:** título do bloco de newsletter;
* **Exibir em landing pages:** exibe ou oculta o rodapé em landing pages.
\
2- Assim que finalizar toda personalização, não se esqueça de clicar no botão **Salvar alterações**.
\
3- Pronto o seu tema foi personalizado!
\
4- Agora basta passar o mouse sobre a **nuvem laranja** no canto superior direito, em seguida clique no botão **Aplicar agora** para aplicar as alterações feitas em sua loja virtual.
\
5- Em seguida abrirá uma mensagem avisando que o cache da sua loja virtual foi atualizado. Por fim, clique no botão **OK**, e pronto, suas alterações foram salvas e aplicadas.
\
6- Para visualizar como o seu tema está ficando, clique no botão **Visualizar**.
\
7- Após ter realizado todos os ajustes e o tema se encontrar da forma desejada, você poderá publicar o tema, para publicar seu tema duplicado basta clicar no botão **Publicar**.
### **Como personalizar o CMS**
\
Caso você queira personalizar seu template de forma mais avançada utilizando linguagem de código, acesse [aqui](https://bit.ly/3r6h6yJ) o tutorial completo de CMS para designers.
\
Recomendamos que apenas desenvolvedores e designers utilizem o CMS .
\
Para saber o que é o CMS, clique [aqui](https://bit.ly/3K2g4wh).
### **Configurações adicionais**
\
Existem também algumas configurações adicionais que podem ser feitas para sua loja ficar mais bonita, você pode acompanhar mais sobre elas em nossos tutoriais feitos para te ajudar a personalizar sua loja virtual.
* [Como criar e gerenciar seus Banners](https://bit.ly/3zQerxm). Eles são uma forma comum utilizada para fazer propagandas para divulgação ou chamar a atenção do visitante para alguma informação. São criados para atrair um usuário a um site ou página específica da loja virtual através de um link;
* [Como criar uma vitrine para sua loja virtual.](https://bit.ly/3qiqdx8) A nova funcionalidade Vitrines veio para facilitar a personalização do catálogo da sua loja virtual sem a necessidade de alterar códigos HTML;
* [Como criar um blog na loja virtual](https://bit.ly/33pefZu). Uma das formas mais populares de gerar conteúdo rico visando ajudar o cliente e, em simultâneo, aparecer cada vez mais nos sites de busca como o Google, é criando um Blog.
\
Ficou com alguma dúvida? Entre em contato com nosso suporte via chat online.