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!
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 https://fonts.google.com/
URL da fonte: URL da fonte utilizada nos textos da loja; Veja mais opções em https://fonts.google.com/
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 o tutorial completo de CMS para designers. Recomendamos que apenas desenvolvedores e designers utilizem o CMS .
Para saber o que é o CMS, clique aqui.
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. 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.
Last updated
