Como instalar tema Griff

Resumo do Conteúdo

 

tema-griffe-mockup-loja-virtual

O tema GRIFF foi desenvolvido visando melhorar a estética da sua loja virtual e consequentemente a experiência de compra do consumidor.

Ele possui um menu interativo que se torna opaco quando o visitante estiver navegando pela página, dando um destaque maior sobre o banner da sua loja virtual.

O tema foi criado na cor branca, visando destacar ainda mais os produtos anunciados, ele também possui a opção de inserir animação ao exibir menu, carrinho lateral exibido de forma automática e diversas outras possibilidades de personalização.

 

Veja a Loja GRIFF e explore o tema em tempo real!

 

 

Nesse tutorial, você vai aprender sobre como adicionar o novo tema GRIFF em sua loja virtual, para isso, siga o passo a passo completo abaixo:

 

Instalando o tema GRIFF

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.

 

tema-griffes-loja-virtual

 

3- Na janela Adicionar novo tema na aba Template clique no tema Griff.

 

 

4- Após selecionar o tema GRIFF, selecione a cor do template disponível em Cores do template e clique em Aplicar. 

 

tema-griff

 

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.

 

tema-cyber

 

7-Em seguida irá aparecer uma mensagem de sucesso, basta fechar a página. Após isso, seu tema ficará disponível na aba Outros temas disponíveis. 

 

tema-griffes-loja-virtual

 

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.

 

tema-griffe-loja-virtual

 

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.

 

tema-griffes-loja-virtual

 

Personalizar

1- Agora vamos realizar a personalização do tema, para isso  clique no botão Personalizar.

 

tema-griffes-loja-virtual

 

2- Na opção Personalizar, você poderá editar as seguintes funções:

 

tema-griffes-loja-virtual

 

  • 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.

 

tema-griffes-loja-virtual

 

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 do campo de busca;
  • cor de fundo do cabeçalho;
  • cor de fundo da barra de login. Deixe vazio para ocultar a barra de login;
  • cor de fundo da barra de menu;
  • cor de fundo da barra de parceiros;
  • cor de fundo do cabeçalho reduzido usado em etapas de conclusão de compra;
  • cor de fundo dos submenus de categorias;
  • cor do texto do campo de busca;
  • cor do texto do cabeçalho;
  • cor do texto da barra de Login;
  • or do texto da barra do menu;
  • or do texto da barra de parceiros;
  • or de realce do texto do cabeçalho e na barra de parceiros;
  • or de realce do texto na barra de login;
  • or de realce do texto da barra de menu;
  • or 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, caso o limite seja ultrapassado, as categorias serão unidas e apresentadas em uma única com o nome “Outras Categorias”;
  • 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 as categorias por cima do banner, adiciona o banner por baixo do cabeçalho deixando a cor de fundo dele transparente.

 

tema-griffes-loja-virtual

 

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 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 ambas opões com o valor 0);
  • 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. As opções Oferta Especial de Valor e Texto ficam na parte superior da loja. (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: exibe os comentários abertos nas páginas dos produtos;
  • 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;
  • Exibir automaticamente carrinho lateral: exibe o carrinho lateral sempre que um item é adicionado ao carrinho.

 

tema-griffes-loja-virtual

 

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;
  • Exibe informações de pagamento nos cards de produtos: exibe informações de pagamento nos cards de produtos.

 

tema-griffes-loja-virtual

 

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.

 

tema-griffes-loja-virtual

 

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.

 

tema-griffes-loja-virtual

 

2- Assim que finalizar toda personalização, não se esqueça de clicar no botão Salvar alterações.

 

tema-griffes-loja-virtual

 

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 encontra da forma como deseja, você poderá publicar o tema, para publicar seu tema duplicado basta clicar no botão Publicar.

 

tema-griffes-loja-virtual

 

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.

Deixe um comentário

O seu endereço de e-mail não será publicado.