> 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/cyber.md).
# Cyber
\
O tema Cyber foi desenvolvido com o intuito de melhorar tanto a liberdade de personalização do lojista, quanto a experiência de compra do consumidor.
\
**Algumas das novas funcionalidades oferecidas pelo tema são** as opções de personalizar, o limite de categoria apresentada na loja, inserir animação ao exibir menu, cabeçalho transparente, carrinho lateral exibido de forma automática e muitas outras novidades.
\
[Veja o Loja Cyber e explore o tema em tempo real!](https://cyber.lojavirtual.io/)
\
Nesse tutorial, você vai aprender sobre como adicionar o novo tema Cyber em sua loja virtual, para isso, siga o passo a passo completo abaixo:
### **Instalando o tema Cyber**
\
Para acessar seus temas, siga os seguintes passos:
\
1- Com o Painel administrativo aberto, clique em **Minha loja >> 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** **Cyber**.
\
4- Após selecionar o tema **Cyber**, **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 melhores 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;
* **Tamanho da Logo:** você irá definir a altura da imagem em pixel;
* **Cabeçalho Suspenso:** exibe o cabeçalho de forma suspensa durante a rolagem da página;
* **Exibir em Landing Pages:** exibe ou oculta o cabeçalho em landing pages;
* **Limite de categorias:** limita a quantidade de categorias exibida no menu;
* **Logo central:** posiciona a logo centralizada no cabeçalho;
* **Menu estendido:** exibe o menu de forma extendida;
* **Animação ao abrir menu:** exibe itens do menu de forma animada;
* **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
* **Carrinho lateral**: alterna a exibição do carrinho entre lateral (ativo) ou suspenso (inativo);
* **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;
* **Oferta especial texto:** descrição do benefício da oferta especial para quando o valor for atingido;
* **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;
* **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;
* **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 entrega imediata:** texto do elemento da tag de Entrega imediata;
* **Texto tag lançamento:** texto do elemento da tag de lançamento;
* **Texto tag oferta:** texto do elemento da tag de oferta.
#### **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;
* **Texto – Coluna A, B e C**: se refere ao título de cada coluna do rodapé;
* **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;
* **Cor texto - créditos:** cor dos textos do bloco de creditos.
\
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.