# Duna
\
Aproveite a experiência de compra única e luxuosa proporcionada pelo tema Duna! Com o seu ar nobre e novas funcionalidades de customização.
\
O tema conta com design único, novo contador regressivo, nova personalização no carrinho lateral, na exibição dos produtos e muito mais!
\
A Loja Duna é uma ótima opção para você que vende joias e acessórios sofisticados!
\
[Veja mais sobre a Loja Duna e explore o tema em tempo real](https://duna.lojavirtual.io/).
\
Neste tutorial, você vai aprender sobre como adicionar o novo tema Duna em sua loja virtual, para isso, siga o passo a passo completo abaixo:
### **Instalando o tema Duna**
\
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** **Duna**.
\
4- Após selecionar o tema Duna, **selecione a cor** do template disponível em Cores do template e clique em **Aplicar**.
\
5- Logo após 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- A seguir 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é.
#### **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:** adiciona o banner por baixo do cabeçalho, deixando a cor de fundo do cabeçalho transparente.
#### **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;
* **Cor de fundo:** cor de fundo do corpo da loja;
* **Cor do texto**: cor dos textos gerais da loja virtual;
* **Valor do contador regressivo da página do carrinho:** escolha no valor para exibir o contador regressivo na página do carrinho, valor em minutos;
* **Contador Regressivo - Estoque Baixo:** exibe estoque baixo no contador regressivo quando atingir este valor;
* **Intervalo dos alertas:** intervalo em horas para exibição de banners de alerta na loja virtual. Por exemplo: banner LGPD;
* **Intervalo dos pop-ups:** intervalo em horas para exibição de banners pop-up. Por exemplo: banner newsletter;
* **Oferta especial valor:** exibe oferta especial para compras a partir do valor definido; (Caso não queira apresentar a faixa basta deixar configurado com o valor 0);
* **Texto do contador regressivo da página do carrinho:** exibe o texto do contador regressivo da página do carrinho.
* **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;
* **Carrinho lateral:** alterna a exibição do carrinho entre lateral (ativo) ou suspenso (inativo);
* **Campo de consulta de CEP do carrinho lateral:** exibe ou não o campo de consulta de CEP no carrinho lateral;
* **Comentários de clientes abertos:** exibe os comentários abertos nas páginas dos produtos;
* **Descrição de Página:** exibir descrições das páginas, landing pages e artigos;
* **Títulos de Vitrines:** exibir nomes das vitrines como título;
* **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;
* **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;
* **Atributos no card:** exibe ou não os atributos no card de produtos;
* **Botão comprar:** alterna entre a exibição do botão comprar ou o botão veja mais;
* **Botão veja mais:** alterna entre a exibição do botão veja mais;
* **Duas colunas (Mobile):** exibir duas colunas de produtos nas listagens em smartphones.
#### **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.
* **Número do Whatsapp**: exibe o número e ícones de chamada do WhatsApp na loja. Informar número completo, com DDD (somente números). Ex: 11999993333;
* **Link do perfil no Facebook**: exibe o ícone do Facebook no cabeçalho e rodapé com link para seu perfil;
* **Link do perfil no Instagram**: exibe o ícone do Instagram no cabeçalho e rodapé com link para seu perfil;
* **Link do perfil no Pinterest**: exibe o ícone do Pinterest no cabeçalho e rodapé com link para seu perfil;
* **Link do perfil no Tiktok:** exibe o ícone do Tiktok no cabeçalho e rodapé com link para seu perfil.
* **Link do perfil no Twitter:** exibe o ícone do Twitter no cabeçalho e rodapé com link para seu perfil.
* **Link do canal no YouTube:** exibe o ícone do YouTube no cabeçalho e rodapé com link para seu canal.
#### **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://help.iset.com.br/cms-para-designers/) 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://help.iset.com.br/cms/).
### **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://help.iset.com.br/banners-publicidade/). 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://help.iset.com.br/como-criar-uma-nova-vitrine/) 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://help.iset.com.br/criar-blog-loja-virtual/). 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.