Documentação - Netstore Home Decor

Documentação Netstore Home Decor

Manual de instalação e uso do tema Netstore Home Decor

Apresentação

Parabéns! Você acabou de adquirir o tema Netstore Home Decor. 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.

Sinta-se a vontade para enviar comentários e sugestões de melhorias para nós, indicando no campo assunto do e-mail como Comentários e Sugestões Tema Netstore Home Decor. Você também pode deixar comentários 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. 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.

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 do tema Netstore Home Decor.

Cada ponto desse painel será tratado em detalhes nas próximas seções. Os pontos abaixo são recursos novos ou melhorados que estarão disponíveis nesse tema:

  • Tipografia
  • Melhor estruturação das cores
  • Novas opções gerais
  • Novo formulário de sugestão
  • Sistema de Backup
  • Sistema de Recuperação
  • Sistema de Redefinição

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, além das ferramentas de Backup, Recuperação e Redefinição.


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: Telefone principal 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 e capa social

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 imagem de redes sociais. Essa imagem será utilizada pelas redes sociais quando algum cliente compartilhar sua loja. Em páginas de produtos ou notícias a imagem em destaque de cada um será utilizada. Para todas as outras a imagem cadastrada aqui é que prevalecerá.

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 a url completa do perfil na rede social, uma vez que o tema não realiza nenhum tipo de tratamento nesses dados.

  • Instagram: Link para o perfil da sua loja no Instagram.
  • Facebook: Link para o perfil da sua loja no Facebook.
  • Twitter: Link para o perfil da sua loja no Twitter.
  • Pinterest: Link para o perfil da sua loja no Pinterest.
  • Linkedin: Link para o perfil da sua loja no Linkedin.
  • Youtube: Link para o seu canal no Youtube

Backup

Essa nova ferramenta dará a você muito mais segurança e confiança nos nossos temas. Ela faz backup automático das configurações do seu tema, além de permitir que você baixe um arquivo com todas elas. Assim você terá mais controle no caso de perca das informações.

Além disso você será alertado quando detectarmos uma possível perca das informações, e o tema tentará recuperar todas as configurações utilizando os sistemas descritos a seguir.

Lembre-se que essa ferramenta ainda se encontra em beta e poderá sofrer modificações no futuro. Mas não precisa se preocupar pois elas serão transparentes para você :)

Existem três sistemas de backup implementados, sendo eles:

  • Backup nos servidores da Tray: Esse sistema fará backups das configurações do tema nos servidores da Tray toda vez que você clicar no botão salvar. Apesar de estar no mesmo servidor da Tray, o mecanismo que faz o backup foi criado pela Netzee. Esse sistema está desativado no momento devido a algumas limitações momentâneas da plataforma. Ele será ativado em atualizações futuras.
  • Backup no seu navegador: Esse sistema fará backups das configurações do tema no seu navegador toda vez que você clicar no botão salvar. Essas informações ficam disponíveis numa área específica do seu navegador, a qual nós temos acesso. Tenha em mente que esse backup está somente no seu navegador atual. Caso mude de navegador ou limpe os dados de navegação, esse backup não estará mais disponível. Por padrão guardamos essa informação no seu navegador por 1 ano.
  • Backup em arquivo de configuração: Esse sistema permite que você baixe um arquivo com todas as configurações do seu tema e salve no seu computador ou na nuvem. Assim, caso alguma problema aconteça, você poderá utilizar a ferramenta de recuperação e recuperar os dados a partir desse arquivo. Basta clicar nessa opção que uma janela de download aparecerá no seu navegadora pedindo para realizar o download do arquivo.

Recuperação

Essa nova ferramenta permite você recuperar os dados em caso de uma perca das configurações do seu tema. Com apenas alguns cliques todas as informações são carregadas de uma arquivo de recuperação. Lembre-se que essa ferramenta ainda se encontra em beta e poderá sofrer modificações no futuro. Mas não precisa se preocupar pois elas serão transparentes para você :)

Para utilizar a ferramenta, basta clicar em Selecionar arquivo e escolher o arquivo de configurações gerado pela ferramenta de backup. O sistema perguntará se deseja prosseguir. Basta confirmar que todos os dados do arquivo selecionado serão carregados.


Redefinição

Essa nova ferramenta permite redefinir seu tema para as configurações que nós pensamos ao criá-lo. Assim, você pode começar do zero a personalização do seu tema caso não tenha ficado satisfeito com o que já tinha feito.

Atenção!

Essa operação ira apagar todas as configurações feitas e substituí-las com as padrões do tema. Essa operação não poderá ser desfeita.

Para utilizar a ferramenta, basta clicar em Redefinir tema. O sistema perguntará se deseja prosseguir. Basta confirmar que o tema será redefinido para as configurações originais.

A aba Tipografia permite você escolher a família de fontes que seu tema utilizará dentre uma seleção que julgamos apropriada. Dessa forma o tema refletirá melhor o seu público alvo.

As fontes são carregadas diretamente do Google Fonts, garantindo um desempenho melhor para o seu site, além de deixar o tema mais leve. Lembre-se que, apesar de poder escolher a família da fonte, os pesos utilizados, ou seja, se a fonte aparecerá mais fina ou mais grossa, é controlado pelo tema, não sendo possível alterar esse quesito.

Para o tema Netstore Home Decor temos duas opções de família de fontes:

  • Enconde Sans: Uma fonte sem serifa, de aparência menos formal para casar com lojas que tenham conteúdo mais despojados. Essa é a fonte principal que escolhemos para o tema. Em suma, ela se dá bem com uma variedade incrível de conteúdos para a sua loja
  • Roboto Slab: Uma fonte serifada, de aparência maios formal. Ideal para um site mais sóbrio e com elementos mais formais, como por exemplo uma loja de ternos.

Ao selecionar cada uma das opções de família de fontes, uma prévia aparecerá com o a fonte selecionada e os pesos que o tema utilizará. Assim você conseguirá ter uma ideia da fonte que gosta mais.

Prévia da fonte Encode Sans

Prévia da fonte Roboto Slab

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, dor 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 usa 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 do fundo da loja: Cor do fundo da loja. Será aplicado em todas as páginas.

Cor dos textos: Cor utilizada na maioria dos textos da loja. Outras variáveis de cor irão sobrescreve-la. Ex: títulos e botões.

Cor dos título: Cor utilizada nos títulos da loja, incluindo o título das vitrines e bloco de noticias.

Cor dos subtítulos: Cor utilizada nos subtítulos quando houver. Na página principal é utilizado no subtítulo da bloco de notícias.

Cor principal de destaque: Cor utilizada para dar destaque em vários elementos, incluindo, mas não limitado a, links ícones, botões, abas, setas dos carrosseis e paginação

Cor principal de destaque ao passar o mouse: Utilizada nos mesmos elementos que a variável de cor anterior que possuem interação com o usuário. Ao passar o mouse a cor definida nessa variável será aplicada, de modo que o usuário consiga perceber que existe uma interação naquele elemento.

Cor dos textos em conjunto com a cor principal: Elementos que tiveram a cor de fundo definida pela variável cor principal acima e que possuem textos utilizarem a cor definida nessa variável. Recomenda-se usar uma cor com bom contraste com a variável cor principal.

Cor da indicação do slide: utilizado nos indicadores dos nos carrosseis para mostrar a quantidade de itens que ele possui.

Cor da indicação do slide ativo: utilizado nos indicadores dos nos carrosseis para determinar qual é o slide ativo no momento no carrossel.

Cor de fundo dos campos: cor utilizada no fundo dos campos de texto, caixas de seleção, caixas de ordenação e dos itens da paginação.

Cor do texto nos campos: cor do textos dos campos de texto, caixas de seleção e caixas de ordenação do tema. Recomendamos que essa cor tenha um bom contraste com a cor anterior.

Cor das bordas dos campos: cor das bordas dos campos de texto.

Cor das bordas dos campos de seleção: Cor utilizada das bordas nos campos de seleção (checkbox) da loja

Cor das bordas dos elementos da loja: Cor utilizada nas bordas de vários elementos da loja. Se o elemento tiver uma borda provavelmente a cor definida nessa variável será aquela a ser usada. Outros elementos podem sobrescrever essa variável.

Cor de fundo do modais: Cor utilizada no fundo de todos os modais da loja, incluindo, mas não limitado a, carrinho lateral, informações de ajuda e depoimentos.

Cor de fundo: Cor do fundo da barra superior. Ela fica acima do cabeçalho da loja contendo informações de ajuda e contato.

Cor dos textos: Cor dos textos utilizados na barra superior. Recomendamos que a core tenha um bom contraste com a com de fundo escolhida anteriormente.

Cor de fundo: Cor de fundo do topo do tema, ou seja, o cabeçalho.

Cor dos ícones: Cor dos ícones exibidos no topo do tema, incluindo ícone de carrinho, conta e pesquisa.

Cor dos textos: Cor dos textos exibidos no topo, basicamente as informações da conta.

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

Cor do fundo quantidade no carrinho: Cor de fundo onde é exibido a quantidade de produto no carrinho.

Cor do número quantidade no carrinho: Cor do texto para a quantidade de produtos no carrinho.

Cor de fundo do menu de navegação: Cor utilizada no fundo do menu principal da loja, o que aparece logo abaixo do logo e do campo de pesquisa.

Cor do texto do primeiro nível do menu de navegação: Cor utilizada nos textos do primeiro nível do menu, o que aparece logo abaixo do logo e do campo de pesquisa.

Cor da borda inferior do item do menu ao passar o mouse sobre: Cor utilizada nos itens do primeiro nível do menu. Ao passar o mouse sobre um dos itens, uma barra verde aparecerá logo abaixo.

Cor de fundo dos submenus de navegação: Cor utilizada no fundo dos submenus, ou seja, segundo nível do menu. Caso o primeiro nível tenha subcategorias, um box será exibido com essa cor aplicada ao fundo.

Cor do texto dos demais níveis do menu de navegação: Cor utilizada em todos os itens do submenu de navegação, ou seja, segundo e terceiro níveis. Recomendamos uma cor que contraste com a cor escolhida anteriormente.

Cor do texto dos demais níveis do menu de navegação ao passar o mouse: Cor utilizada quando passar o mouse sobre um item do submenu de navegação, ou seja, segundo e terceiro níveis.

Cor do texto do item principal dos demais níveis do menu de navegação: Cor utilizada no título da subcategoria quando o menu tiver um terceiro nível. Repare que as cores serão invertidas nesse caso, no qual ao passar o mouse a cor será a mais escura. A imagem abaixo ilustra melhor esse comportamento.

Cor de fundo: cor utilizada no popup que aparece ao passar o mouse sobre o menu Entrar / Cadastrar

Cor do textos: Cor dos texto no menu da conta. Recomendamos usar uma cor que contraste com a cor escolhida anteriormente.

Cor do fundo do botão: Cor utilizada no fundo do botão Entrar / Minha conta no menu de conta.

Cor do fundo do botão ao passar o mouse: Cor utilizada ao passar o mouse sobre o botão Entrar / Minha conta.

Cor do texto do botão: Cor utilizada no texto do botão Entrar / Minha conta. Recomendamos usar uma cor que contrate com a cor do fundo do botão.

Cor do texto do botão ao passar o mouse: Cor utilizada no texto do botão Entrar / Minha conta ao passar o mouse sobre. Recomendamos usar uma cor que contrate com a cor do fundo do botão ao passar o mouse.

Cor do fundo da indicação de compre junto: Cor utilizada no fundo da indicação que mostra que o produto foi adicionado ao carrinho utilizando o compre junto.

Cor da fonte da indicação de compre junto: Cor utilizada nos texto da indicação que o produto foi adicionado ao carrinho utilizando o compre junto.

Cor da indicação do banner: cor utilizada nos indicadores do banner home, o principal, para mostrar a quantidade de itens que ele possui. Essa cor terá uma opacidade de 40% aplicada.

Cor da indicação do banner ativo: cor utilizada nos indicadores do banner home, o principal, para mostrar qual banner está ativo.

A cor utilizada nos ícones da régua fio é definida pela variável Cor principal dentro do grupo Cores gerais do tema.

Background régua fio: cor utilizada no fundo da régua fio, aquela faixa de informações logo abaixo do banner home.

Texto principal régua fio: cor utilizada no texto principal do item da régua fio, ou seja, a primeira linha de texto.

Texto secundário régua fio: cor utilizada no texto descritivo logo abaixo do texto principal.

Cor do fundo de cada box de categoria: cor utilizada no fundo de cada box do carrossel de categorias.

Cor do texto da box de categoria: cor utilizada nos textos de cada box do carrossel de categorias. Recomendamos uma cor que contraste com a cor de fundo escolhida anteriormente.

Cor do fundo do detalhe do box de categoria: cor utilizada no fundo do quadrado localizado na parte direita do box. Essa cor torna a visualização do ícone mais fácil.

Nota: Algumas das cores definidas nesse grupo também serão utilizadas na página do produto. Decidimos essa configuração para facilitar a configuração por você e não criar divergências entre a listagem e a página do produto.

Cor dos textos: cor utilizada no título do produto no box do produto.

Cor do preço: cor utilizada no preço exibido acima das formas de pagamento no box do produto.

Cor das formas de pagamento: cor utilizada nos preços e informações das formas de pagamento em destaque no box do produto.

Cor de fundo do bloco de produto: cor utilizada no fundo de cada box do produto. Essa cor pode ser diferente da cor do fundo da loja caso queria dar um destaque maior ao box do produto. Em lojas com fundo claro recomendamos deixar a cor igual aqui.

Cor de fundo do botão: cor utilizada no fundo do botão comprar e mais detalhes no box do produto. Esse botão aparecerá somente ao passar o mouse sobre o box do produto.

Cor de fundo do botão ao passar o mouse: cor utilizada no fundo do botão comprar e mais detalhes no box do produto ao passar o mouse sobre o botão.

Cor do texto do botão: cor do texto do botão comprar e mais detalhes no box de produto. Recomendamos que essa cor tenha um bom contraste com as cores Cor de fundo do botão e Cor de fundo do botão ao passar o mouse definidas anteriormente.

Cor de fundo dos botões de quantidade: cor utilizada no fundo dos botões de quantidade que ficam ao lado do campo de quantidade no box do produto e na página do produto.

Cor de fundo dos botões de quantidade ao passar o mouse: cor utilizada no fundo dos botões de quantidade que ficam ao lado do campo de quantidade ao passar o mouse sobre.

Cor das setas de quantidade: cor utilizada nas setas nos botões de quantidade.

Cor de fundo da tag destaque: cor utilizada no fundo da tag destaque para os produtos em destaque, tanto no box do produto quanto na página do produto.

Cor do texto da tag destaque: cor utilizada no texto da tag destaque para os produtos em destaque, tanto no box do produto quanto na página do produto.

Cor de fundo da tag desconto: cor utilizada no fundo da tag desconto para os produtos com desconto, tanto no box do produto quanto na página do produto.

Cor do texto da tag desconto: cor utilizada no texto da tag desconto para os produtos com desconto, tanto no box do produto quanto na página do produto.

Cor de fundo da tag de frete grátis: cor utilizada no fundo da tag de frete grátis para os produtos com frete grátis, tanto no box do produto quanto na página do produto.

Cor do texto da tag de frete grátis: cor utilizada no texto da tag de frete grátis para os produtos com de frete grátis, tanto no box do produto quanto na página do produto.

Cor de fundo da tag lançamento: cor utilizada no fundo da tag lançamento para os produtos marcados como lançamento, tanto no box do produto quanto na página do produto.

Cor do texto da tag lançamento: cor utilizada no texto da tag lançamento para os produtos marcados como lançamento, tanto no box do produto quanto na página do produto.

Cor de fundo da tag extra: cor utilizada no fundo da tag extra do produto, tanto no box do produto quanto na página do produto.

Cor do texto da tag extra: cor utilizada no texto da tag extra do produto, tanto no box do produto quanto na página do produto.

Cor de fundo da barra de filtros: cor utilizada no fundo da barra de filtro na listagem de produtos nas categorias e na página de busca. No mobile, o fundo da barra de filtros terá a mesma cor do fundo da loja.

Cor das bordas dos filtros: cor da borda inferior dos filtros na barra de filtro na listagem de produtos nas categorias e na página de busca.

Cor do nome do produto: cor utilizada no nome do produto, logo no topo da coluna de informações do produto.

Cor da descrição da variante: cor utilizada no texto que descreve a variação do produto quando esse possui variações.

Cor do preço: cor utilizada no preço em destaque logo após as informações adicionais do produto e as variações caso o produto tenha alguma.

Cor das formas de pagamento: cor utilizada nas formas de pagamento, exibido logo após o preço em destaque do produto.

Cor de fundo do botão comprar: cor utilizada no fundo do botão comprar.

Cor de fundo do botão comprar ao passar o mouse: cor utilizada no fundo do botão comprar ao passar o mouse sobre.

Cor do texto do botão comprar: cor utilizada no texto do botão comprar. Recomendamos que a cor tenha um bom contraste com a cor de fundo do botão e Cor de fundo do botão comprar ao passar o mouse definidas anteriormente.

Cor do fundo do carrossel de marcas: cor utilizada no fundo do carrossel de marcas de modo a dar destaque ao box da marca.

Cor do fundo de cada box de marca: cor utilizada no fundo do box da marca. Caso queira deixar a mesma cor definida na variável anterior, certifique-se que todas as marcas tenham a imagem em png com fundo transparente.

Nota: As cores definidas nesse grupo também serão utilizadas na página de depoimentos. Decidimos essa abordagem para facilitar a configuração por você e não criar divergências entre a página inicial e a página de depoimentos.

Cor de fundo depoimentos: cor utilizada no fundo de cada do box de depoimento.

Cor do texto: cor dos textos no box de depoimentos.

Cor de fundo do bloco de todos os depoimentos no mobile: Cor utilizada no fundo do bloco que engloba todos os depoimentos em dispositivos móveis. Não disponível em outros dispositivos.

Nota: As cores definidas nesse grupo também serão utilizadas na listagem das notícias na página de listagem de notícias. Entretanto tais cores não serão utilizadas na página da notícia em si. Lá prevalecerão as cores gerais do tema.

Cor do Fundo de cada notícia: cor utilizada no fundo de cada box de notícia.

Cor do título da notícia: cor utilizada no título de cada notícia.

Cor da descrição da notícia: cor utilizada na prévia do texto da notícia.

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.

Exibir campo de rastreio

Essa opção permite habilitar ou desabilitar a opção de rastreio na loja. Além disso você pode escolher qual o serviço que será utilizado para fazer o rastreio. Dentre as opções temos:

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

Mensagem da barra superior

Permite configurar uma mensagem para ser exibida na barra superior.

Ícone: escolha um ícone que deseja que apareça junto ao texto. Os ícones disponíveis são os mesmos exibidos na Régua Fio.

Mensagem: escreva algo legal para seus cliente que queira deixar em destaque.


Texto de atendimento e minha conta

Personalize os textos da central de ajuda / atendimento e da opção e conta do usuário para refletir melhor o público da sua loja.

Texto para Atendimento: modifica o texto exibido na barra superior ao lado esquerdo. Ao clicar nele o cliente terá informações de contato, redes sociais e a opção de rastreio se habilitada.

Texto para Minha conta: modifica o texto do menu de conta do cliente da loja no topo do tema. Quando um cliente estiver autenticado na loja, o nome dele aparecerá. Caso seja um nome muito grande aparecerão três pontos e o restante será escondido para não prejudicar os outros elementos do layout.

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.

Qual será a hierarquia das subcategorias no Menu? 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 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:

  • Texto exibido no menu de navegação: Define o texto que mostrado no menu principal.
  • 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.

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:

  • Tipo do produto: Permite selecionar o grupo de produtos do qual o produto a ser exibido será selecionado.
  • Tipo de ordenação: Permite modificar a ordem e consecutivamente o produto a ser exibido. Recomendamos deixar em aleatório, pois assim um produto diferente sempre aparecerá.

Esse grupo permite configurar as informações que serão exibidas em um bloco logo abaixo do banner home. Você poderá cadastrar até 5 blocos de informações 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. Você poderá escolher entre: Cartão, Frete, Prêmio, Depoimento e Segurança.
  • 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 configura o funcionamento das vitrines de produtos na página inicial da sua loja

Exibir produtos aleatórios: habilite essa opção para que os produtos a serem exibidos na vitrine sejam carregados aleatoriamente. Isso garante que os produtos sejam diferentes e tenham a mesma visibilidade.

Exibir segunda imagem ao passar o mouse sobre o produto: habilite essa opção e ao passar o mouse sobre um produto o cliente terá uma segunda imagem disponível. Esse recurso somente funcionará se o produto possuir mais de uma imagem cadastrada.

Exibir carrinho após adicionar produto no carrinho: habilite essa opção para que toda vez que um cliente adicionar um produto no carrinho, o carrinho seja exibido. Caso essa opção esteja desabilitada somente uma animação no ícone do carrinho acontecerá.

Exibir tags na listagem de produto: habilite essa opção e as tags Produto em Destaque, Frete Grátis, Novidade, Desconto e Tag adicional serão exibidas na listagem também, ao invés de somente na página do produto. As tags precisam estar habilitadas nos produtos para aparecerem.

Habilitar 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 Texto do botão de compra rápida.

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 quadrada: 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.

Como deseja exibir os preços dos produtos? modifica como os preços serão exibidos para o cliente da loja.

  • Exibir preço à vista em destaque: o preço à vista dos produtos terão o mais destaque. Essa é a forma de exibição padrão do tema.
  • Exibir preço parcelado em destaque: o preço do produto parcelado terá destaque.

Primeira, segunda e terceira vitrine de produtos: você poderá configurar até trés vitrines de produtos para aparecer na página inicial da sua loja. Cada vitrine possui três configurações:

  • Título da vitrine: define o título que será exibido logo acima da vitrine
  • Tipo de vitrine: define quais produtos deverão ser exibidos na vitrine. Você poderá escolher entre Novidades, Mais vendidos, Em destaque, Frete Grátis e Promoção.
  • Quantidade de produtos a ser exibido na vitrine: Define quantos produtos verão ser exibidos na vitrine. As opções são múltiplos de quatro para ficarem com uma exibição perfeita.

Esse grupo contém as configurações da exibição do bloco de notícias na página inicial.

Exibir na página inicial? habilita ou desabilita o recurso na página inicial

Título: título exibido antes das notícias.

Subtítulo: subtítulo adicionado logo abaixo do título antes das notícias.

Esse grupo contém as configurações da exibição dos depoimentos de clientes na página inicial.

Exibir depoimentos na página inicial: habilita ou desabilita o recurso na página inicial

Título: título exibido antes dos depoimentos dos clientes.

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 tanto nas páginas de categorias quanto na página de resultados da busca.

Exibir filtro lateral: habilita ou desabilita a barra lateral com os filtros disponíveis.

Exibir filtros fechados: caso sua loja tenha muitas opções dentro dos filtros pode ser que a página fique muito extensa. Habilitando essa opção os filtro virão fechados e o cliente poderá clicar para expandir e visualizar as opções.

Exibir quantidade nos itens do filtro: caso habilitado cada opção do filtro irá mostrar a quantidade de produtos que serão exibidos pelo filtro.

Como deseja aplicar o filtro?: altera como os filtros serão aplicados. Você poderá configurar de duas maneiras:

  • Aplicar filtros ao selecionar um item: nessa opção quando o cliente clicar sobre uma opção do filtro ele será aplicado automaticamente e a página será recarregada com os produtos relativos ao filtro.
  • Aplicar filtro ao clicar no botão filtrar: os filtros selecionados somente serão aplicados quando o cliente clicar no botão filtrar localizado no fim da barra lateral de filtros.

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

Exibir avaliações nos produtos? exibe as estrelas de avaliação do produto tanto na listagem de produtos quando na página do produto.

Habilitar tag adicional de produto: habilita ou desabilita e exibição da tag adicional de produto. Além disso é possível modificar o texto da tag adicional através do campo Texto da tag adicional. A opção de exibir selo adicional deve estar habilitada nas configurações do produto.

Atenção! Essa opção desconsidera a imagem de tag adicional cadastrada nas imagens da Tray. Esse tema não tem suporte a tag adicional por imagem.

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.

Configurações

O tema Netstore Home Decor 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 é 280x280 pixels.

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

O tema Netstore Home Decor 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 dois banners exibidos lado a lado. Utiliza as variáveis extra2 e extra3 para exibi-los. Esse tipo de banner não contam com uma versão para dispositivos móveis.
  • Banners Line: são banners que ocupam toda a largura do site. Utiliza as variáveis extra4 e extra6 para as versões desktop e extra5 e extra7 para dispositivos móveis.

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: 1920x520 pixels


Banner Home Mobile: 360x420 pixels


Banners Grid: 578x320 pixels.

Esse banner não possui variação para dispositivos móveis.


Banners Line Desktop: 1180x320 pixels.


Banners Line Mobile: 360x190 pixels.

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.

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 direita da nela em em 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.

Cópie o código minificado gerado pela ferramente e colo 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 se limpar o cache do seu navegador antes de verificar se as alterações apareceram.

Considerações finais

Nós apreciamos imensamente a sua opinião! Queremos melhorar sempre e estamos abertos a sugestões. Com sua ajuda podemos criar temas cada vez melhores e que atendam sua necessidade. Preencha o formulário e diga o que achou do nosso tema e desse manual, e como podemos melhorá-lo. É bem rapidinho :)

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.