Documentação Cosmetics Beauty

Documentação Cosmetics Beauty

Manual de instalação e uso do tema Cosmetics Beauty

Apresentação

Parabéns! Você acabou de adquirir o tema Cosmetics Beauty. 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 Cosmetics Beauty. Você também pode deixar comentários loja no qual 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á :)

Caso precise de algum suporte relacionado à plataforma Nuvemshop, entre em contato diretamente com eles. Você pode se informar mais aqui.

Aproveite e de uma olhada também na Central de Atendimento da Nuvemshop. 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 recurso que você pode ter e configure uma loja completa para seus clientes!

Neste manual vamos apresentar todas as configurações necessárias que podem ser feitas dentro do painel administrativo da sua loja. Leia todo o conteúdo dessa documentação e siga os passo-a-passos para que consiga configurar corretamente 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.

Para falar conosco, abra um chamado clicando aqui. O prazo para retorno é de até 48 horas.
Não retiramos a nossa marca dos temas comercializados. Caso retire por conta própria, o suporte não mais será prestado.
Não. Cada tema segue uma estrutura de codificação e layout compatível com uma plataforma específica.
O prazo é de até 10 dias úteis, dependendo do serviço contratado, começando a contar após a coleta das informações necessárias. Esse tempo é necessário para que nossa equipe de desenvolvimento faça o melhor serviço, com a melhor qualidade.
Todas as configurações relativas ao tema são perdidas ao realizar a instalação desse tema. Informações de produtos, pagamentos, promoções e demais configurações da plataforma não são afetadas.
Sim. O tema não influencia nas configuração de sua loja, apenas nas configurações de tema.
Revise os passos desse manual e valide cada ponto dele nas configurações da sua loja e tema. Se após essa verificação não conseguir deixar a sua loja como o tema comprado, entre em contato conosco.
Você pode adquirir conosco personalizações a parte. O preço das personalizações dependerão do tipo de ajuste necessário. Para saber mais entre em contato com nosso time de vendas clicando aqui.
Recomendamos que antes de fazer qualquer ajuste no código da sua loja faça um cópia de segurança. Caso ocorrer algum problema que não consiga resolver, entre em contato conosco que lhe informaremos o processo. Não nos responsabilizamos por problemas causados por terceiros que editem o código do tema.

Nesse tema você poderá configurar vários pontos, abordado nas próximas seções. De forma resumida, você poderá personalizar:

  • Cores
  • Banners
  • Vitrine de produtos
  • Redes sociais
  • Régua fio
  • Produto no menu superior
  • WhatsApp flutuante

Geralmente todas as configurações do administrativo da Nuvemshop são aplicadas imediatamente. Caso isso não ocorra, aguarde alguns minutos e tente visualizar as alterações novamente. Se mesmo assim não for possível visualizar as alterações entre em contato com o suporte da Nuvemshop.

As configurações do tema demoram mais para serem visualizadas, principalmente as relativas as cores. Nesse caso é preciso aguardar até 1 hora para que as alterações sejam aplicadas. Caso após esse tempo as modificações não sejam refletidas, faça o procedimento abaixo:

  1. Saia e entre novamente no administrativo da sua loja
  2. Recarregue o painel de personalização do tema e verifique se as informações feitas foram salvas.
  3. Force a limpeza dos caches do seu navegador apertado as teclas Ctrl+Shift+Del simultaneamente, selecione somente a opção de cache e clique em Limpar Dados
  4. Em último caso, se todos esses passos falharem, será necessário contatar o suporte da plataforma para que eles possam verificar o ocorrido
Não. A Nuvemshop ainda não possui essa ferramenta no painel administrativo.

FTP é uma tecnologia que permite transmitir arquivos entre computadores através da internet. Nós utilizamos ele para fazer a instalação do tema na sua loja.

Atenção: nunca, em hipótese nenhuma, clique no botão Desativar FTP. Isso fará com que seu tema seja desinstalado e o tema padrão da plataforma retorne. Todos os dados do tema e personalizações que tenha feito serão perdidos.

Caso tenha feito isso, entre em contato conosco para que possamos fazer a instalação novamente do tema.

Instalação

O processo de instalação do tema na Nuvemshop é totalmente manual. Após a confirmação de pagamento entraremos em contato com você para solicitar acesso ao painel administrativo da sua loja para realizarmos a instalação.

Após instalarmos, faremos a configuração básica para garantir que o que você visualizou no momento da compra reflita na sua loja. Esse processo não inclui configuração das vitrines de produtos, banners, informações da loja, logotipo, entre outros. Isso acontece porque cada lojista possui caracteristicas e necessidades diferentes que somente você poderá identificar.

A partir da instalação do tema, ele já estará disponível na sua loja online. Atualmente a Nuvemshop não permite ter mais de um tema, ou seja, ao fazermos a instalação seu cliente que acessar a loja já verá o novo tema. Caso não queira que isso aconteça, ative a configuração de Página em Construção abordada mais a frente no tópico Demais configurações.

Painel Nuvemshop

Bem vindo ao seu painel administrativo na NuvemShop. Será nele que faremos todas as configurações do seu tema. A esquerda da tela ficam os menus dos principais recursos que você irá utilizar diariamente. A direita terá uma visualização geral da situação da sua loja.

Nessa documentação focaremos nossas atenções a parte de personalização, destacado na imagem abaixo. O painel do tema fica disponível nessa seção e pode ser acessado indo em Personalizar > Personalizar layout

Todas as edições relacionadas ao tema se encontrarão nesse painel. A imagem abaixo mostra a visualização no momento em que você acessa o painel. Sua loja será carregada à direita. Na parte esquerda da tela estarão todas as configurações que seu tema permite fazer. Essas opções mudarão conforme o tema.

No decorrer dessa documentação iremos mostrar várias configurações feitas nesse painel. Lembre-se de salvar as modificações feitas ao acabar cada seção ou se desejar verificar o procedimento.

Uma parte entretanto será sempre igual. No topo da parte esquerda estão os controles para visualizar a loja, o que fará com que a página inicial da sua loja abra em uma nova aba e os ícones de mobile e desktop, que modificam a pré visualização a direita, de modo a demonstrar como sua loja ficará nesses dispositivos.

Edição do Tema

No painel do tema existem duas seções que realizam a mesma operação de modificação do logotipo da sua loja. Elas são redundantes pois uma é adicionada pela propria Nuvemshop e outra pelo tema. O ideal é que configure ambas seções. Nessa seção do manual explicaremos esse processo.

Para começar clique em Logotipo da sua loja. Aparecerá a seção indicada na imagem abaixo.

São disponibilizados as seguintes seções:

Logotipo da sua loja: Nessa área você deve escolher a imagem que representa sua marca. Ela deve ter fundo transparente para que fique melhor com a cor de fundo do cabeçalho.

Ao escolher a imagem, ela aparecerá conforme a imagem abaixo. Repare que no topo da imagem existirá a opção para alterar as propriedades da imagem e para remover a imagem recem adicionada.

Caso tenha escolhido uma imagem com fundo selecione a opção Aplicar transparência. O sistema da Nuvemshop irá tentar remover o fundo da imagem. Tenha em mente que esse é um processo automatizado e não garante que o fundo da imagem será removido totalmente. Por isso recomendamos selecionar uma imagem com fundo transparente.

Favicon da loja: A opção Usar icone próprio permite escolher a imagem de favicon da sua loja. Favicon é um ícone que aparece na aba do seu navegador, ao lado do título da sua loja.

Escolha a imagem que deseje utilizar como favicon. Ele deverá ter um tamanho máximo de 128 x 128 pixels.

A outra seção é muito parecida com essa também. Ao clicar em Logotipo do Cabeçalho. Aparecerá a seção indicada na imagem abaixo.

Clique em Cadastrar logotipo (PNG) para adicionar a imagem que deseja. Repare nas dimensões recomendadas. Novamente informamos que ela deve ter fundo transparente para que fique melhor com a cor de fundo do cabeçalho.

Ao selecionar a imagem, ela ficará como mostra a imagem abaixo.

O tema Cosmetics beauty possui várias configurações de cores que podem ser personalizadas. Cada uma afeta uma determinada parte do layout da sua loja. Para editar as cores do tema acesse Cores do site.

Ao clicar em uma das várias opções disponíveis será exibido um menu para selecionar a cor desejada. Nessa parte a plataforma exibe as cores que são padrões e mais utilizadas por outros lojistas. São sugestões que você pode colocar rapidamente apenas clicando sobre a cor desejada. Apesar disso qualquer cor que quiser utilizar pode ser colocada. Para isso clique em Nova cor e escolha a cor desejada. Você poderá escolher através da ferramenta de seleção de cor ou digitando o código hexadecimal de 6 caracteres.

A imagem abaixo mostra as etapas desse processo. A esquerda existe a lista de cores (apenas uma parte é exibida na imagem), a ferramenta de seleção rápida ao centro e a opção de nova cor a direita.

Como mencionado acima, existem várias opções de cores que podem ser personalizadas. Abaixo está uma lista completa das cores e os locais que são afetados no tema. Elas são auto explicativas.

  • Cor da barra de ferramentas do Google no mobile: cor utilizada no topo do navegador chrome para dispositivos móveis. Recomanda-se utilizar a mesma cor do cabeçalho para garantir uma uniformidade

  • Cor principal dos textos do site: cor utilizada como base de todos os textos da loja. Essa cor será sobrescrita por opções adiante para outras partes do tema

  • Background do site: cor utilizada em todo o fundo do site. Escolha uma cor que irá contrastar com a cor de texto escolhida. Se a cor do texto for clara escolha uma cor de fundo escuro. Se a cor do texto for escura, escolha uma cor de fundo clara

  • Background do cabeçalho: cor utilizada no fundo do cabeçalho da loja

  • Background do menu superior: cor utilizada no fundo do menu superior. O menu superior é onde são exibidos os itens escolhidos no menu de navegação.

  • Borda dos elementos do site: cor da borda utilizada por vários elementos do site

  • Cor do item de quantidade do carrinho, dos valores no carrinho lateral, do botão em minha conta e das sugestões de busca: como o próprio nome indica essa opção afetará multiplos lugares

  • Cor do texto da quantidade do carrinho: cor utilizada no teto da quantidade do carrinho

  • Cor do fundo do campo de pesquisa: cor utilizada no fundo do campo de pesquisa no cabeçalho da loja

  • Cor do texto e ícone de pesquisa: cor utilizada no texto e no ícone do formulário de pesquisa no cabeçalho da loja

  • Cor dos ícones da sacola e menu: cor utilizada nos ícones dos menus e do ícone de sacola de produtos.

  • Cor dos ícones de redes sociais: cor utilizada nos ícones das redes sociais no cabeçalho da loja

  • Cor do background do menu suspenso de criação de contas: cor utilizada no fundo do menu que aparece ao passar o mouse sobre o item Minha Conta no cabeçalho da loja

  • Cor do texto do menu de categoria: cor utilizada nos textos no menu principal da loja

  • Cor dos título do site: cor utilizada nos títulos principais do site, como no título das vitrines de produtos.

  • Background do botão de compra: cor utilizada no fundo do botão de comprar da loja

  • Cor do texto do botão de compra: cor utilizada no texto do botão de comprar da loja

  • Background dos botões secundários: cor utilizada no fundo dos botões secundários da loja, como botão de salvar, ou realizar cadastro

  • Cor do texto dos botões secundários: cor utilizada nos textos dos botões secundários da loja

  • Background da newsletter: cor utilizada no fundo da newsletter localizada no rodapé da loja

  • Cor do texto da newsletter: cor utilizada nos textos da parte da newsletter localizada no rodapé da loja

  • Cor do ícone da newsletter: cor utilizada nos ícones da parte da newsletter

  • Cor do fundo do campo da newsletter: cor utilizada no fundo do campo da newsletter

  • Fundo do rodapé: cor utilizada no fundo do seção do rodapé da loja

  • Cor dos textos do rodapé: cor utilizada nos texto da seção do rodapé da loja

  • Background do banner régua: cor utilizada no fundo do banner régua. O banner régua é a seção localizada logo abaixo dos banners principais, que contem informações como frete grátis, parcelamento, segurança e contato via WhatsApp

  • Cor dos ícones do banner régua: cor utilizada nos ícones do banner régua

  • Cor dos textos do banner régua: cor utilizada nos textos do banner régua

  • Background do bloco de banners por categoria: cor utilizada no fundo do bloco de categorias. O bloco de categoria se localiza logo após a primeira vitrine de produtos

  • Cor do texto do botão do bloco de banners por categoria: cor utilizada no texto do botão do bloco de categorias. O botão aparece ao passar o mouse sobre o item do bloco de categoria.

  • Cor do botão do bloco de banners por categoria: cor utilizada no fundo do botão do bloco de categorias

  • Cor da tag Novidades: cor utilizada no fundo da tag de novidades. As tags aparecem sobre o box do produto

  • Cor da tag Frete Grátis: cor utilizada no fundo da tag de frete grátis. As tags aparecem sobre o box do produto

  • Cor da tag Desconto: cor utilizada no fundo da tag de desconto. As tags aparecem sobre o box do produto

  • Cor da tag do menu: cor utilizada no fundo da tag de menu. As tags do menu aparecem sobre os itens do menu principal

  • Cor do texto das tags: cor utilizada nos textos da tags

  • Cor do preço DE: cor utilizada no texto de exibição do preço antigo quando o produto está em promoção

  • Cor do preço POR: cor utilizada no texto de exibição do preço do produto, estando ou não em promoção

  • Cor das opções de pagamento: cor utilizada no texto de exibição as opções de pagamento

  • Cor dos itens do carrossel: cor utilizada nos itens do carrossel

  • Cor do item ativo do carrossel: cor utilizada no item atual do carrossel

  • Cor de fundo das imagens na listagem e na página de produto: cor utilizada no fundo das imagens dos produtos, nas vitrines, nas páginas de categorias e na página do produto

  • Cor da borda da imagem selecionada e do ícone de lupa na página de produto: cor utilizada na borda da imagem selecionada (quando o produto tem mais de uma imagem cadastrada) e no ícone de lupa que fica sobre a imagem principal no canto superior direito

  • Cor do nome do produto: cor utilizada nos textos do nome do produto, nas vitrines de produtos, nas páginas de categorias e na página de produtos

O tema Cosmetics Beauty permite escolher a família de fonte que será utilizada no seu site. Ao escolher a família, o tema se encarregará de carregar as fontes e seus respectivos pesos. Para alterar a família de fonte acesse Tipografia no painel de temas. A imagem abaixo será exibida.

As seguintes famílias de fontes estão disponíveis para você escolher:

O tema permite que você personalize algumas partes to cabeçalho da sua loja. Para isso acesse Cabeçalho no painel do tema. Nessa seção você poderá configurar os menus, quantidade de itens exibidos no menu, redes sociais e número do WhatsApp. A imagem abaixo ilustra as opções dessa seção.

Menu Lateral

Na primeira parte dessa seção você poderá escolher qual o menu que aparecerá quando o cliente clicar no ícone de menu ao lado da logotipo do seu site. Os menus são cadastrados dentro do painel administrativo da loja em outra página. A seção configuração desse manual aborda como fazer esse procedimento.

Produtos Menu

Abaixo, terá a opção para exibir produtos no menu principal. Os produtos a serem exibidos dependerão dos que forem adicionados na seção Produto Menu e da categoria que ele pertence. Explicaremos mais a frente como adicionar produtos na seção Produto Menu da sua loja.

Quantidade itens Menu

Em seguida teremos a opção Selecione a quantidade de categorias a serem exibidas. Nessa opção você pode especificar a quantidade de itens do menu que serão exibidos antes do menu ter a opção Mais categorias. Isso acontece porque o menu possui um espaço limitado. Caso tenha muitos itens, poderia quebrar a execução da loja. Dessa maneira tudo funciona corretamente.

Redes Sociais

Nessa parte você poderá configurar se deseja que as redes sociais apareçam na sua loja e quais aparecerão. Elas serão exibidas ao lado do link Minha Conta no cabeçalho da loja. Para isso basta ativar essa opção e preencher o campo da respectiva rede social que possua. As redes sociais que não tenham seus campos preenchidos não serão exibidas.

Você ainda poderá definir o número de atendimento pelo WhatsApp. Ao ser preenchido, essa opção ativa o ícone do WhatsApp ao lado dos ícones de redes sociais. Repare que o número precisa ser informado com DDD e sem nenhuma formatação, seja espaço, parenteses ou traços.

Assim como o cabeçalho, o rodapé também possui algumas configurações que podem ser ajustadas a sua necessidade. Para isso acesse Rodapé no painel do tema.

Menu do rodapé

Nessa parte você poderá escolher qual o menu que aparecerá na coluna Informações no rodapé do site. Os menus são cadastrados dentro do painel administrativo da loja em outra página. A seção configuração desse manual aborda como fazer esse procedimento.

Newsletter do Rodapé

Essas configurações controlam a exibição do formulário de newsletter do site.

  • Escreva o título da newsletter: Será o título maior na parte da Newsletter, dando um destaque para ela. Coloque um texto legal e de tamanho razoável. Caso ele seja muito grande, o layout ficará quebrado.

  • Escreva o texto da newsletter: Será o subtítulo na parte da Newsletter, complementando o título e esclarecendo o propósito da newsletter. Coloque um texto legal e de tamanho razoável. Caso ele seja muito grande, o layout ficará quebrado.

  • Imagem do logo: O rodapé também conta com a sua logotipo. Ao clicar em cadastrar, você poderá escolher a imagem que deseja. Se atente ao tamanho recomendado para a imagem. De preferência por imagens que possuem fundo transparente para que se adequem melhor ao tema. Após selecionar a imagem, será possível alterar as informações dela, bem como excluí-la, clicando no ícone de lápis e no de lixeira, respectivamente.

O tema inclui o recurso de botão flutuante do WhatsApp. Para configurá-lo, acesse WhatsApp. Isso permite que o cliente da sua loja entre em contato com você rapidamente, uma vez que ao clicar no botão ele será redirecionado ao WhatsApp web ou ao aplicativo do WhatsApp para iniciar a conversa. Algumas configurações estão disponíveis, como mostra a imagem abaixo.

  • Mostrar WhatsApp: Habilita o recurso do botão flutuante do WhatsApp
  • Número Formatado: Número do seu WhatsApp formatado, incluindo parenteses e traços
  • Mensagem padrão ao contato pelo WhatsApp: Mensagem padrão que será utilizado ao clicar no botão flutuante

Os banners principais representam um dos recursos mais importantes no tema. Eles chamam a atenção dos clientes para os tópicos que você decidir. Eles são exibidos logo após o cabeçalho do site na página inicial da loja. Para configurá-los acesse Banners Principais no painel do tema. A imagem abaixo ilustra as opções que essa seção possui.

Galeria de banners

A galeria de banners representa os banners exibidos quando os clientes estão acessando de dispositivos com telas grandes, como computadores de mesa, notebooks ou televisões. Você pode cadastrar quantos banners desejar, mas recomendamos que não coloque muitos, pois eles podem afetar o tempo de carregamento da sua loja.

Para adicionar uma imagem basta clicar em Selecionar imagem e escolher qual desejar. Repare no tamanho recomendado da imagem. Para telas grandes recomenda-se 1920 x 540 pixels. Ao adicionar uma imagem elas serão exibidas acima do campo de seleção da imagem.

O banner cadastrado será apresentado na loja como mostra a imagem abaixo:

Galeria de banners Mobile

A galeria de banners mobile adiciona imagens em resoluções menores que se encaixam melhor em dispositivos móveis com telas menores, como tablets e smartphones. Você pode cadastrar quantos banners desejar, mas recomendamos que não coloque muitos, pois eles podem afetar o tempo de carregamento da sua loja, principalmente nesses dispositivos, visto que em muitos os casos a internet é fornecida por planos de dados móveis.

Uma dica bacana é manter a ordem dos banners a mesma, tanto para a galeria quanto para a galeria mobile. Isso garante uma consistência na apresentação da loja tanto em telas grandes quanto em pequenas.

Para adicionar uma imagem basta clicar em Selecionar imagem e escolher qual desejar. Repare no tamanho recomendado da imagem. Para telas grandes recomenda-se 640 x 440 pixels. Ao adicionar uma imagem elas serão exibidas acima do campo de seleção da imagem.

O banner cadastrado na galeria de banners mobile será apresentado na loja como mostra a imagem abaixo:

O banner régua permite configurar informações de destaque para serem exibidas logo abaixo dos banners principais. Elas são informações chave que podem contribuir na escolha da loja pelo cliente.

Apesar do nome banner, eles não são imagens, mas sim informações em texto e ícones pré-definidos pelo tema que você poderá escolher de acordo com a informação que irá adicionar.

Para fazer as configurações dessa seção acesse Banner régua no painel do tema. Será possível configurar até quatro banners nessa seção. Quando seu tema for instalado, ele virá com quatro opções ja pré-definidas. Caso queira utilizar menos, basta deixar os campos em branco.

Mostrar os itens na página principal: Exibe os itens cadastrados na página principal da loja.

Para cada um dos banners existirá as configurações abaixo:

  • Ícone: ícone que será exibido ao lado do das informações, podendo ser:
    • Envio
    • Cartões de crédito
    • Segurança
    • Trocas e Devoluções
    • WhatsApp
    • Promoções
    • Pagamento em dinheiro
  • Título: texto contendo a informação principal

Os banners de categoria representam uma seção da index onde você pode colocar as principais categorias da sua loja. Elas dão mais visibilidade a tais categorias, atraindo mais clientes a navegarem pela sua loja. Para configurá-los acesse Banners Categoria no painel do tema. A imagem abaixo ilustra as opções que essa seção possui.

Configurações gerais

Existem três configurações gerais nessa seção:

  • Mostrar imagens relacionadas as categorias: essa opção ativa ou desativa toda a seção de banner categoria
  • Insira o título do bloco de banners por categoria: coloque nesse campo as partes do título que desejam que fiquem normais
  • Insira a última palavra do título para ficar em negrito: coloque nesse campo as partes do título que desejam que fiquem em negrito

Para cada uma das oito categorias existirão os seguintes campos listados abaixo e demonstrados na imagem a seguir.

  • Mostrar banner: ativa ou desativa esse banner em particular. Os outros não serão afetados
  • Cadastrar imagem: imagem que representa a categoria cadastrada. O cadastro da imagem é semelhante as outras feitas anteriormente. Se atente ao tamanho recomendado, que nesse caso é de 320 x 320 pixels.
  • Título: título que deseja que apareça no botão da categoria ao passar o mouse sobre ela.
  • Link: link para a página que o cliente será redirecionado. Pode ser um link externo, contento nesse caso o https://, ou uma página da propria loja, e nesse caso somente precisa da página, exemplo: /maquiagem

Os banners de categoria serão apresentados na loja conforme mostra a imagem abaixo:

Essa seção controla como os produtos serão exibidos na página inicial, além das configurações das vitrines. Para configurar essa seção acesse Produtos no painel do tema. Os itens disponíveis nessa seção estão ilustrados na imagem abaixo.

No primeiro bloco temos as configurações que controlam quantos produtos cada vitrine poderá ter. Não recomendamos que nenhuma das vitrines tenham mais do que 12 produtos para não impactar o carregamento da loja.

  • Quantidade de produtos para a vitrine de Destaque: define a quantidade de produtos da vitrine destaque

  • Quantidade de produtos para a vitrine de Novidades: define a quantidade de produtos da vitrine novidades

  • Quantidade de produtos para a vitrine de Promoção: define a quantidade de produtos da vitrine promoção

O segundo bloco controla como título de cada vitrine será composto. O título será exibido antes de cada vitrine.

  • Insira o título para a vitrine de Destaque: coloque nesse campo as partes do título da vitrine de destaque que desejam que fiquem normais

  • Insira a última palavra do título da vitrine de Destaque para ficar em negrito: coloque nesse campo as partes do título da vitrine de destaque que deseja que fiquem em negrito

  • Insira o título para a vitrine de Novidades: coloque nesse campo as partes do título da vitrine de novidades que desejam que fiquem normais

  • Insira a última palavra do título da vitrine de Novidades para ficar em negrito: coloque nesse campo as partes do título da vitrine de novidades que deseja que fiquem em negrito

  • Insira o título para a vitrine de Promoção: coloque nesse campo as partes do título da vitrine de promoção que desejam que fiquem normais

  • Insira a última palavra do título da vitrine de promoção para ficar em negrito: coloque nesse campo as partes do título da vitrine de novidades que deseja que fiquem em negrito

O último bloco controla quais vitrines aparecerão e o modo de exibição delas. Por padrão o tema deixa todas as vitrines visiveis na formato de exibição grade.

  • Exibir produtos em Destaque: ativa ou não a exibição da vitrine de destaques

  • Exibir produtos em Novidades: ativa ou não a exibição da vitrine de novidades

  • Exibir produtos em Promoção: ativa ou não a exibição da vitrine de promoções

  • Exibir produtos em Carrossel: ative essa opção se desejar que os produtos sejam exibidos em um carrossel ao invés no formato grade. Setas para controlar as vitrines serão adicionadas nas laterais.

Repare ne nessas configurações não especificamos nenhum produto. Os produtos serão vinculados a essas vitrines através de outra página do painel administrativo, abordado mais a frente na seção Configurações.

A seção página de categoria controla como as informações serão exibidas na listagem de produtos na categoria. Para configurar essa seção acesse Página de categoria no painel do tema. Será apresentado como na imagem abaixo.

  • Quantidade de produtos por linha: define a quantidade de produtos apresentados por linha. Por padrão o tema configura com 4 produtos por linha

  • Quantidade de produtos exibidos por página: define a quantidade de produtos exibidos a cada página. Por padrão o tema configura 12 produtos por página. Não recomendamos carregar mais do que 24 produtos por página, pois afetará o tempo de carregamento.

  • Exibir menu lateral nas páginas de categoria e busca: ative essa opção caso queria mostrar a barra lateral, que contem as subcategorias e os filtros dessa categoria. Se ativar essa opção, recomendamos que mude a opção Quantidade de produtos por linha de 4 para 3 produtos.

  • Usar carregamento infinito no lugar de paginação: ao ativar essa opção os produtos que não foram exibidos serão trazidos automaticamente a medida que o cliente vai descendo a página. Esse comportamento pode se interessante em alguns casos. Preferimos deixar a pasginação ativada do que a rolagem infinita pois permite ao cliente ir e voltar nas páginas.

  • Mostrar filtros de produtos: ative essa opção para exibir os filtros disponíveis. Para que os filtros sejam exibidos a opção Exibir menu lateral nas páginas de categoria e busca precisa estar ativa e a loja possuir variações para os produtos contidos na categoria.

A seção contato permite configurar a exibição ou não do Google Maps na página de contato. Para realizar essa configuração acesse Contato no painel do tema. Será apresentado como na imagem abaixo.

  • Exibir Google Maps na página de contato: ative ou desative essa opção para que o adicionar ou não o mapa na página de contato

  • Insira o src do iframe do Google Maps: O tema utiliza o iframe de localização do Google Maps para exibir a localização que deseja. Para isso acesse o Google Maps, procure o local desejado e gere o iframe. Caso precise de ajuda acesse o artigo de suporte do Google referente a isso clicando aqui.

Nas opções avançadas você encontrará configurações para adicionar novos scripts de terceiros e modificar o estilo do seu tema através de um código à parte do código do tema. Isso é um recurso poderoso, entretanto deve ser usado com cuidado, pois envolve codificação em HTML, Javascript e CSS. Se você não possui os conhecimento dessas linguagens, recomendamos não fazer alterações nessa seção. Caso esteja ciente dos ricos ou tenha conhecimento, prossiga com cuidado.

Para fazer as configurações nessa seção acesse Opções Avançadas no painel do tema. Você terá três configurações que poderá alterar, como mostra a imagem abaixo.

  • Códigos extras ao cabeçalho: Adicione codigos HTML que serão inseridos antes do fechamento da tag HEAD. Nenhum tratamento será feito no código inserido. Verifique atentamente se eles estão corretos.

  • Estilos extras: Estilos para o seu site que serão carregados após os estilos do tema. Escreva código CSS válido nesse campo. O código será encapsulado por pela tag <style></style>.

  • Script extras: Scripts que você pode carregar na sua loja para adicionar recursos, com por exemplo uma ferramenta de chat. Nenhum tratamento é feito no código inserido nesse campo. Lembre-se de colocar o código entre as tags<script></script>. Um script mal formatado ou com erros inseridos aqui pode fazer com que todos os scripts da loja deixem de funcionar. Tome muito cuidado!

Configurações

As barras de navegação, ou menus de navegação como chamamos, agrupam links que seus clientes irão utilizar para navegar no site. O tema faz uso de três menus para permitir essa funcionalidade, sendo eles:

  • Menu Principal
  • Menu Institucional
  • Menu Rodapé

Os dois últimos menus devem ser criados na plataforma, e podem possuir qualquer conteúdo e qualquer nome. No painel do tema você conseguirá definir qual será utilizado no cabeçalho e qual será utilizado no rodapé. Veja mais na seção Edição do tema clicando aqui e aqui respectivamente. O menu principal é o unico que não precisá criar e ele já vem criado por padrão na plataforma.

Para criar e configurar os menus, acesse o painel administrativo, clique em Minha Nuvemshop na seção Personalizar e então clique em Barras de navegação como mostra a imagem abaixo.

A página que abrir trará todos os menus que você possuir na sua loja. Caso esteja começando agora, deverá ver somente o menu principal.

Para criar um novo menu, clique no botão Criar um novo menu. Você deverá especificar um nome para o menu. O nome é somente uma referência para você ao administrar sua loja e não estará disponível na sua loja. Clique em seguida em Criar novo menu para salvar as modificações

Após criar o menu você poderá adicionar o conteúdo neles. Ao adicionar um item no menu você deve definir o nome e para onde que esse novo item irá apontar, podendo ser:

  • Página Principal
  • Página de Contato
  • Uma categoria
  • Uma página adicional
  • Um menu
  • URL

Cada uma das categorias acima abrem uma nova opção para fazer a seleção de acordo. Após adicionado você poderá posicionar o item na ordem que desejar, basta arrastar a caixa criada clicando nos pontinhos a frente do nome do item e soltando no local que deseja.

Lembre-se: a Nuvemshop não permite criar subitens dessa maneira, arrastando-os. Se desejar ter subitens será necessário cadastrar um outro menu e vinculá-lo com o item criado. Caso o item seja do tipo categoria, as subcategorias vinculadas a essa categoria formaram os subitens no menu principal.

Atenção! O tema somente suporta subitens no menu principal. Todos os subitens nos outros menus mencionados serão desconsiderados!

Para saber mais como organizar os menus de navegação acesse a central de atendimento da Nuvemshop clicando aqui.

No tema Cosmetics Beauty possuem três vitrines que podem ser usadas para apresentar produtos na página inicial. Além dessas vitrines, o tema possui uma a funcionalidade de adicionar produtos no menu principal, no qual o cadastro dos produtos segue o mesmo processo das vitrines.

Os produtos para esses blocos podem ser configurados no painel administrativo, na seção Produtos. Para isso clique em Produtos na seção Administrar. Será exibido a página com a listagem dos produtos da sua loja. Após isso clique no link Ordem dos produtos. A imagem abaixo mostra visualmente o caminho.

Você será apresentado a pagina representada na imagem abaixo.

As abas listadas nessa página são controladas pelo tema ativo na loja no momento. Elas indicam as seções que o tema Cosmetics Beauty disponibilizou para você poder adicionar e listar os produtos da página inicial. A aba ativa ficará com o fundo branco, enquanto as outras em funco cinza.

Para cada seção de produtos terá uma listagem e filtro dos produtos disponíveis na loja no momento, como mostra a imagem abaixo. Você irá utilizar para adicionar os produtos a seção ativa. Repare que os produtos com o escrito cinza indicam que tais produtos já foram adicionados.

A direita do filtro de produtos estarão os produtos que foram adicionados a seção ativa. Você pode reordenar os itens arrastando-os para cima ou para baixo. Se desejar remover basta clicar no link Remover este produto. Não se preocupe, ele irá remover apenas desta listagem. O produto ainda continuará existindo na loja.

Como pode ser percebido nas imagens, o tema disponibiliza 4 blocos de produtos. Os três primeiros são as vitrines de produtos da página inicial, sendo eles:

  • Produtos em destaque
  • Novidades da loja
  • Produtos em promoção

Você pode saber mais como funciona esses blocos de produtos na Central de Atendimento da Nuvemshop clicando aqui.

O quarto bloco de produtos, o Produto Menu possui as mesmas caracteristicas no painel administrativos dos anteriores, porém o seu funcionamento no tema será diferente.

Você deverá adicionar nele os produtos que gostaria que aparecesse no menu principal em destaque. Quando sua loja é carregada, o tema irá levar em consideração cada categoria do menu principal para filtrar os produtos desse bloco Produto Menu. Se existir algum produto da categoria principal nesse bloco Produto Menu, o produto será exibido dentro do menu principal. Caso não exista nenhuma correspondencia, nada acontece.

Caso exista dois ou mais produtos da mesma categoria, somente um produto será exibido e ele será escolhido aleatoriamente.

Além das páginas de conteúdo dinâmico, ou seja, aquelas que sofrem modificação constantemente devido a chegada de novos produtos ou alterações pontuais feitas por você, também existem várias outras páginas que apresentam conteúdo para seu cliente mas que não são dinamicas.

As mais comuns são Sobre nós, Como comprar, Segurança, Envio, Pagamentos, entre outras. Essas páginas também são estilizadas e padronizadas pelo tema, entretanto elas respeitam fielmente o conteúdo formatado e editado que você definiu para elas.

Você pode criar quantas páginas extras desejar. Para configurar tais páginas acesse Minha Nuvemshop na seção Personalizar do painel administrativo. A nuvem irá carregar o item Páginas automaticamente. A imagem abaixo ilustra essa página.

Este manual não abordará o processo de criação e edição dessas páginas, mas você pode saber mais sobre isso na Central de Atendimento da Nuvemshop clicando aqui.

A página de informação de contato possui todos dados importantes utilizados pelo tema. É importante manter tais dados sempre atualizados para facilitar a comunicação de seus cliente com sua loja.

Você pode editar as informações de contato acessando Minha Nuvemshop na seção Personalizar do painel administrativo, e em seguida selecionar a opção Informações de contato.

Existem outras configurações que você pode querer habilitar. São elas: a página em construção e o Login do Facebook.

Página em construção

A imagem abaixo mostra as configurações que podem ser feitas quando se habilita a página em construção. Ela é gerenciada pela Nuvemshop. Para configurar ela acesse Minha Nuvemshop na seção Personalizar do painel administrativo, e em seguida selecionar a opção Página em construção.

Para saber mais detalhes de como configurar essa página acesse a Central de Atendimento da Nuvemshop clicando aqui.

Login do Facebook

Com o login do Facebook você permite que seus clientes utilizem a conta deles na rede social para se autenticar na loja e realizar compras. O tema Cosmetics Beauty suporta essa funcionalidade. Para configurar essa funcionalidade acesse Minha Nuvemshop na seção Personalizar do painel administrativo, e em seguida selecionar a opção Login do Facebook.

Para saber mais detalhes de como configurar essa página acesse a Central de Atendimento da Nuvemshop clicando aqui.

Edição do código

Atenção

A Netzee não recomenda a edição do código do tema da sua loja. O tema da sua loja utiliza uma estrutura complexa com tecnologias atuais que precisam de conhecimento para serem alteradas.

Nós reservamos no direito de não prestar suporte a problemas decorrentes de alterações realizadas por você ou terceiros.

Nós não prestamos suporte a lojas que tenham retirado nosso logotipo do tema!

Atenção! Tenha muito cuidado ao editar o código dos tema. Alterações sem conhecimento das tecnologias utilizadas poderão fazer sua loja não funcionar corretamente!

Através do painel administrativo da loja é possível fazer a edição de qualquer arquivo do tema. Todo tema segue uma estrutura lógica requerida pela Nuvemshop.

Para desenvolvermos esse tema utilizamos as tecnologias requerida pela Nuvemshop. A Nuvemshop utiliza além do CSS e do JavaScript uma tecnologia chamada Twig para montar as páginas da sua loja. O Twig é uma linguagem de template que se assemelha muito ao HTML. Por isso, para alterar qualquer código do tema é necessário ter conhecimento nessas linguagens.

Para editar o codigo do tema da sua loja acesse Minha Nuvemshop na seção Personalizar do painel administrativo, e em seguida selecionar a opção Editar HTML e CSS do layout. A imagem abaixo exemplifica o caminho e a tela que será carregada.

Essa página contém um editor de arquivos. Esse editor é dividido em duas partes. A parte da esquerda contém a estrutura de diretórios e arquivos do tema. A parte da direita é a visualização do arquivo e campo de edição. Quando quiser editar o código do tema selecione o arquivo desejado. Ele será carregado na parte cinza a direita. Após realizar as alterações clique no botão Salvar

As modificações no layout podem demorar até 2 horas para serem aplicadas pela plataforma. Se caso passar esse tempo e elas não forem aplicadas, siga os passos abaixo:

  1. Recarregue o painel administrativo da loja e entre na página de edição do código do tema.
  2. Force a limpeza dos caches do seu navegador apertado as teclas Ctrl+Shift+Del simultaneamente, selecione somente a opção de cache e clique em Limpar Dados
  3. Em último caso, se todos esses passos falharem, será necessário contatar o suporte da plataforma para que eles possam verificar o ocorrido.

Atenção! Para otimizar o carregamento da sua loja, os arquivos de CSS e JavaScript da sua loja são minificados, de modo a reduzir de tamanho. Arquivos minificados possuem os dizeres .min antes da extensão do arquivo.

Para minificar o código CSS clique aqui e para JS aqui. Procure o arquivo com o mesmo nome do arquivo alterado acrescido de .min antes da extensão do arquivo e cole o conteúdo gerado pela ferramenta. Caso não faça isso as alterações não terão efeito.

Considerações Finais

Nós apreciamos imensamente a opinião dos nossos clientes que compram nossos temas, ou seja, você! Assim temos como saber exatamente o que podemos melhorar. Por isso, deixe sua sugestões ou ideias para que possamos melhorar sempre e suprir todas as suas necessidades.

Parabéns!

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.