Documentação Baby

Manual de instalação e uso do tema Baby

Apresentação

Início

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

Sinta-se a vontade para enviar comentários e sugestões de melhorias para nós, indicando no campo de assunto do e-mail como Comentários e Sugestões Tema Netstore Baby. Clique aqui para nos enviar uma mensagem. Deixe sua avaliação, também, na loja de temas da Tray onde adquiriu esse tema.

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. Se preferir, você também pode acessar nossa base de conhecimento e esclarecer dúvidas rapidamente em um dos nossos vários tópicos. Dá uma olhada lá :)

Agora, caso precise de algum suporte relacionado à plataforma Tray, entre em contato diretamente com eles clicando aqui, para que possa ser esclarecido de forma rápida e assertiva. Na Central de Atendimento da Tray, é encontrado diversos artigos e instruções de como configurar a sua loja através das funcionalidades que a plataforma oferece.

Aproveite todos os recurso 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 NetStore Baby é focado na venda de roupas e acessórios infantis. O tema traz recursos importantes para que o seu cliente tenha a melhor experiência eque a sua loja seja referência no segmento. Adaptado a qualquer tipo de tela, otema Baby é desenvolvido para ter uma navegação otimizada, além de ter umauma interface interativa e dinâmica, focada na usabilidade do consumidor.

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á vísível publicamente ao seus clientes. 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 Netstore Baby e clicar no botão Publicar. O processo a partir desse ponto será automático. Ele pode demorar um tempinho, então não se preocupe. Recomendamos que aguarde cerca de 1 hora para que todo o processo ocorra. Esse tempo é para garantir que nenhum estilo do tema antigo entre em conflito com seu novo tema.

E não se preocupe, todos as customizaçõ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.

Layout

Agora que seu novo tema está ativo, vamos falar um pouco das customizações que você pode fazer. Existem várias alterações que você pode fazer no seu tema. Iremos abordar como realizar cada uma das opções disponíveis e onde elas se encontram.

Nas sessões abaixo iremos esclarecer como aplicar imagens ao tema, como personalizar as cores do layout, componentes padrões do layout adquirido, itens adicionais que podem ser colocados, redes sociais, informações gerais da loja, páginas extras, pagamento, menu principal e menu de marcas.

É possível cadastrar várias imagens dentro do tema que serão utilizadas na sua loja. Para isso é muito simples, basta acessar Minha Loja > Design da Loja > Editar Imagens Padrões. É possível inserir / alterar botões, logotipo, favicon, entre outros.


Depois de clicar em Editar Imagens Padrões, aparecerá a tela de alteração e inserção das imagens.

  • Na primeira coluna se encontra o nome da imagem;
  • Na segunda coluna está uma breve descrição;
  • Na terceira coluna fica uma prévia da imagem que foi inserida;
  • No botão com o ícone de pequeno lápis, é possível trocar a imagem que já está cadastrada e incluir uma nova;
  • No botão com o ícone de um 'X', a imagem é excluída.


Caso não deseje inserir imagens, os botões exibidos serão os padrões da plataforma e alguns já estão com estilização aplicados.

Algo que é muito importante no tema são as cores utilizadas. Elas refletem grande parte da identidade visual da loja. Nós programamos o tema de modo que você possa alterar todas as cores principais utilizadas. Para isso basta acessar Minha Loja > Design da Loja > Editar Tema.



Na seção de Cores e Layout você encontrará todas as cores utilizadas devidamente identificadas, para que você possa encontrar facilmente onde, no tema, aquela cor é usada. Basta clicar na pequena caixinha com a cor para escolher uma no seletor de cores que aparecer. Ou você pode, também, digitar o código hexadecimal referente a cor que deseja usar.



Se precisar de ajudar, visite a ferramenta Html Color Codes para auxiliá-lo nas escolhas das cores clicando aqui.

A Régua Fio é um recurso muito bacana que permite ilustrar pontos estratégicos da loja diretamente no tema, de modo que seu cliente se sinta atraente por algum daqueles pontos. Por exemplo, você quer deixar claro que compras acima de determinado valor terão frete grátis. Colocando essa informação na Régua Fio ela ficará em destaque e será mais facilmente assimilada pelo seu cliente.

Para configurar a Régua Fio, acesse Minha Loja > Design da Loja > Editar Tema e encontre a seção Banner Régua Fio.


Você poderá definir o título e a mensagem que quer que apareça. É possível adicionar até quatro itens na Régua Fio, cada um com um título e mensagem específicos.


Mas fique atento, pois não é possível alterar os ícones utilizados nem colocar links na Régua Fio através dessa opção.

Caso deseje adicionar o banner como imagem é possível pelo painel na opção de banner extra1. Mostraremos como fazer essa configuração na seção de cadastro dos banners.

Observações:

  • Formato da Régua Fio é de 1140x90 pixels.
  • Caso a Régua Fio e o Banner Extra1 estiverem ativos ao mesmo tempo, os dois irão aparecer na loja.

A vitrine de produtos é um recuros muito bacana que permite colocar produtos em destaque na página principal da sua loja. Para configurar a Vitrine, basta acessar Minha Loja > Design da Loja > Editar Tema e procure e seção Vitrine.



Nela podemos inserir o título que desejamos para o bloco de produtos, a quantidade de produtos a ser exibido, exibir possíveis tags de desconto, definir se os produtos desse bloco serão exibidos em um carrossel, ou ainda se queremos que o cliente seja redirecionado diretamente ao carrinho ao clicar sobre o produto.


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 Thumb deste manual e encontre o valor correto.

O tema Netstore Baby vem preparado com alguns itens adicionais bacanas, sendo eles Filtro Inteligente, Depoimentos, Notícias e Menu de Marcas. Esses itens adicionais são configurados acessando Minha Loja > Design da Loja > Editar Tema. Procure por Itens Adicionais e encontrará onde você consegue definir se deseja ou não que tais itens sejam exibidos.


Alguns deles são exibidos na página inicial da sua loja, logo antes do formulário de Newsletter. São eles: Depoimentos, Notícias e Menu de Marcas. O Filtro Inteligente, por sua vez é exibido na lateral esquerda da Página de Catálogo. Desabilitar a opção de Filtro Inteligente fará com que as categorias do site sejam exibidas.

As redes socias são imprescindíveis para manter um contato mais próximo com seu cliente e fidelizá-lo na sua marca. Por isso nós adicionamos essa opção para você colocar todas as suas redes sociais e disponibilizá-las em sua loja.

Basta configurar acessando Minha Loja > Design da Loja > Editar Tema e procurar a seção Redes Sociais. Você pode configurar as seguintes redes sociais: Facebook, Instagram, Twitter, Youtube e Pinterest

Em uma loja existem várias informações que precisam ser cadastradas, como e-mails e telefones. É justamente na seção de Textos/lang que isso é feito. Para configurar esses textos basta acessar Configurações > Textos/Lang.

Os principais utilizados no tema são os ag_telefone_1, ag_telefone_2, ag_email_1, ag_email_2, ag_atendimento e ag_mensagem_rodape. Cada possui um destino e local de exibição específico dentro do tema:

  • ag_telefone_1: Informações sobre telefone fixo / móvel exibidos no cabeçalho e no rodapé da loja.
  • ag_telefone_2: Informação sobre WhatsApp exibida no cabeçalho e no rodapé da loja.
  • ag_email_1: E-mail principal de contato exibido no rodapé da loja.
  • ag_email_2: E-mail secundário de contato exibido no rodapé da loja.
  • ag_atendimento: Horário de atendimento exibido no rodapé da loja.
  • ag_mensagem_rodape: Informações importantes da loja, como informações jurídicas e direitos autorais, exibido no rodapé da loja.


Para saber mais sobre essa funcionalidade da plataforma, acesse esse link.

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 (ex: colocar regras daquela promoção bem bacana que está pensando em fazer), 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, e no caso do tema Netstore Baby, na seção Institucional, ao lado das informações de atendimento da loja.


Para saber mais sobre essa funcionalidade da plataforma, acesse esse link.

Outra parte importate 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 Minha Loja > Formas de Pagamento.

Nosso tema ja é preparado para exibir as formas de pagamento automaticamente no rodapé da loja ao ativar as formas de pagamento. É simples assim. Não tem que fazer mais nenhuma modificação e seus clientes já estarão cientes quais as formas de pagamentos aceitas.

Atenção!

A Tray disponibiliza vários intermediadores de pagamentos em sua plataforma. Para algumas formas de pagamento é necessário uma contratação prévia com esses intermediadores. Caso precise de mais ajuda para configurar formas de pagamento na sua loja, clique aqui para acessar a Base de conhecimento da Tray que trata exatamente dessa questão.

O menu superior de navegação representa uma das principais formas de interação da sua loja. Será através dele que seu cliente navegará pelas diversas categorias presentes. Nosso tema disponibiliza a funcionalidade de Submenus e produtos destacados que aparecerão ao lado das subcategorias, cabendo a você lojista escolhere quando utilizá-lo.

Para que um produto apareça no menu superior é preciso se atentar aos seguintes pontos:

  • Exista pelo menos uma subcategoria cadastrada. Saiba mais;
  • Exista pelo menos um produto atrelado a categoria. Saiba mais;
  • Produto marcado para aparecer como destaque ou lançamento no cadastro do produto. Saiba mais.

Você ainda será capaz de escolher o modo como esse produto será escolhido, podendo ser aleatoriamente ou aqueles que foram mais vendidos, acessando o caminho Minha loja > Design da Loja > Editar Tema , procure pela seção Itens Adicionais e, em seguida, encontre a seção Menu Superior.


Outra informação importante é a presença do "Departamento". O tema tem um limite de categorias a serem exibidas diretamente no Menu Superior. Ao cadastrar mais do que o limite, as demais categorias são expostas dentro do "Departamento". Assim seu site ficará com um layout mais bonito e leve, sem sobrecarga de informações.


Considerações Importantes

  • Ao cadastrar categorias na plataforma, apareceu uma chamada “Departamentos”. O que é?
  • “Departamentos” aloca as categorias que sobram ao chegar no limite de exibição no menu principal. Ao clicar nela, verá as categorias cadastradas que não são expostas no menu. Você pode definir qual irá aparecer no menu e qual será exibida na categoria “departamentos” ordenando os cadastros dentro de sua plataforma. SAIBA MAIS.

O carrossel de marcas é um recurso muito bacana que disponibilizamos junto com o tema. Com ele, uma faixa com todas as marcas disponíveis na sua loja, será apresentada na página inicial, logo após os banners principais. Desse modo, você cria um fluxo direto para o produto que o cliente procura atráves da marca.

Atenção!

Os passos abaixo não podem ser feitos com o tema já publicado. Caso o tema já esteja publicado, será necessário duplicar o tema. Para isso vá em Minha Loja > Design da Loja, encontre o tema Netstore Baby, clique na setinha apontando para baixo e clique em Duplicar.

Para que o carrossel de marcas funcione corretamente é preciso ficar atento a vários pontos. Vamos começar com o cadastro das marcas no painel administrativo. Para isso acesse Produtos > Marcas e Fabricantes. Cadastre as marcas com as quais você irá trabalhar, incluindo o nome e o caminho pelo qual ela será acessada na sa sua loja. Saiba mais.

Fique atento como colocou o nome da marca. Isso será importante mais para frente.

Após cadastrar as marcas dentro do painel administrativo, precisamos cadastrar as logos referente a cada marca. A Tray, infelizmente, não disponibiliza enviar uma imagem ao cadastrar uma marca. Para que tudo fique funcional e atraente, nós iremos cadastrar as marcas como arquivos do tema. Para isso siga os passos abaixo:

  • Acesse Minha Loja > Design da Loja;
  • Encontre o tema Netstore Baby e clique no botão Editar HTML;
  • Na janela que abrir, clique na opção Upload de Arquivos;
  • Na janela que abrir, selecione a pasta img para fazer o upload das imagens das marcas;
  • Selecione as imagens das logos das marcas que deseja enviar e aguarde o término do processo.

Após esse procedimento as imagens serão carregadas automaticamente no carrossel de marcas.

Considerações Importantes

  • As imagens precisam ser no formato .png com fundo transparente para melhor visualização
  • As imagens devem ter tamanho exato de 200x60 pixels
  • As imagens precisam ter o mesmo nome das marcas, seguindo a seguinte regra:
    • Todas as letras devem ser minúsculas;
    • Caso a marca tenha só uma palavra, como por exemplo a marca Nike, o nome da imagem deverá ficar como nike.png;
    • Caso o marca seja composta de duas ou mais palavras, como por exemplo a marca Calvin Klein, o nome da imagem deverá ficar como calvin-klein.png;
    • Caso a marca possua letras com acentuação, elas deverão ter o acento removido, como por exemplo a marca Nestlé, o nome da imagem deverá ficar nestle.png;
    • Caso a marca possua caracteres especias, como ç, deverá ser trocado pela letra equivalente. No caso do ç, o c;
    • Caso a marca possua outros caracteres especias, como & ou ', eles deverão ser trocados por um hiffen. Por exemplo a marca Dolce & Gabbana, o nome da image deverá ficarr como dolce-gabbana.png.
    • Ao salvar a imagem, verifique se ficou como .png minúsculo e não .PNG maiúsculo, pois a plataforma não reconhece o segundo caso.
Caso tenha dúvida, clique aqui e utilize a ferramenta Text Edit Slugify (em inglês) para ajudá-lo.

O filtro inteligente é uma ótima maneira de otimizar a navegação do usuário dentro de sua loja. Aparecendo apenas nas páginas de catálogo de produtos, permite que o usuário procure o ítem de forma mais objetiva, sem precisar passar por produtos que ele não tem interesse, aumentando, assim, o engajamento de seu cliente. Para adicioná-lo, precisará de duas etapas.

Acesse Minha Loja > Design da Loja > Editar Tema e procure por Itens Adicionais. Em seguida localize a seção Filtro Inteligente e deixe a opção sim habilitada. Observação: Caso mantenha essa opção como não, aparecerá apenas um menu de categorias na página de catálogo de produtos.


Em seguida acesse Meus Aplicativos > Instalar Novos Aplicativos e procure por Search Engine (Versão Beta). Instale.

A próxima etapa é a configuração da plataforma. Accesse Configurações > Configuraçõesde busca - Beta e clique em Entendi e desejo ativar. Em seguida selecione as opções, de acordo com o seu seguimento, e salve.



Considerações Importantes

Caso esse procedimento for feito e, ainda assim, não for habilitada a funcionalidade em sua loja, entre em contato conosco.

Nos envie um ticket através desse link.

A sua vitrine é uma das partes mais importantes e influenciadoras em sua loja, portanto, a exibição de seu produto deve estar sempre na melhor forma possível. Por isso, aconselhamos que, após a compra desse tema, entre em contato com a Tray e solicite o aumento da Thumb 180 para 260x260px.

Segue o contato para abertura de chamados: Suporte Tray

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.

Foram utilizados nesse tema banners com as seguintes localizações: Extra1, Extra2, Extra3, Extra4, Banner Home, Extra10. Os banners podem ser cadastrados no painel administrativo acessando Marketing > Banners da Loja.

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 aparece na página inicial da loja.

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 dimenões dessas imagens. Veja abaixo cada localização que utilizamos e a dimensão recomendada.

Full Desktop (Banner Home)
Dimensão: 2000 x 540 pixels


Full Mobile (Extra 10)
Dimensão: 420 x 180 pixels
Caso não cadastre esse banner, o banner Home será exibido também no mobile.


Régua Fio (Extra1)
Dimensão: 1140 x 90 pixels
Observações:

  • Caso não cadastre esse banner, os itens cadastrados no Item adicional Régua Fio serão exibidos.
  • Caso a Régua Fio e o Banner Extra1 estiverem ativos ao mesmo tempo, os dois irão aparecer na loja.


Banners Extras (Extra2, Extra3)
Dimensão: 555 x 525 pixels
Esses banners serão exibidos logo abaixo do Full Desktop (e logo abaixo do carrossel de marcas se tiver habilitado)


Banners Extras (Extra4)
Dimensão: 1140 x 280 pixels
Esse banner será exibidos logo abaixo dos Banner Extras 2 e 2, e acima da seção "Novidades Selecionadas para você" .

Código CSS

Caso você deseje modificar cores que não estão disponíveis via painel, ou ainda se preferir fazer isso editando diretamente os arquivos CSS do tema, você pode. Caso o tema já esteja publicado, será necessário duplicá-lo antes de fazer qualquer alteração.

Para duplicar o tema vá em Minha Loja > Design da Loja, encontre o tema Netstore Baby, clique na setinha apontando para baixo e clique em Duplicar.

Um arquivo CSS contem todo o estilo do tema. Nele são configurados além das cores, grids, botões, responsividade e muito mais. A customização das cores também pode ser feita diretamente via painel, como dito nos tópicos anteriores. Apesar de ser possível alterar qualquer coisa, recomendamos fortemente que altere somente as cores. Qualquer outra mudança pode prejudicar a exibição correta do tema. É importante frisar que as alterações feitas via CSS não são imediatas, ou seja, podem demorar até 15 minutos para aparecerem na loja.

Atenção!

É extremamente recomendado ter conhecimento técnico para editar o CSS do tema. Nós não nos responsabilizamos por quaisquer problemas decorrentes dessas alterações.

Caso não esteja confortável em realizar essa modificações, entre em contato conosco para conversar sobre as alterações que desejaria que fossem feitas clicando aqui.

Para alterar diretamente o CSS acesse Minha Loja > Design da Loja > Editar HTML. Procure a pasta com nome CSS. Dentro dela você irá encontrar um arquivo chamado main.css. Será nesse arquivo que você deverá realizar as alterações que deseja. Recomendamos colocar quaisquer modificações no final desse arquivo, para que elas sobrescrevam os códigos anteriores do tema.

Atenção!

Após realizar a alteração dos arquivos CSS, consulte nosso suporte clicando aqui, para que possamos esclarecer o processo de minificação. Esse processo é uma exigência da Tray e se não for realizado pode implicar em futuros problemas.

Considerações Finais

Você finalizou a documentação do tema e já pode usufruir dessa nova conquista! Reforçamos que qualquer modificação feita sem que o tema tenha sido publicado não estará disponível aos clientes até que o tema seja publicado. Veja o tópico Instalação e publicação do seu tema para verificar como fazer o procedimento mais uma vez.

É um prazer ter você como cliente. Caso tenha ficado com alguma dúvida ou precisa de um atendimento especializado, entre em contato com o nosso suporte clicando aqui.