Zion
O tema Zion foi produzido com o intuito de auxiliar você lojista a otimizar a aparência da sua loja virtual, além de oferecer ao cliente uma experiência de compra completa.
Desenvolvido na cor escura, o tema Zion proporciona uma aparência diferenciada e profissional que destaca os produtos exibidos, além disso, ele possibilita a exibição do menu de forma animada, carrinho lateral exibido automaticamente e outras várias possibilidades de edição.
O tema possui um menu comunicativo que se torna opaco enquanto o visitante estiver navegando pela loja, proporcionando maior ênfase sobre o banner da sua loja virtual.
Veja a Loja Zion e explore o tema em tempo real!
Nesse tutorial, você vai aprender sobre como adicionar o novo tema Zion em sua loja virtual, para isso, siga o passo a passo completo abaixo:
Instalando o Tema Zion
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 Zion.
4- Após selecionar o tema Zion, 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- Após isso 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 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; (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 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