Duna
Was this helpful?
Was this helpful?
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.
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:
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.
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.
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é.
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.
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.
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 https://fonts.google.com/
URL da fonte: URL da fonte utilizada nos textos da loja. Veja mais opções em https://fonts.google.com/
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.
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.
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.
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.
Caso você queira personalizar seu template de forma mais avançada utilizando linguagem de código, acesse aqui o tutorial completo de CMS para designers.
Recomendamos que apenas desenvolvedores e designers utilizem o CMS .
Para saber o que é o CMS, clique aqui.
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. 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. 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. 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.
