Documentação - Coleção de Temas Convert

Documentação Coleção de Temas Convert

Manual de instalação e uso da Coleção de Temas Convert

Apresentação

Parabéns! Você acabou de adquirir a Coleção de Temas Convert. Agrademos muito por escolher um dos nossos temas para ser a identidade visual da sua loja. Estamos trabalhando sempre para aprimorar eles, e qualquer feedback é muito importante para nós.

Informamos que para melhor atendê-lo, todo o suporte, referente ao tema, será realizado exclusivamente via e-mail. Precisando de algum auxílio, basta clicar aqui e será redirecionado para a nossa página de suporte. Lá você poderá esclarecer dúvidas rapidamente em um dos nossos vários tópicos, e se ainda precisar, abrir um chamado conosco.

Caso precise de algum suporte relacionado à plataforma Tray, entre em contato diretamente com eles clicando aqui.

Aproveite e de uma olhada também na Central de Atendimento da Tray. Lá você encontra diversos artigos e instruções de como configurar a sua loja. No decorrer desse manual você irá encontrar links para essa central com mais conteúdos a respeito do tópico abordado. Tudo isso para te ajudar.

Aproveite todos os recursos que você pode ter e configure uma loja completa para seus clientes!

Neste manual vamos apresentar todas as configurações necessárias que precisam ser feitas dentro do painel administrativo da sua loja para que o tema seja completamente instalado.

Leia todo o conteúdo dessa documentação e siga os passo-a-passos para que seu tema seja instalado e configurado corretamente na sua loja. O tema foi desenvolvimento levando em consideração uma composição de layout pré-determinado. Ao final dessa documentação você conseguirá configurar e deixar o tema na sua loja como foi apresentado no momento da aquisição.

O conteúdo deste manual e suas instruções se aplicam a todos os temas que compõe a Coleção de Temas Convert. Você pode acessar os temas que fazem parte dessa coleção através dos links da lista abaixo:

Caso ainda não tenha adquirido um tema da Netzee que compõe essa coleção, você pode compra-lo através deste link: Comprar tema

Instalação

Ao adquirir um novo tema com a Tray, ele é disponibilizado na sua loja em questões de minutos. A partir desse momento o tema é seu e você poderá fazer qualquer modificação que desejar. Porém, apesar do tema estar instalado, ele ainda não está visível ao seus clientes, ou seja, ele não está publicado. A tray faz isso para que você possa editar o que precisar e deixar do seu jeito, sem que atrapalhe a sua loja, caso ela já esteja ativa e online.

Para encontrar os temas adquiridos basta ir em Minha Loja > Design da Loja. Nessa seção você irá encontrar todos os temas já instalados na sua loja, visualizar qual tema está publicado e quais estão disponíveis para publicação, visualizar uma prévia de um dos temas que possui, e ainda fazer edições no seus temas. Esses últimos pontos veremos mais adiante.

Vamos, então, publicar seu novo tema. Para isso é muito simples. Basta localizar o tema recém comprado e clicar no botão Publicar. O processo a partir desse ponto será automático. O tema estará publicado em questões de minutos, mas pode demorar até 1 hora para que todas as página sejam visualizadas com o nosso estilo.

E não se preocupe, todos as personalizações e alterações que você fez no seu tema antigo ainda estarão disponíveis nessa mesma página, na parte de Temas Instalados e não publicados.

Painel do Tema

Comprometidos em entregar sempre o que existe de melhor para você e sua loja, esse tema inclui um painel melhorado. Baseado no melhor painel de temas já desenvolvido pela Netzee, essa nova versão conta com um design mais clean e minimalista, mantendo tudo de bom que nossos cliente adoram, e adicionando novos recursos que trarão mais opções de personalização e confiabilidade.

Essa é a nova cara do painel da Coleção de Temas Convert.

Cada uma das seções desse painel estarão disponíveis dentro do tema adquirido. Para isso basta acessar Minha Loja > Design da Loja e no tema comprado selecionar Editar Tema.

O painel constituiu de três áreas principais:

  • Cabeçalho: Inclui links úteis para essa documentação, vídeos explicativos, suporte da Netzee e sugestões, além do link de pré-visualização e o botão para publicar o tema. Esse último item só aparece se o tema não estiver publicado.
  • Abas: As abas separam as seções dos painel do tema para que tudo fique mais organizado e fácil de ser encontrado. Uma aba ativa fica com as cores dos ícones e texto mais vivida, se comparado a uma inativa, além da borda inferior azul.
  • Conteúdo: Destacado pelo retângulo azul na imagem a seguir, a área do conteúdo exibe os dados e opções que cada aba fornece e que poderão ser editado por você. Uma parte importante dentro dessa área é a barra lateral, que possuem os grupos no qual as configurações estão agrupadas.

Lembre-se: a qualquer momento você pode salvar as alterações feitas clicando no botão Salvar na parte de baixo do painel. Recomendamos que salve com certa frequência e não deixe a janela parada sem nenhuma interação por muito tempo, visto que isso pode invalidar a sessão, ocasionando em perca das configurações não salvas.

A aba Minha Loja contém as informações básicas da sua loja, como telefone, redes sociais, e a logo da sua marca.


Informações de contato

Neste grupo você poderá preencher as informações básicas de contato da sua loja. Veja o que cada campo significa abaixo:

  • Telefone 1: Telefone principal de contato que é exibido no rodapé e nas informações de ajuda.
  • Telefone 2: Telefone secundário de contato que é exibido no rodapé e nas informações de ajuda.
  • Whatsapp: Número do WhatsApp que é exibido na loja e usado no WhatsApp flutuante.
  • E-mail: E-mail principal de contato que será exibido no rodapé da loja.
  • Iframe Mapa: Campo para inserção do código do Google maps, de modo a exibi-lo na página de contato. Saiba mais sobre isso clicando aqui.
  • Botão de atendimento via WhatsApp: Ao ativar essa opção, um botão flutuante do WhatsApp passa a ser exibido na loja.
  • Qual o lado que o botão de atendimento via WhatsApp será exibido? Define o lado da tela que o WhatsApp flutuante será exibido, podendo ser configurado a esquerda ou a direita. Precisa que a opção acima esteja ativada para aparecer.

Logo da loja

Neste grupo você conseguirá fazer o upload da imagem que quer usar como o logo da sua loja. Essa imagem será utilizada tanto no cabeçalho quanto no rodapé da loja. Recomendamos colocar uma imagem que tenha um bom contraste com o fundo, para que seja de fácil visualização.

Você também poderá cadastrar a logotipo que será exibida no rodapé e no menu da versão mobile.

Atenção!

Não insira imagens que contenham espaço, letras maiúsculas, caracteres especiais ou hífen, pois esses caracteres fazem com que as imagens não sejam carregadas corretamente na plataforma. Caso tenha dúvida de como nomear sua logo, utilize esta ferramenta para gerar um nome compatível com a plataforma.


Redes Sociais

Neste grupo você poderá informar as redes sociais da sua loja. Caso não queira utilizar alguma das opções abaixo, basta deixar o campo sem preencher e ele não será exibido na loja. Lembre-se de colocar apenas o nome de seu perfil, e não o link completo. Por exemplo, para inserir o instagram da Netzee, que é https://www.instagram.com/agencianetzee, você irá copiar apenas o nome o perfil agencianetzee.

  • Instagram
  • Facebook
  • Twitter
  • Pinterest
  • Linkedin
  • Youtube

A aba Cores permite você personalizar várias variáveis de cores que controlam vários aspectos do seu tema, como cor dos títulos, cor do fundo da loja, cor do texto e muito mais. Você pode deixar o tema com a cara da sua empresa. Caso queira fazer testes mas sem que isso reflita para os clientes da sua loja, basta duplicar e fazer as edições no tema duplicado.

As variáveis de cores são especificadas no formato hexadecimal, muito utilizado na internet. Você poder fornecer o código no campo, ou clicar na caixa ao lado do campo para abrir o selector de cor. Ao clicar numa cor o seletor de cor irá preencher com o código hexadecimal equivalente a cor escolhida. A imagem abaixo da um exemplo desse processo.

As cores são dividias em grupos menores para facilitar a organização e localização delas. Os grupos estão listados abaixo. Clique sobre cada um para visualizar as variáveis de cores pertencentes aquele grupo.

Cor principal: Cor predominante na loja, será utilizada em cores de links e textos em páginas internas

Cor secundária: Será utilizada em títulos de modal e de filtros na loja.

Cor dos textos: Cor dos textos na loja.

Cor das descrições: Cor utilizada para descrições de produto, páginas adicionais e textos em geral na loja.

Cor principal dos botões: Cores dos botões ao passar o mouse sobre o mesmo.

Cor do texto nos botões: Cores dos textos utilizados nos botões na loja

Cor de fundo: Cor do background da loja.

Cor das bordas: Cor das bordas utilizadas nas páginas internas.

Cor dos campos: Cor de fundo dos campos de texto na loja.

Cor do texto nos campos: Cor do texto nos campos na loja.

Cor da borda nos campos: Cor da borda nos campos da loja.

Cor de fundo: Cor de fundo do topo.

Cor primária da borda

Cor secundária da borda

Cor dos ícones: Cor dos ícones exibidos no topo.

Cor dos textos: Cor dos textos exibidos dentro do topo da loja.

Cor dos links hover: Cor do texto ao passar o mouse sobre os links de ajuda, minha conta e carrinho.

Cor do ícone busca

Cor do texto do campo busca

Cor de fundo do campo busca

Cor do fundo de quantidade do carrinho

Cor do número da quantidade do carrinho

Cor de fundo submenus: Cor de fundo nos sub menus de rastreio, minha conta e lista de categorias

Cor barra de categorias: Primeira cor utilizada no gradiente da barra de categorias.

Cor dos títulos das categorias: Cor dos títulos dentro barra de categorias principais.

Cor dos títulos das subcategorias: Cor dos títulos no submenu.

Cor da borda do título da subcateria: Cor da borda dentro do submenu.

Cor do texto rastreio

Cor primária de fundo rastreio

Cor secundária de fundo rastreio

Fundo do banner full: Cor de fundo que fica atrás do banner full.

Cor dos círculos: Cor dos círculos exbidos abaixo do banner full.

Texto principal Régua Fio: Cor da primeira linha ao lado do ícone.

Texto secundário régua fio: Cor da segunda linha ao lado do ícone.

Cor do título: Cor do título acima da listagem de produtos e na página interna das informações do produto.

Cor da borda no título: Cor da borda abaixo do título da vitrine.

Cor da tag desconto: Cor da tag da informação com a porcentagem de desconto.

Cor da tag frete grátis: Cor da tag nos produtos com regra de frete grátis.

Cor da tag lançamento: Cor da tag nos produtos marcado como lançamento.

Cor da tag destaque: Cor da tag nos produtos marcado como destaque.

Cor do texto das tags: Cor dos textos na tags do produto.

Cor das setas slides: Cor da seta utilizada para passar os slides.

Cor primária do botão: Cor do comprar e mais detalhes na listagem de produto.

Cor secundária do botão: Cor do comprar e mais detalhes na listagem de produto ao passar o mouse sobre o mesmo.

Cor do preço: Cor do preço exibido acima das formas de pagamento.

Cor dos textos: Cor do título do produto e formas de pagameno.

Cor das formas de pagamento: Cor dos preços e informações das formas de pagamento em destaque.

Cor de fundo: Cor de fundo do bloco de produtos na listagem.

Cor primária de fundi bloco: Cor de fundo vitrine de produtos e categoria.

Cor secundária de fundo bloco: Cor de fundo vitrine de produtos e categoria.

Cor do título bloco: Cor do título da vitrine com banner.

Cor da borda bloco: Cor da borda abaixo do título na vitrine com banner.

Cor do título: Cor do título na página interna do produto.

Cor de fundo tags: Cor de fundo das tags novidades e produto em destaque.

Cor do preço: Cor do preço em destaque.

Cor das formas de pagamento

Cor de fundo comprar produto: Cor de fundo na área onde é exibido o botão comprar, preços e variações.

Campo quantidade: Cor de fundo do campo de quantidade

Cor da borda: Cor da borda da quantidade e variações.

Cor da variação selecionada

Cor do ícone checado: Cor da borda da variação selecionada.

Cor do texto botão comprar

Cor primária do botão comprar

Cor secundária do botão comprar

Cor do texto campo de frete

Cor de fundo campo de frete

Cor primária do botão calcular frete

Cor secundária do botão calcular frete

Texto botão calcular frete

Cor de fundo depoimentos: Cor de fundo do box de depoimentos

Cor do texto

Cor do título

Cor do fundo: Cor de fundo das notícias.

Cor do título

Cor da descrição

Cor primária do botão: Cor do botão no bloco de listagem.

Cor secundária do botão: Cor do botão no bloco de listagem.

Cor do texto no botão

Cor primária do fundo: Cor de fundo do rodapé da página.

Cor secundária do fundo: Cor de fundo do rodapé da página.

Cor borda rodapé: Cor da borda acima da newsletter.

Cor dos textos newsletter: Cor do ícone e texto ao lado do campo de e-mail.

Cor do campo de-email

Cor do texto campo de e-mail

Cor dos títulos: Cor dos títulos das informações.

Cor dos textos: Cor do texto nas listagens de links e informações de contato.

Cor dos links hover: Cor dos links listagens ao passar o mouse sobre o mesmo.

Cor dos ícones

Cor do círculo redes sociais

Cor do círculo redes sociais ao passar o mouse

Cor dos ícones das redes sociais

Cor da barra: Cor da barra no final da página com informações da loja.

Cor primária de Fundo

Cor secundária de fundo

Cor dos textos

Cor de fundo

Cor dod textos

A aba Banners permite fazer ajustes das configurações do banner principal, o Banner Home. Disponibilizamos para você também os banners utilizados, capa do tema e gabarito para te ajudar a configurar e deixar sua loja bem legal. Acesse os arquivos clicando aqui.

Configurações do slide

  • Deseja pausar o slide? define se a transição do slide será pausada quando o ponteiro do mouse do usuário estiver sobre o banner.
  • Efeito fade na transição de banners: Ao habilitar essa opção muda-se o modo da transição entre os banners. Ao invés do efeito de deslizar para o lado, o efeito de desaparecer gradualmente será usado.
  • Tempo de permanência do slide: Define o tempo que cada banner será exibido na tela.

A aba Layout representa uma das mais importantes. Será através dela que você poderá controlar diversos comportamentos dos blocos do seu tema. Desenvolvemos opções claras para facilitar a utilização e dar bastante poder de personalização.

Para organizar melhor e transmitir com clareza onde as configurações são aplicadas, dividimos as configurações em grupos menores. Os grupos estão listados abaixo. Clique sobre cada um para visualizar as informações.


Topo da loja sobrepondo o banner full

Exibir o topo da loja sobre o banner full na página inicial.

Exibir Notícias na página inicial?
Exibir a lista de notícias cadastradas na loja, o recurso também deve estar habilitado no painel e com cadastros para serem exibidos.

Exibir depoimentos de clientes na página inicial
Exibir depoimentos aprovados, o recurso também deve estar habilitado no painel e com cadastros para serem exibidos.

Exibir avaliações nos produtos?
Exibir estrelas referente as avaliações do produto.

Exibir o campo de rastreio dos correios no topo

Exibir o campo de código de rastreio na barra superior da loja.

  • Correios: Rastreio feito diretamente no site dos correios. Funciona somente com encomendas despachadas pelos correios.
  • Muambator: O rastreio é feito através da plataforma Muambator, um aplicativo muito conhecido e utilizado para rastrear encomendas das Correios. Funciona somente com encomendas despachadas pelos correios.
  • Vai chegar: O Vai Chegar é outra excelente plataforma de rastreio, que permite rastrear não somente as encomendas despachadas pelos correios como também pela transportadora Jadlog.
  • Rastreie: O Rastreio é uma das opções mais completas, pois permite rastrear encomendas de diversas transportadoras e agências, não somente do Brasil.

Esse grupo possui as configurações para o menu principal do tema, exibido no topo da loja, abaixo do campo de pesquisa.

Exibir ícones no menu de categorias: Habilite essa opção e os ícones cadastrados em cada categoria serão exibidos. Eles ficarão a esquerda do nome da categoria. Para esse recurso funcionar é necessário ter o aplicativo Imagens na Categoria e Subcategoria instalado. Saiba mais sobre o aplicativo clicando aqui.

Exibir ícones no menu de categorias na parte superior: Habilite essa opção e os ícones das categorias aparecerão acima do nome da categoria, ao invés do lado esquerdo. Precisa que a opção anterior esteja habilitada.

Exibir filtro lateral na página de catálogo: Exibir coluna lateral na página de busca e catálogo.

Exibir opção de mais categorias no menu superior: Habilite essa opção se tiver muitas categorias no menu de categorias e quiser criar um menu adicionar para colocar as que não couberem. Você pode ordenar as categorias através do painel administrativo da Tray indo em Produtos > Categorias. Existem três configurações relacionadas:

  • Quantidade de categorias a serem exibidas no topo: Define quantas categorias serão exibidas antes que o menu de mais categorias seja exibido. Caso o número de categorias seja inferior a esse número, o menu de mais categorias não será exibido.
  • Ícone de mais categorias: Ícone que será utilizado no menu de mais categorias. Essa imagem somente será utilizada caso a opção Exibir ícones no menu de categorias também esteja habilitada.

Escolha o tipo de exibição para "Mais categorias": Permite configurar o modo de exibição do menu de categorias. Existem duas opções:

  • Exibir Menu de categorias com 1 nível: Somente as subcategorias diretas da categoria principal ativa em questão serão exibidas. Elas serão exibidas em colunas, uma abaixo da outra.
  • Exibir Menu de categorias com 2 níveis: Serão exibidos as subcategorias e as subcategorias das subcategorias (terceiro nível). Uma das subcategorias das categorias principais não tenham subcategorias (terceiro nível), a exibição do menu será a mesma da opção de 1 nível. O menu de mais categorias sempre será exibido no formato de 1 nível.

Exibir produto dentro do menu: Habilite essa opção para mostrar produtos dentro do menu de categorias. O produto será sempre exibido no segundo nível (subcategorias). Existem duas configurações para essa opção:

Esse grupo configura o funcionamento das vitrines de produtos na página inicial da sua loja

Exibir tags na listagem de produto: Referente a exibição das tags de desconto, destaque, lançamento e selo adicional que são habilitas ou desabilitadas na página de cadastro do produto.

Exibir produtos randômicos: Exibir produtos randômicos na listagem de produtos, lembrando que a um intervalo de tempo para que seja exibido outros produtos.

Exibir segunda imagem ao passar o mouse sobre o produto: Caso tenha mais de uma imagem cadastrada no produto será exibido a segunda imagem ao passar o mouse sobre o produto

Compra rápida: Habilite essa opção e o cliente da loja conseguirá adicionar produtos diretamente da página inicial ou de categorias, sem ter que ir para a página do produto. Produtos com variação não usufruem dessa funcionalidade e o cliente será redirecionado para a página do produto. Você poderá também configurar os dizeres do botão através do campo Título do botão.

Compra rápida mobile Exibir o botão comprar e as variações na listagem de produtos na versão mobile. Ao ativar a compra rápida no mobile, somente uma coluna de produto será exibida. Não é possível ter a compra rápida no mobile junto com duas colunas de produto. Caso queira deixar duas colunas de produtos, deixe essa opção desmarcada.

Como deseja exibir a vitrine de produtos? Essa configuração modifica o modo de exibição das vitrines de produtos. Você pode configurar de duas formas:

  • Exibir vitrine em carrossel de produtos: Os produtos serão exibidos em uma única linha no formato de carrossel. Setas aparecerão no desktop para indicar que existem mais produtos naquela vitrine, enquanto que no mobile indicadores aparecerão logo abaixo da vitrine.
  • Exibir vitrine em grade de produtos: Os produtos serão exibidos em uma grade, com quatro produtos por linha. A quantidade de produtos a ser exibido será definida pra vitrine.

Formato das imagens na listagem de produtos: Modifica o modo de exibição da imagem nas vitrines e nas páginas de categorias. Somente a exibição é modificada. As imagens não serão modificadas. Recomendamos sempre cadastrar imagens quadradas de no mínimo 1000x1000 pixels.

  • Exibir imagem de produto quad\rada: A largura e a altura do box da imagem do produto serão iguais.
  • Exibir imagem de produto vertical: O box da imagem do produto terá altura maior que a largura, de modo que produtos com imagem mais vertical tenham a exibição melhorada.
  • Exibir imagem de produto horizontal: O box da imagem do produto terá largura maior que a altura. Ideal para exibir produtos mais largos, como uma televisão.
Considerações Importantes

  • A imagem do meu produto na vitrine está menor do que no tema demonstrativo, o que fazer?
  • Não se preocupe! Para resolver essa questão basta entrar em contato com a Tray pedindo o aumento da Thumb 180 para o tamanho correto de sua loja. Acesse a seção chamada Tamanho da Imagem na Vitrine deste manual e encontre o valor correto.

Informe o título da primeira vitrine de produtos Essa função permite que você coloque um título da vitrine de produtos em com a tag de lançamento e escolha quantos produtos serão mostrados: 4, 8, 12 ou 16.

Informe o título da segunda vitrine de produtos Essa função permite que você coloque um título da vitrine de produtos mais vendidos e escolha quantos produtos serão mostrados: 4, 8, 12 ou 16.

Informe o título da terceira vitrine de produtos Essa função permite que você coloque um título da vitrine de produtos com a tag de destaque e escolha quantos produtos serão mostrados: 4, 8, 12 ou 16.

Insira a imagem para ser exibida de background na segunda vitrine de produtos: Aqui você pode escolher uma imagem para aparecer ao fundo da segunda vitrine de produtos.

Exibir ícones padrão do tema?: Quando ligada, esta função exibe o ícones padrão do tema adquirido.

Este grupo contém campos para que você insira um ícone personalizado no topo da sua loja

    Ícone da Minha conta: você pode inserir um ícone para minha conta.

    Ícone do Carrinho de compras: você pode inserir um ícone para o carrinho de compras.

    Ícone da Central de Atendimento: você pode inserir um ícone para a central de atendimento.

Alterar o textos do topo: nesta função você pode alterar os textos de "Atendimento" e "Minha Conta" no topo da loja.

Esse grupo permite configurar as informações que serão exibidas em um bloco logo abaixo do banner home. Você poderá cadastrar até 3 blocos de informações e ícone correspondente e poderá modificar a ordenação arrastando dos blocos. Caso algum não seja preenchido ele não será exibido na loja.

Exibir Régua Fio: Habilita ou desabilita o recurso na loja.

Cada bloco possui três informações que podem ser configuradas:

  • Ícone: Define qual ícone será mostrado ao lado das informações.
  • Título Principal: Define o texto mais destacado no bloco e o que terá sua cor realçada.
  • Texto secundário: Define informações secundárias que aparecem abaixo do título principal.

Esse grupo contém as configurações da exibição do formulário de newsletter na página inicial.

Exibir newsletter: Habilita ou desabilita o recurso na página inicial

Título: Título principal do bloco da newsletter

Subtítulo: Texto exibido logo após o título. O tema utiliza como uma continuação do titulo nas configurações padrões.

Texto campo de e-mail: Texto que será exibido no campo do formulário de e-mail.

Esse grupo permite configurar a exibição de alguns elementos nas páginas dos produtos.

Exibir ficha técnica na interna do produto: Exibe uma nova aba na página do produto contendo várias informações técnicas do produto. O título da aba pode ser configurado através do campo Título logo abaixo dessa opção.

Exibir produtos relacionados: Habilita ou desabilita o recurso de produtos relacionados na página do produto. Esse recurso precisa estar habilitado na plataforma para que funcione corretamente. O título do bloco pode ser configurado através do campo Título logo abaixo dessa opção.

Esse grupo permite configurar a exibição da popup de Newsletter, tal como comportamento, imagem e textos

    Exibir popup de newsletter da loja: Habilita ou desabilita popup e permite escolher o comportamento.

      Exibir ao carregar a página

      Exibir ao tentar sair da página

      Exibir após 20 segundos de permanência na página

    Título: permite alterar o título da newsletter popup

    Subtítulo: permite alterar o subtítulo da newsletter.

    Texto do campo Título: permite alterar o texto co campo.

    Texto do campo subtitulo: permite alterar o texto do campo.

Esta função permite inserir uma imagem no rodapé da loja como textura

A imagem inserida deve ser no formato PNG e possuir 420x400 pixels.

Configurações

A Coleção de Temas Convert personaliza quase que totalmente os elementos visuais da sua loja. Porém alguns deles são vinculados através da plataforma. Para personalizar tais imagens é muito simples, basta acessar Minha Loja > Design da Loja > Editar Imagens Padrões. Esse opção está disponível somente para o tema publicado. É possível inserir / alterar botões do checkout, favicon, entre outros.

Ao acessar o caminho mencionado você visualizará a tela abaixo. A tabela exibida conta com as seguintes colunas

  • Nome da imagem
  • Descrição do local onde é utilizado
  • Prévia da imagem inserida
  • Botões de ação

O botão com um lápis serve para editar ou inserir uma imagem para aquele determinado local. O botão com um x permite remover a imagem padrão ou previamente cadastrada.

Lembre-se: a imagem da sua logo deve ser cadastrada dentro do painel do tema, como visto na seção anterior Minha Loja.

Esse tema possui a funcionalidade de mostrar a imagem do produto de três maneiras diferentes: quadrada, vertical e horizontal. O tamanho da imagem não é afetado, apenas como ela é exibida para o seu cliente.

Nós utilizamos uma configuração padrão da Tray chamada Thumb do produto. A plataforma possui quatro tamanhos de thumbs para serem utilizados pelo tema. O que nós utilizamos na listagem é a thumb 180. Porém para deixar as imagens dos produtos mais chamativas na listagem nós usamos nessa chamada uma tamanho maior.

Para que na sua loja o tema se comporte do mesmo modo é necessário pedir o aumento da thumb 180 para a Tray. O tamanho que o tema utiliza é 380x380 pixels.

Entre em contato com a Tray solicitando esse aumento clicando aqui.

A Coleção de Temas Convert utiliza uma variável de texto que precisa ser configurada na sua loja. A variável em questão é a ag_mensagem_rodapé. Ela configura o texto que será exibido no rodapé da sua loja com as informações legais.

Para configurar essa variável basta acessar Configurações > Textos/Lang como mostra a imagem abaixo.

Toda loja conta com páginas relacionadas a operação e a empresa. São páginas com conteúdo fixo, diferente da página principal, página de produtos, categorias, carrinho e painel do cliente. Algumas páginas extras comuns em lojas são: Sobre a Empresa, Segurança, Como Comprar, Pagamento e Envio. Essas páginas podem ser configuradas acessando Minha Loja > Páginas da Loja.

Você poderá alterar as informações cadastradas para cada uma das páginas, cadastrar novas páginas de acordo com sua necessidade, alterar o caminho que o usuário irá usar pra ver as informações no navegador, desativar uma página que já não é mais necessária, ou ainda excluir alguma página que não tem mais utilidade.

Essas páginas serão listadas no rodapé da loja. Para saber mais sobre essa funcionalidade da plataforma, clique aqui.

Outra parte importante de todas as lojas são as Formas de Pagamento. Cartão de Crédito, Débito em conta e boleto bancário são as mais utilizadas hoje em dia por dezenas de lojas. Para configurar as formas de pagamento que serão aceitas pela sua loja acesse Configurações > Formas de Pagamento.

Atenção

A Tray disponibiliza vários intermediadores de pagamentos em sua plataforma. Alguns desses intermediadores necessitam de uma contratação prévia. Caso precise de mais ajuda para configurar formas de pagamento na sua loja, clique aqui acessar um artigo da Tray que trata exatamente dessa questão.

Banners

Um elemento que chama muita atenção nas lojas são os banners. Eles podem possuir diversões tamanhos e composições, mas agradam por trazer um trabalho gráfico mais elaborado. Nosso tema utiliza-os em posições estratégicas. Os banners podem ser cadastrados no painel administrativo acessando Marketing > Banners da Loja.

Para te ajudar, criamos banners bem bacanas, alguns editáveis, além de um gabarito certinho para você seguir. Acesse esses arquivos clicando aqui. Aproveite! :)

Foram utilizados nesse tema as seguintes localizações:

  • Banners Home: representa os banners principais da loja. Utiliza as variáveis extra1 e home para exibir os banners para dispositivos móveis e desktop respectivamente.
  • Banners Grid: são banners exibidos lado a lado no site. Utiliza a variável extra2 e extra3 para exibí-los no desktop e são responsivos para mobile.
  • Banners Line: são banners que ocupam toda a largura do site. Utiliza a variável extra7 para desktop e a variável extra8 para mobile.
  • Banner de vitrine em destaque: é um banner que aparece junto com a terceira vitrine. Utiliza a variável extra4 para desktop e a variável extra5 para mobile.

Tenha atenção especial ao Banner Home no momento do cadastro, pois é necessário marcar a opção Deseja cadastrar banner Javascript como sim para que mais do que um banner apareça na página inicial da loja.

Atenção

Os banners precisam estar nomeados corretamente, caso contrário a plataforma não conseguirá reconhecer. Utilize essa ferramenta para gerar nomes dos arquivos compatíveis com a plataforma.

Vale lembrar que esses são os banners que foram utilizados nesse tema. Outras posições não são abrangidas pelo tema. Caso queira utilizar outras posições entre em contato conosco. A alteração será feita mediante orçamento e acordo com você.

Os banners utilizados nesse tema possuem tamanhos diferentes dependendo da localização deles no tema. Para que as imagens fiquem legais e bem dispostas é necessário ficar atento as dimensões dessas imagens. Veja abaixo cada localização que utilizamos e a dimensão recomendada.

Banner Home Desktop: 1920x796 pixels. (banner home)


Banner Home Mobile: 425x656 pixels. (extra1)


Banners Grid 1: 664x420 pixels. (extra2)

Você deve cadastrar como banner rotativo e adicionar duas imagens. Este banner é responsivo para dispositivos móveis e aparecem em formato vertical.


Banners Grid 2: 436x640 pixels. (extra3)

Você deve cadastrar como banner rotativo e cadastrar 3 imagens. Este banner é responsivo para dispositivos móveis e aparecem em formato vertical.


Banner Line Desktop: 1348x340 pixels. (extra7)


Banner Line Mobile: 340x190 pixels. (extra8)


Banner de vitrine em destaque: 892x914 pixels. (extra4)


Banner de vitrine em destaque mobile: 425x400 pivels. (extra5)

Através dos gabaritos do tema disponibilizados para versão desktop e mobile, é possível ter acesso as informações relacionadas aos banners de uma forma visual mais fácil e prática. Neles estão presentes as informações relacionadas as posições e dimensões específicas de cada banner que compõe o layout desenvolvido para este tema.

Os banners que aparecem com a descrição "Responsivo" no gabarito da versão mobile, são os que devem ser cadastrados seguindo as orientações para versão desktop, pois eles se tornam responsivos quando visualizados em aparelhos mobile.

Iconografia

A plataforma de e-commerce da Tray possui vários aplicativos, sendo alguns pagos e outros gratuitos. Um aplicativo gratuito que pensamos durante a criação do tema foi o Imagens na Categoria e Subcategoria. Com ele é possível adicionar ícones as categorias, deixando-as muito mais atraentes.

Antes de mais nada você precisará instalar esse aplicativo na sua loja. Para isso basta visitar a página do aplicativo clicando aqui, localizar o botão Instalar Aplicativo, clicar nele e seguir as instruções que aparecerem.

Após realizar a instalação, acesse Meus Aplicativos > Imagem na Categoria e Subcategoria e insira imagens para cada categoria que desejar. O tamanho máximo que recomendado é 75x65 pixel. Na loja ele será exibido em um box com a metade do tamanho. Recomendamos o dobro do tamanho para que as imagens tenham a melhor qualidade em qualquer dispositivo.

Você pode utilizar qualquer ícone que desejar que se enquadre nessa medidas. Nós da Netzee já fizemos um seleção especial para você. Você pode conferir tudo clicando clicando aqui.

Aplicativos Parceiros

O Bling é o sistema de gestão online que descomplica o seu negócio, facilita a emissão de notas fiscais e boletos, realiza integrações com as principais plataformas de ecommerce, marketplaces, e muito mais.
A parceria com a Netzee te concede 03 meses grátis no Bling!

Como ter acesso aos 03 meses grátis no Bling ?

Basta acessar, clicando: aqui, e dizer que possui o cupom de desconto: #netzee e aguardar os próximos passos :)

Você pode conferir sobre as funcionalidades do Bling, clicando aqui.

O Enviou é uma plataforma de vendas para e-commerce que oferece serviços como: envio de e-mail marketing, recuperador de carrinhos abandonados, criador de newsletter e aniversariantes do dia.
A parceria com a Netzee te concede 30% de desconto na primeira mensalidade do plano contratado!

Como ter acesso ao desconto?

Basta abrir um chamado conosco, clicando aqui, e informar que deseja esse desconto através do cupom: NETZEE30 e que a compra já foi aprovada.

Você pode conferir sobre as funcionalidades do Enviou, através dos links abaixo:

A Cartstack é uma ferramenta de recuperação de carrinho abandonado, e-mails personalizados, teste A/B, insere produtos dinamicamente nos e-mails personalizados, entre outras funcionalidades.
A parceria com a Netzee te concede de 10% a 20% de desconto dependendo do plano!

Como ter acesso ao desconto?

Basta acessar, clicando aqui, dizer que é cliente da Netzee e informar sobre o desconto, logo após esse processo, basta aguardar o contato da equipe :)

Você pode conferir sobre as funcionalidades da Cartstack clicando aqui.

A ComSchool é uma plataforma que oferece Cursos de Marketing Digital e E-commerce.
A parceria com a Netzee te concede de 20% de desconto !

Como ter acesso ao desconto?

Basta acessar aqui, dizer que é cliente da Netzee e informar sobre o desconto, logo após esse processo, basta aguardar o contato da equipe :)

Você pode conferir sobre os cursos de e-commerce disponíveis na ComSchool clicando aqui.

O JivoChat é um aplicativo grátis de comunicação interna e atendimento ao cliente para monitorar visitantes através de chat online, Facebook Messenger, Telefone e e-mail em tempo real.

Os operadores poderão responder todos os chats, e-mails e ligações através de um só app do JivoChat. A ferramenta possui um plano gratuito com diversos recursos como: software completamente em português, aplicativos para Desktop, Mobile e Navegador versão mobile para celulares, suporte 24 horas por dia em Português e Histórico de conversas dos últimos 2 meses.

Para acessar e conhecer mais sobre o JivoChat clique aqui.

Edição do Código

Atenção!

Recomendamos criar uma cópia de segurança antes de editar os códigos HTML e CSS do seu tema. Assim, caso aconteça algum problema você poderá retornar rapidamente a um tema funcional.

Vale lembrar que a Netzee não se responsabiliza por problemas gerados devido a edição do código

Somente edite o código do seu tema se tiver conhecimentos avançados em HTML, CSS e JS, caso contrário o tema poderá parar de funcionar na sua loja.

Nós criamos um tema com diversas personalizações através do painel do tema e do painel administrativo da Tray, de modo a facilitar o controle da sua loja. Entretanto entendemos que você possa querer modificar as coisas um pouco mais afundo. É isso que vamos te explicar nessa seção.

Para fazer qualquer modificação mais complexa no seu tema será necessário que ele não esteja publicado. Mas não se preocupe, você não precisa tirar a loja do ar. Basta duplicar o tema. Caso o seu tema não esteja publicado ainda, você poderá fazer as alterações sem a necessidade de duplicar o tema, apesar de recomendarmos duplicá-lo.

Para isso Minha Loja > Design da Loja, no seu tema clique na setinha apontando para baixo e clique em Duplicar. Você poderá editar nome depois caso queira.

Após duplicar o tema você terá acesso a uma nova opção chamada Editar HTML. Será através dela que você terá acesso ao editor online da plataforma para fazer as edições.

Você poderá editar qualquer arquivo no editor de arquivos que aparecer, desde que tenha conhecimento para tal. Recomendamos que só altere os arquivos style.css e style.min.css que controlam os estilos do tema.

No editor online os arquivos ficam a esquerda da janela de exibição em lista. Os arquivos css mencionados acima estarão dentro da pasta css. Ao clicar em algum arquivo, ele será carregado na parte mais a direita da tela. A imagem abaixo exemplifica isso.

Faça as alterações que quiser e salve utilizando o botão abaixo. Para que as modificações sejam refletidas na loja é necessário atualizar o arquivo css minificado, o style.min.css. Copie todo o código do arquivo style.css e utilize uma ferramenta de minificação de css. Recomendamos a ferramenta CSS Minifier. Você pode acessar ela clicando aqui.

Copie o código minificado gerado pela ferramente e cole no arquivo style.min.css sobrescrevendo todo o conteúdo já existente. Salve as alterações utilizando o botão salvar.

Após esse procedimento você precisará publicar novamente o tema para que as modificações fiquem disponíveis na loja. Siga os passos vistos na seção Instalação e publicação do seu tema. Pronto. Alterações feitas. Devido ao cache da plataforma, pode demorar até 1 hora para que as alterações sejam aplicadas. Lembre de limpar o cache do seu navegador antes de verificar se as alterações feitas foram aplicadas corretamente.

Considerações Finais

É necessário e de extrema importância que a sua loja possua o Certificado de Segurança SSL (Secure Socket Layer) no domínio principal de sua loja. Caso não conheça, segue um link de um artigo fornecido pela Tray referente a utilização de SSL: CERTIFICADO DE SEGURANÇA SSL - O QUE É? QUAIS BENEFÍCIOS?.

Caso você não tenha o SSL em sua loja, será necessário que você o contrate, pois utilizamos tecnologias em nossos temas que necessitam, para o seu pleno funcionamento, da garantia de segurança que o certificado traz.

Além disso, no decorrer dos próximos meses, grandes navegadores como Google Chrome, Mozilla Firefox e Microsoft Edge começarão a bloquear páginas sem SSL, alertando a todos que tentarem acessar que aquela página não é segura. Saiba mais sobre isso, clicando aqui.

A Tray já processa os pedidos em ambiente seguro com SSL, mesmo que o domínio personalizado não o possua. Repare que ao ir para a finalização do pedido, se o domínio da loja não possui SSL, o commercesuite.com.br é utilizado no lugar do domínio próprio. Isso garante que os dados de seus clientes trafegue em um ambiente seguro.

Nós apreciamos imensamente a opinião do usuário final de nosso tema, ou seja, você! Assim temos como saber exatamente o que podemos melhorar. Por isso, deixe sua sugestão ou ideia do que pode ser feito para que seu tema e manual supra todas as suas necessidades aqui.

Você finalizou todos os passos dessa documentação e seu tema já está configurado e disponível para seus clientes. Desejamos que sua loja decole com nosso tema e que todos os seus clientes apreciem seu novo design.

É um prazer tê-lo como cliente. Caso tenha ficado com alguma dúvida fique a vontade para entrar em contato com o nosso suporte clicando aqui.