All posts by Adriano Meira

Ferramentas do editor de texto da loja

Olá pessoal neste artigo vamos mostrar todas as funções do editor de texto que estão disponíveis na sua loja. Este editor está presente em várias telas da loja, seja no cadastro de produto, edição de páginas, áreas personalizadas, blog, e etc… você vai ver ele com esta aparência abaixo:

E neste artigo vamos detalhar cada função e dar dicas para melhorar o visual de descrição de produto usar melhor as áreas personalizadas ou conteúdos para criar melhor design para sua loja, vamos lá!

IDIOMAS

Antes de começar, se você tem uma loja com outro idioma, em geral terá abas para cada idioma que estiver ativado em sua loja, por exemplo ao editar uma página institucional teremos abas como a imagem abaixo

Desta forma teremos na mesma página, como o exemplo acima, duas áreas para editar uma para cada idioma, fique atento se sua loja possui dois idiomas ok? Para cada tela que temos um editor como este terá sempre uma aba para cada uma.

DICA DE EDIÇÃO BÁSICA

O editor de texto da loja, simula no navegador um editor avançado como o Word da Microsoft, logo ele possui alguns atalhos e comandos básicos de lá, um deles muito importante é a geração de parágrafos e quebras de linhas.

Quando estamos escrevendo com ele, e pressionamos a tecla ENTER ele vai gerar um novo parágrafo, mas se pressionamos SHIFT+ENTER geramos uma nova linha, mais próxima do texto, veja o exemplo abaixo.

Ou seja, fique atento a este detalhe, ele vai ser muito importante para que possa criar bons textos legíveis para sua descrição.

Alguns atalhos comuns também estão disponíveis, como negrito CTRL+B ou Command + B para negrito, CTRL+I ou Command+I para itálico.

LISTA DE ITENS DO EDITOR

Para facilitar vamos enumerar cada recurso do editor e detalhar ele, e no final vamos dar alguns exemplos práticos de como podemos combinar eles e melhorar o layout dos conteúdos, vamos lá

1 – CÓDIGO FONTE

Este item serve para ver de forma avançada os códigos de HTML que são gerados a partir dos textos e modificações que vamos fazendo ali, por exemplo se eu escrever um texto e negritar parte dele e apertar este botão teremos algo como assim:

Note que ao habilitar ele, as demais funções ficam desativadas, é usado mais para inserção de códigos de terceiros ou algum ajuste avançado de HTML + CSS.

2 – AMPLIAR

Este recurso serve para ampliar o editor no navegador, recomendado para quando temos uma boa quantidade de texto e edição da tela.

3 – ALINHAMENTO DE PARÁGRAFO

Este item serve para que possa alinhar um parágrafo, seja ele dentro de uma tabela, caixa ou apenas um texto simples, os comandos são texto a Esquerda, Centralizado, Direita ou Justificado. Note que se o mouse estiver sobre o texto, ele vai ficar sinalizado qual formatação ele terá.

4 – FORMATAÇÃO DE TEXTO

Aqui temos na sequência: Negrito, Itálico, Sublinhado e Texto “Cortado”

5- TEXTO SUB OU SOB ESCRITO

Usado para colocar o texto menor abaixo ou acima, usado para medidas, potência, ou dados técnicos específicos.

6 – LISTA NUMÉRICA OU PADRÃO

Este item vai criar uma lista seja ela numeral ou simples com “pontos”

7 – RECUO DE PARÁGRAFO E LISTAGENS

Este recurso serve para criar recuo tanto em parágrafos quanto a listas como mencionado acima. Indicado para criar uma “citação” em um texto grande. Veja o exemplo abaixo, usando o recuo, itálico, caractere especial e tamanho de fonte (vou falar mais abaixo deles), podemos ter uma combinação bem legal assim:

8 – CAIXA CONTEÚDO – DIV

Este recurso serve para criar uma caixa “invisível” em volta de elementos como parágrafos, tabelas, imagens, etc… ele é usada de forma avançada para colocar classes de CSS, Identificação única, estilo e indicação idiomática (para leitores de tela). Um exemplo de seu uso é criando conteúdo visível para mobile e desktop, neste artigo aqui temos um bom exemplo veja

Obs: Este recurso é melhor aproveitado usando o Mostrador de blocos de código, que explico logo abaixo.

9 – MOSTRADOR DE BLOCOS DE CÓDIGO

Este recurso, quando ativado, vai mostrar exatamente onde está cada item “invisível” que estaria por trás do código fonte daquele bloco de informação, muito útil para ver onde começa e termina um parágrafo ou DIV por exemplo.

10 – DESFAZER ou REFAZER

Comandos para voltar ou avançar um ou mais ações, também pode ser acessado pelo CTRL+Z, ou Command + Z e CTRL+Y ou Command + Y

11 – FONTE

Este recurso vai mudar a fonte do seu texto, porém só deixamos algumas fontes mais comuns em todos os computadores, fontes fora deste padrão podem não ser exibidas corretamente em outros computadores. Aconselhamos a não usar essas fontes, só se necessário, o layout da loja já tem um integração com o Google Fonts com uma variedade muito grande.

12 – TAMANHO DA FONTE

Este recurso vai trabalhar com o tamanho do texto que escrever no seu editor, você pode combinar tamanho, com FONTE e criar títulos, chamadas, citações e várias outras combinações, por exemplo a imagem abaixo

Aqui foi usado o negrito no título com tamanho 24 (fonte padrão), fonte Times New Roman, itálico tamanho 20 para a chamada e o texto fonte padrão

13 – COR DA FONTE E COR DE FUNDO DA FONTE

Neste recurso podemos colorir as fontes, tanto a cor da fonte em sim, quanto a cor de fundo, assim podemos trabalhar bem o destaque dela, veja o exemplo abaixo com o mesmo exemplo de texto anterior

Para usar o recurso é muito simples, basta selecionar o texto que deseja e usar as cores da ferramenta, caos não tenha a cor que deseja, no link “mais cores” você pode usar o espectro de cores ou colocar o código dela, ao clicar teremos uma tela como esta abaixo:

Se souber o código Hexadecimal da sua cor, basta colocar no campo acima do “limpar” e depois clicar OK.

14- LINKS

Este recurso é um dos mais importantes do editor, é aqui que vamos criar e colocar links para dentro ou fora da loja virtual, para começar, você pode criar link com texto e imagens, vamos começar com imagem, crie um texto selecione este texto e clique no primeiro ícone de “corrente”, vamos ter uma janela com 3 abas, a primeira temos o texto que selecionamos, no campo Exibir Texto, no campo Tipo de Link temos trê tipos, a URL que é o link comum que leva para fora ou dentro do site, nesta opção temos mais abaixo o protocolo que é usado para o navegador, não coloque nada se for usar uma URL completa ele sabe identificar qual, a URL em si, e se desejar abrir uma imagem pode usar o botão Localizar no servidor .

Dicas importante: Sempre usa o protocolo HTTPS para manter seus ite sempre com o selo de segurança ativo e verde.

Agora se mudarmos para o Tipo ncora nesta Página, ele vai vasculhar se no editor temos uma âncora, na próximo ferramenta, explico com mais detalhes sobre âncora e como criá-las, em geral são links que levam para um ponto específico da página. Neste caso, se tiver uma âncora ele vai listar aqui para você

E por fim se escolhermos a opção de E-mail teremos outra configuração que quando clicado, abre o leitor e e-mail do cliente (outlook por exemplo), já com o campo de destinatário, assunto e corpo de e-mail pré-preenchido, facilitando a comunicação.

Além dos tipos de links temos mais duas abas uma delas é de destino, que só funciona para URL e ncora, com esta aba podemos fazer com que o link abra na mesma janela do navegador, em outra janela, frame, etc…

Já na aba Avançado temos algumas configurações que podem ser útil para você, caso tenha um conhecimento mais avançado em HTML e CSS, mas de vias gerais o que mais poderá precisar é o ID que poderá servir de âncora ou para CSS avançado, Título para SEO, Classe de CSS (para estilos adicionais), Estilos para CSS in-line no link (código dentro do link) e a opção de “Forçar Download”, usado para que a pessoa possa baixar um PDF ou arquivos que esteja disponibilizando.

Comentei mais acima que podemos fazer link com imagem, vou falar disso logo mais a frente, vamos usar a ferramenta apropriada 😉

Dica: Para editar novamente um link, basta dar um duplo clique sobre ele que a caixa abre novamente com os parâmetros que configurou.

15 – ANCORA

Como citei acima, o link de uma página pode apontar para uma âncora, âncoras servem para marcar pontos chaves de uma página que quando passado junto com a URL faz com que ela “desça’ ou carregue naquele exato ponto.

Por exemplo, podemos colocar no rodapé da loja um link que leva para a âncora para abaixo do banner, para uma promoção ou cadastro de newsletter, assim a pessoa não precisa rolar até lá em cima. É muito útil quando estamos em uma página ou enviamos um link para que quando a pessoa abra o link ele cai no exato ponto que ela precisa, por exemplo um banner no meio da página inicial ou o link de download do manual de um produto na sua descrição.

Para criar, é muito simples, basta colocar o cursor na parte do texto que deseja, clicar no símbolo de “bandeira” e dar um nome, tente não usar caracteres especiais, sempre coloque um nome único na mesma página e salvar, ele vai ter uma marcação vermelha no editor mas não aparecerá no site.

16 – IMAGEM

Este também é um dos mais importantes itens do editor, é com ele que vamos colocar imagens e textos juntos na descrição de produto, em banners nas áreas personalizadas na página inicial da loja, criar postagens do blog com imagens e textos, e etc…

Ao clicar no recurso vamos ter uma tela com 3 abas e algumas opções, vamos explorar a primeira aba, a de Informações da Imagem. Aqui a primeira ação é clicar em “Localizar no Servidor” é aqui eu vamos puxar a imagem que está no editor de imagens, você pode neste campo de URL também colocar uma URL externa, mas cuidado tenha certeza qeu possa usar a imagem e coloque ela em HTTPS. assim garantimos a segurança da loja.

Logo abaixo temos o texto alternativo, que é bom para SEO, leitores de tela e em caso da imagem falhar, tem um texto do que se trata a imagem. Note também que temos um campo de pré-visualização logo abaixo na direita, e na esquerda temos a largura e altura, o cadeado fechado, mantém a imagem proporcional, se mudarmos os valores de largura e altura e do lado dele podemos “resetar” o tamanho original da imagem.

Abaixo podemos colocar uma borda na imagem, nos campos de HSpace e VSpace podemos controlar o espaço de borda na vertical e horizontal e no campo Alinhamento podemos colocar a imagem a esquerda ou direita do texto, todas essas opções podemos observar ao vivo no campo de visualização.

Agora na aba de Link, é onde podemos colocar link nesta imagem, temos o campo URL que pode ser de uma página interna ou externa da sua loja, ou podemos abrir uma outra imagem clicando em “localizar no servidor”, os campos de Destino segue os mesmos parâmetros da ferramenta de link.

E por fim na aba de Avançado, temos mais configurações como colocar um ID único da imagem, que pode ser usado com âncora, temos de importante o campo de Descrição da UTL que serve para o link, se usarmos na aba de link, Classe de CSS (para estilos adicionais), Estilos para CSS in-line no link (note que as dimensões, espaços e borda que colocamos estão aqui, para um ajuste mais avançado use este campo)

Dica: Para editar novamente uma imagem, basta dar um duplo clique sobre ele que a caixa abre novamente com os parâmetros que configurou.

17 – TABELAS

AS tabelas são poderosas ferramentas para te ajudar a montar um bom layout, use-as para criar colunas, linha de uma forma simples para montar banners, imagens uma do lado da outra e se não colocar tamanho nas colunas elas vão se “empilhar” no mobile ficando com uma aparência melhor (Obs: Mas lembre-se de sempre preparar conteúdo desktop e mobile separados, veja mais neste artigo aqui.

Para exemplificar uma forma de fazermos um layout bacana usando tabelas de uma forma avançada vamos criar tabela e fazer elas ficarem assim:

Um banner grande, dois pequenos no meio e um comprido na lateral usando as tabelas, antes de começar vamos pensar no Excell, imagine que temos uma tabela por cima deste desenho, temos algumas células, logo teremos o seguinte:

Vendo por este ângulo podemos criar uma tabela e mesclar algumas células para atingir o resultado que queremos, vamos a ferramenta

Ao abri teremos uma janela com duas abas, a primeira é a formatação da tabela, é onde vamos desenhar o GRID acima, logo vamos colocar então 3 linhas 3 colunas. em cabeçalho se usar este recurso como tabela, para exibir dados estes serão o cabeçalho os dados que colocamos no topo de uma coluna de planilha, não é nosso caso aqui, em em borda vamos colocar 0, pois quero que as “linhas” da borda sejam transparentes para que se tenha apenas as imagens.

Em Largura, como eu já tenho as imagens no tamanho correto, vou colocar a largura em 100% assim ela vai ocupar toda a extensão da tela e em altura não vou colocar nada, deixando as imagens definirem a altura. Em espaçamento vou colocar 0, isso define o espaço entre as células, e o margem interna, como o próprio nome diz, é o espaço interno da célula aqui vou colocar 10, para dar uma boa margem entre as imagens.
Em legenda e resumo, use apenas para Leitores de tela, coloque a descrição da tabela, campos opcionais

Em Avançado temos os mesmos campos de Id único, estilo e classe. Bom agora que criamos vamos ter a grande que desenhamos por cima dos banners

Agora basta mesclar as células, assim como fazemos no excel, mas da seguinte forma:

Para isso, selecione as células, clicar com o botão direito do mouse ir em Célula e depois em Mesclar Células.

Repetindo o mesmo processo para as células 3 e 6 teremos o seguinte resultado:

Agora como bônus, cada célula por padrão alinha a imagem no meio dela, para corrigir basta clicar com o botão direito do mouse em cima da célula (ou selecionar todas), ir em Célula e depois Propriedades da Célula, na janela que vai abrir temos as configurações isoladas da (ou das) célula que escolheu, como sugestão use o alinhamento vertical como superior, assim terá um alinhamento melhor dos banners que colocar ali

Agora é fácil vamos colocar as imagens em cada uma das células, usando o recurso de imagens que mencionamos acima ficando assim:

Lembre-se de criar as imagens já no tamanho correto e ao usar o recurso não use o tamanho fixo, deixe vazio assim a imagem vai adaptar automaticamente em telas menores ou maiores.

18 – LINHA

Este recurso vai gerar uma linha para separar textos.

19 – VÍDEO YOUTUBE

Este é um recurso poderoso para incorporar vídeos do youtube no texto, ao clicar irá abrir uma janela com algumas opções, primeiro podemos optar por colocar o vídeo de duas formas uma o código de incorporação que o próprio youtube gera para você e o segundo a URL completa, em qualquer um dos casos ele vai gerar o Iframe que roda o vídeo.

Temos algumas opções ao incorporar o vídeo, podemos definir largura e altura, mas se escolhermos que ele é responsivo ele vai ignorar estes valores e vai sempre deixar o vídeo com 100% de largura de onde ele tiver, dica aqui, use ele dentro de uma tabela, metade vídeo outra metade texto, assim no mobile um fica embaixo do outro.

Temos também a opção de mostrar apenas a imagem e um link para o vídeo, isso é bom para que a página fique mais leve e não traga peso de fora a ela. Mas se mesmo assim quer que seja reproduzido dentro do site temos a opção de reprodução automática, cuidado para não irritar o seu cliente.

E por fim a opção de iniciar em um determinado ponto do vídeo, ótimo para quem quer mostrar apenas uma parte do vídeo, mas isso não limita que o cliente possa voltar e ver do início o vídeo.

Dica: Use com cuidado, especialmente na página inicial do site. Qualquer recurso, seja vídeo, instagram, feeds que vem de sites externos pode prejudicar o carregamento da loja e na página inicial pode ser um problema e tanto que pode fazer com que caia nos ranks de pesquisas.

20 – CARACTERES ESPECIAIS

E por fim uma janela para caracteres especiais mais comuns e usados na web, como ordinais, setas, fontes com acentos especiais, etc… Para usar basta deixar o cursor do texto no ponto que deseja adicionar e clicar na janela, ao abrir escolha o caractere e clique sobre ele

Este artigo foi útil para você?!

Instrução para tradução de outro idioma

As lojas da Brasil na Web possuem a opção de outros idiomas, na base atual temos tradução para português BR, Leia mais

Este artigo foi útil para você?!

Exportar/Importar produtos via planilha

Neste treinamento vamos mostrar como podemos usar a função de exportar/importar produtos via planilha para que possa colocar vários produtos de uma só vez na loja.
Leia mais

Este artigo foi útil para você?!

Logística como diferencial no Ecommerce – Aula

Não adianta ter um excelente produto e um ótimo preço se ele não chegar ao consumidor no prazo e no Leia mais

Este artigo foi útil para você?!

SEO para Ecommerce – Aula Prática e Simples de Entender – Dicas de SEO

Aumentar o tráfego de visitantes gratuitos na sua loja virtual é uma prioridade? Você é depende do tráfego pago de Leia mais

Este artigo foi útil para você?!

Mapa do Tesouro – Ecommerce Mind Map

Quer vender online mas não sabe como funciona o mundo do marketing na internet?

Não importa o quanto você sabe Leia mais

Este artigo foi útil para você?!

Taxas de Cartão de Crédito Corroem o seu Lucro das Vendas Online ?

Cansado de pagar caro por taxas de cartão de crédito para vender online e perder dinheiro e até clientes com Leia mais

Este artigo foi útil para você?!

Frete – Vilão das Vendas Online – Como Vencer Esse Adversário no Ecommerce

Quantas você mesmo já deixou de comprar algo na internet devido ao valor do frete? O produto era legal, o Leia mais

Este artigo foi útil para você?!

Controle de Estoque ou Descontrole ? Dicas Para Superar Essa Barreira no Ecommerce

Controlar o estoque nas vendas online é um problema para você começar ou crescer no ecommerce?

Muitas pessoas acabam nem começando Leia mais

Este artigo foi útil para você?!

MarketPlaces – Quebre ou fique Rico

Vender nos Market Places como Mercado Livre, Americanas, Submarino, Amazon entre outros, é um bom negócio?

Neste vídeo eu vou contar Leia mais

Este artigo foi útil para você?!

Google Day Ecommerce – Dicas sobre Google para sua Loja Virtual

Dicas, ferramentas Google e técnicas que sua loja virtual não pode deixar de utilizar em 2019 para ter mais sucesso Leia mais

Este artigo foi útil para você?!

Vender Online é Seguro ? Conheça os riscos e proteja-se!

Já vi muitas empresas descobrirem este assunto depois que levam o primeiro cano ou golpe do cartão clonado nas vendas Leia mais

Este artigo foi útil para você?!

Ecommerce – Saia da Estaca Zero – Dica para Começar Rápido

Faz um tempo que você diz que vai criar uma loja virtual e até hoje nada?
Você vê os concorrentes ganhando Leia mais

Este artigo foi útil para você?!

O Poder do Cadastro de Produtos Bem Feito – Ecommerce

Cadastrar produtos é uma tarefa chata? Você acha que ninguém lê suas descrições e não vê sentido em investir tempo Leia mais

Este artigo foi útil para você?!

É necessário ter CNPJ para vender online ? Como durmir tranquilo

Você já vende ou quer vender online, mas ainda está na informalidade?
Pensou em abrir uma loja virtual, mas não tem Leia mais

Este artigo foi útil para você?!

Virou Escravo do Instagram? Como Escalar Vendas nas Redes Sociais

Responder as mesmas perguntas toda vez, tira você do sério?
Se toda pergunta respondida gerasse venda seria ótimo, mas essa Leia mais

Este artigo foi útil para você?!

Como adicionar minhas fotos do instagram na loja

Olá pessoal neste artigo vou mostrar como colocar o instagram na sua loja, como puxar as últimas publicações de lá. Mas antes de começar, vamos a algumas considerações importantes.

Performance da Loja
Ao colocar um plugin ou puxar as imagens de lá do instagram e colocar na sua loja podemos diminuir e muito a velocidade com que a página vai carregar, isso porque estamos puxando de um site fora do servidor da loja, por isso não recomendamos essa prática.

Tenha em vista, que o ideal seria você trazer pessoas do instagram para sua loja e não levar as pessoas da loja para o instagram, além do mais você vai precisar se dedicar muito tempo em criar novas postagens ao invés de atender o seu cliente, por isso pense bem antes de tomar essa decisão.

Serviço de terceiros
Além de depender do instagram, eles não fornecem uma forma fácil de fazer essa integração, logo precisamos de um intermediador, neste artigo vou apresentar uma solução, mas existem outras formas e empresas que fazem este serviço. Com este intermediário, vamos perder mais um pouco em tempo de carregamento, e estamos condicionados a preços e planos deles, então fique atento e de olho na velocidade de carregando da sua loja, a Brasil na Web não se responsabiliza por códigos de terceiros ok?

Bom dados os devidos cuidados e esclarecimentos vamos usar como intermediador este site www.snapwidget.com faça o seu cadastro no site, leia as regras, políticas e veja os planos que melhor lhe atendem.

Depois do cadastro, vamos e clicar em CREATE A NEW WIDGET

Na próxima tela, você pode filtrar por tipo e rede que quer, no nosso exemplo vamos filtrar por Instagram, veja que temos alguns que são de planos pagos e outros de planos gratuitos, escolha o que melhor lhe atender e esteja no plano que fez o cadastro. Neste tutorial eu vou escolher o Grid Free.

Ao escolher na próxima tela, ao clicar no Username ele vai te pedir o acesso ao seu instagram, ao acessar leia os termos e condições e clique em autorizar na janela que vai aparecer:

Agora e só configurar conforme sua necessidade, largura altura, borda etc… Após finalizar clique no botão de GET WIDGET ele vai gerar um código, copie-o e salve em um bloco de notas por segurança.

Agora vamos colar este código na loja, para colar o código você vai usar o recurso de Área Personalizadas, que fica no menu de Customização

Crie uma nova área, de um nome para ela e no editor de texto clique em Código Fonte e cole o código que copiamos do site.

Agora só escolher em que página e posição ele vai aparecer, por exemplo aqui eu vou colocar ele na página inicial na parte mais baixa do layout e exibir apenas em desktop, veja mais sobre layout se posições neste artigo: Mapa de posições da loja

 

Depois de salvar vamos conferir como ficou na página inicial.

 

DICA 001: Faça dois widgets no site, um para desktop e outro para mobile, para desktop use 6 colunas por 2 linhas e no campo Thumbnail Size use 190 para mobile use 3 colunas com 3 linhas e no campo de largura use 180. E na loja crie duas áreas uma para desktop e outra para mobile, assim irá garantir que terá o melhor dos dois tamanhos.

DICA 002: Aumente suas vendas usando o Instashop, ou seja, você pode colocar link dos seus produtos direto no instagram que apontam para a venda na sua loja, aproveite o seu público do instagram e traga-os para comprar na sua loja virtual, saiba mais neste link: Apresentação Instashop

Espero ter ajudado, até mais!

Este artigo foi útil para você?!

Recuperação Pedido

Neste tutorial mostramos um recurso para automatizar os pedidos perdidos na loja, confira!

Sobre Cupons:
https://ajuda.brasilnaweb.com.br/como-criar-um-cupom-de-desconto-na-loja-virtual/
https://ajuda.brasilnaweb.com.br/divulgue-sua-loja-em-sites-de-cupom-de-descontos/

Configuração de e-mail autenticado: https://ajuda.brasilnaweb.com.br/artigos-para-configuracao-de-email-da-loja/

Este artigo foi útil para você?!

Ecommerce de Sucesso – GiliStore – Plataforma Brasil na Web Ecommerce

Conheça como foi um pouco da Jornada do nosso cliente GiliStore para ter um ecommerce de sucesso e ganhar sua Leia mais

Este artigo foi útil para você?!

Como remover a opção de cupom de desconto da loja

Os cupons de desconto são uma ferramenta muito poderosa para seu cliente fechar uma venda no site, não aconselhamos que desabilite o recurso, veja mais neste artigo. Porém se for da política da empresa, não aplicar cupom de desconto, você pode desabilitar este recursos e deixar o carrinho sem esta opção.

Para remover a opção de Cupom de Desconto da loja, vá no menu de Configurações > Pedidos > Opções de pedidos aqui basta localizar a opção de Cupomeditar, na próxima tela, basta desabilitar.

Atenção se você já usou o cupom em alguma campanha de e-mail, ou captura de newsletter o seu cliente não vai mais poder usar quaisquer cupons que tenha ofertado, confira no menu de Vendas > Cupons se ainda tem algum cupom ativo, confira como usar este recuro neste link.

Espero ter ajudado, até mais.

Este artigo foi útil para você?!

Como remover a opção de vale presente da loja

Em alguns casos queremos que a loja tenha um carrinho de compras mais limpo ou não é a política da empresa ofertar vale presentes, veja neste artigo a importância desta prática.

Para remover a opção de Vale Presente da loja, vá no menu de Configurações > Pedidos > Opções de pedidos aqui basta localizar a opção de Vale Presenteeditar, na próxima tela, basta desabilitar.

Não se esqueça de conferir se no rodapé, tem algum link que aponta para este recurso, em geral o rodapé é editado no menu de Customização > Área Personalizada, ai basta localizar o link e remover ele pelo editor.

Espero ter ajudado, até mais.

Este artigo foi útil para você?!

Habilitando chave do Google Maps na loja

Para que o mapa que fica na página de contato da sua loja BNW funcione corretamente é preciso criar e habilitar uma chave da API do Google Maps, primeiro vamos acesse este link: https://developers.google.com/maps/documentation/javascript/get-api-key

Fazer o cadastro e inicializar  uma nova API, quando terminar acesse este link para poder criar uma nova chave para o seu site, ai basta clicar Criar credenciais  e escolher a opção de Chave de API

Após gerar a chave vamos agora, fazer alguns restrições nela, para que funcione no domínio da sua loja.

Primeiro, não é obrigatório, vamos colocar o domínio da sua loja no campo nome

Depois vamos em Referenciadores de  HTTP  e no campo que vai abrir abaixo vamos repetir o seu domínio, porém neste caso coloque como a instrução com o HTTPS e os asteriscos.

Agora só copiar a chave lá no topo e acessar a loja, no menu de + Módulos > Google Maps e ao abrir basta colar sua nova chave.

Confira neste artigo, como habilitar, desabilitar ou atualizar o mapa na página de contato da sua loja.

 

Este artigo foi útil para você?!

Meta Descrição e Meta Palavras-Chave no cadastro de produtos

Olá pessoal neste rápido artigo vou mostrar como podemos desabilitar as geração automática de meta tags da loja

Hoje por padrão da loja, e para que sempre tenha estes campos preenchidos temos a opção de Mudar meta tags automaticamente e elas puxam do conteúdo do produto e do título do produto

 

Mas você pode editar estes campos com mais dados relevantes para os buscadores, que podem ficar ruim para o seu cliente entender no título ou na descrição, logo basta desmarcar a opção de Mudar meta tags automaticamente e editar elas, porém se voltar no produto e não desmarcar esta caixa e salvar você vai perder os dados que mudou.

Existe uma forma desta caixa não vir selecionada ao abrir a edição ou cadastro de produto, assim evitando este erro, para mudar vá no menu de + Módulos > Gerador de Meta Description e Meta Tags aqui ao editar temos a opção de  Limitar o número de caracteres da descrição  e “Mudar meta tags automaticamente” ao desmarcar esta opção, todo novo cadastro ou edição de produto vai vir vazio e o que mudar vai preservar.

Para que possa entender mais sobre as técnicas de SEO confira estes artigos: divas de SEO Parte 1, Parte 2 e Parte 3

Outra dica, caso ainda use estes campos e já tenha produtos cadastrados faça um ajuste destes campos mais rápida usando o sistema de exportar e importar produtos, baixe a planilha edite os campos e suba novamente, neste artigo você pode seguir o passo a passo de como usar este recurso.

Espero ter ajudado, até mais!

Este artigo foi útil para você?!

Contrato dos correios, idCorreios e seus códigos de serviços.

Nas lojas da Brasil na Web, você pode usar a opção de entrega dos Correios, assim de acordo com os dados que colocar (peso, tamanho, CEP de origem, e adicionais) na configuração do módulo a loja vai no site dos correios, consultar em tempo real, o valor para frete disponível, em geral SEDEX e PAC e mostra para o seu cliente escolher uma das opções. Para entender melhor como funciona este serviço de uma conferida neste artigo.

Em geral é um ótimo recurso para quem está começando seu ecommerce, pois vai encontrar facilidade para poder despachar seus produtos. Mas as vezes, o preço pode ser mais caro, uma forma de custear o valor é criando um idCorreios e contatando um serviço, assim podemos baratear o custo de frete um pouco, faça o cadastro entre em contato com eles para poder negociar e vincular isso ao seu idCorreios e obter sua tabela de serviços.

Com este contrato acertado e a tabela de serviços em mãos, vamos configurar na sua lá, vá em Configurações > Opções de Frete> Correios (Brasil), a primeira configuração a fazer é ir no campo Contrato com os Correios e colocar o seu Código administrativo e Senha do IdCorreios.

Agora vamos conferir na sua tabela de serviços qual o código do serviço para PAC e SEDEX (ou outros), hoje na sua loja temos as seguintes tabelas disponíveis (atualizado em 24/03/2020):

SEDEX 40096, 04162, 40444, 40568, 04553, 03050 e 40606
PAC 04669, 04596, 03085 e Grandes Formatos

Sempre estamos atualizando esta tabela, porém os Correios podem mudar sem aviso prévio, se sua tabela esta´diferente ou faltando algum código chamado neste link aqui solicitando alteração que iremos avaliar e ajustar o mais rápido possível.

Veja a diferença de valor para este contrato que mostrei aqui:

Lembre-se a loja não faz nenhum tipo de calculo, todos os valores para os Correios, é decidido no site dos correios, mantenha o cadastro dos produtos sempre atualizado com relação ao peso e medidas, confira se seu CEP está certo com o seu centro de distribuição e confira as opções extras de prazo e valores, na dúvida de uma olhadinha neste treinamento onde falamos deste módulo e dos demais meios de entrega.

Isso pode ser um fator decisivo para que seu cliente compra em sua loja, então não perca tempo, entre em contato com os Correios, faça seu cadastro e configure na sua loja!

Erros comuns

Novos contratos podem levar mais tempo para funcionar, por não estarem liberados para consulta no WebService de Preços e Prazos, Entre em contato conosco e abra também um chamado nos correios para análise do seu contrato, o número de contato é 3003-0888

Verifique sua senha do idCorreios, em geral este erro ocorre por ter trocado a senha do se painel, eles enviar uma senha inicial, caos troque a senha deverá trocar também na loja, no campo de Senha na parte de contrato dos Correios (menu: Configurações > Opções de Frete> Correios (Brasil))

Espero ter ajudado, boas vendas!

Este artigo foi útil para você?!

Esconder preço da loja – Exibir apenas para cliente logados

Em alguns modelos de negócios de ecommerce, é preciso esconder o preço dos produtos e exibir somente para clientes cadastrados e validados na loja. Nas plataformas da Brasil na Web você pode fazer este ajuste, basta ir no menu de Configurações > Opções da Loja depois clicar na aba de Opções e na seção de Conta temos o campo de Autenticar para Exibir Preço basta marcar como sim e os preços da sua loja só serão exibidos se o cliente tiver logado na sua loja. Lembrando que ele só vai comprar também se tiver logado 😉

★ Bônus

Hoje por padrão da loja o consumidor pode entrar, se cadastrar e realizar a compra, mas em geral, neste tipo de modelo de negócio de ecommerce, em que o preço fica oculto, o consumidor só pode comprar se tiver o cadastro previamente aprovado, e na plataforma podemos fazer isso também, mesmo que o cliente se cadastre ele irá depender de uma avaliação do lojista para comprar.

Para isso vamos editar os grupos de clientes, vamos no menu de Cadastros > Clientes > Grupos de Clientes aqui você pode trabalhar com ou mais grupos de clientes, veja neste artigo mais sobre grupos de clientes, ao editar um grupo temos o campo de Aprovar Cliente se marcar aqui como sim, e o cliente estiver dentro deste grupo, somente depois de aprovado (Menu de Cadastros > Clientes> Clientes botão de Aprovar) que ele poderá executar a compra na sua loja.

E para finalizar, você notou que pode definir se o seu grupo de cliente é padrão, assim quando quando o consumidor realizar o cadastro já cai neste grupo, vamos voltar no menu de Configurações > Opções da Loja depois clicar na na de Opções e na seção de Conta temos aqui neste tela mais dois campos um de Grupo de Cliente que define qual o grupo padrão e o segundo que é o Grupos de Clientes que se selecionado mais de um na tela de cadastro na loja ele fica aberto para escolha do cliente.

Veja como fica na tela de cadastro do cliente, podemos até fazer o seguinte o grupo de consumidor é aberto para cadastro, sem aprovação, mas se ele escolher outro grupo, no meu exemplo acima Revenda, ele só compra se tiver o cadastro revisado e aprovado.

Vou deixar abaixo alguns artigo que falamos mais sobre revenda, B2B, Revenda, Atacarejo, etc…

10 Perguntas e dicas sobre planejamento de ecommerce
Configurar modo Atacado, B2B ou Revendedor
Desconto para grupo de clientes

Até mais!

 

Este artigo foi útil para você?!

Como processar uma Nova Devolução ou Troca

Toda loja virtual da Brasil na Web conta com uma página de Troca ou Devolução de produtos, conforme recomenda a Lei do Ecommerce.

Confira a página de devolução ou troca da sua loja virtual:

Vamos ver como é o formulário de devolução, ao clicar no link de nova troca ou devolução ele ficará nesta URL: www.sualoja.com.br/nova-devolucao neste link temos o formulário onde o cliente vai colocar os dados para a devolução, mesmo ele não estando logado ele vai conseguir enviar, isso para facilitar ainda mais o processo.

Caso o cliente envie uma solicitação de devolução sem estar logado, será preciso editar a solicitação para vinculá, a solicitação ao cadastro do cliente, assim quando vinculado ou se a solicitação foi feita com ele logado na loja, em seu painel de cliente no menu de “Minhas Devoluções” para que possa acompanhar o processo, e cada etapa ele receberá uma notificação por email.

Para você lojista as notificações ficarão na tela inicial da sua loja

Processando uma nova devolução

Para processar ou editar (caso o cliente tenha feito a solicitação sem estar logado), vamos no menu de Vendas > Devoluções, temos a opção de exportar todas elas em um formato de XLS, inserir uma nota (seja pró-ativo caso tenha identificado algo errado) ou excluir um pedido que não seja real.

Primeiro vamos ao caso de vincular uma solicitação ao cadastro do cliente, basta editar e no campo de “Cliente” digitar o nome do cliente, e depois clicar na opção suspensa e salvar. Assim esta nova solicitação vai aparecer no cadastro do cliente.

Agora vamos clicar em editar, para processar o pedido, temos aqui uma tela bem parecida com a de pedidos, na primeira aba os detalhes de quem solicitou a segunda de qual produto, aqui podemos escolher 3 ações que estão dentro do CDC que são Enviar substituição do produto, Incluir um crédito no site e Estornar o valor.
Mas mais uma vez, lembre-se de ser transparente com seu consumidor e dar ele as opções. Neste campo basta mudar que ele vai salvar para você.

Na terceira aba temos a opção de histórico e é aqui que enviamos para o cliente as notificações , não deixe de marcar a caixa de “Notificar o cliente”

Lembre-se uma boa relação com seu consumidor irá lhe atrair mais indicações para sua loja, mas uma experiência ruim, um processo burocrático e oneroso só vai prejudicar sua reputação e deixar oportunidades escaparem.

Espero ter ajudado, até mais!

Saiba mais: Devoluções – Devolução e arrependimento de compra no ecommerce
Veja também: Ajustar Termos de Devolução na loja virtual

 

Este artigo foi útil para você?!

Ajustar Termos de Devolução na loja virtual

A Brasil na web sempre preocupada com as boas práticas da lei, deixamos já salvo na sua loja a página de Política de Troca e Devoluções, com alguns textos básicos e padrões, aconselhamos muito que você leia com calma e revise se estes termos e padrões se encaixam no seu padrão e logística e faça qualquer ajuste necessário!

Para Editar os Termos de Devolução acesse Painel Administrativo > Menu > Customização > Páginas Institucionais

Basta editar a página de “Política de Troca e Devolução” como achar melhor.

Se você alterar o NOME desta página, a url (endereço eletrônico) da mesma será alterada, e a questão é que o link original dela já existe no rodapé de toda loja virtual na Brasil na Web por padrão.

Então, se você alterar o nome da página, atualize o link da mesma no rodapé da loja virtual.

Não remova o link do rodapé, dificultar as coisas para o seu cliente podem agravar qualquer situação judicial no futuro. Siga essa boa prática e mantenha o link certo sobre a política de devolução bem como o link para a página de abertura de nova devolução ou troca (www.seudominio.com.br/nova-devolucao).

Para colocar o link no rodapé da loja, basta usar uma área personalizada (Menu de Customização > Área Personalizada) e adicionar um novo link, veja este treinamento para saber como colocar.

Importante manter esses dados da página atuais, pois eles serão os termos que estarão no formulário de devolução. Caso mude o nome da página ou queira colocar outros termos, vá no menu de Configurações > Opções da Loja vá na aba de Opções na sessão de Devoluções e no campo de Termos de Devoluções escolha a página que criou ou editou.

Saiba mais: Devoluções – Devolução e arrependimento de compra no ecommerce
Veja também: Como processar uma Nova Devolução ou Troca

Este artigo foi útil para você?!

Pacote Expresso – Como enviar seu material como logo e fotos

Você contratou o Pacote Expresso da Brasil na Web e agora é hora de enviar o seu material para nossa equipe, veja como fazer:

LOGO – MARCA:

Nos envie o arquivo da sua marca preferencialmente com fundo transparente no formato PNG. Também aceitamos os formatos AI, EPS, PSD e PDF, se estiverem em vetor iremos remover o fundo.

ORGANIZAÇÃO DOS ARQUIVOS:

Organize os arquivos por pasta compactada (ZIP), por exemplo fotos_para_banner.zip, fotos-de-produtos.zip, marca.zip, etc..

Importante: Não use “espaços” ou caracteres especiais nos nomes dos arquivos, por exemplo: “este é meu arquivo.jpg”

Mude para: este_e_meu_arquivo.jpg ou esteemeuarquivo.jpg isso vale para qualquer arquivo.

ARQUIVOS GRANDES?

Podemos compartilhar com você uma pasta do nosso GOOGLE DRIVE e você coloca diretamente lá.
Ou se preferir você pode colocar arquivo em sites como WETRANSFER ou DROPBOX e abrir nos informar o link de download abrindo um chamado.

TUDO CERTO? HORA DE ENVIAR!

Clique no botão abaixo para abrir um chamado direto para a equipe de Projetos. Você precisa fazer login na sua área de cliente.
Lembre-se: Somente contatos autorizados podem abrir chamados para o seu negócio.

ENVIAR MEU MATERIAL

Este artigo foi útil para você?!

Como colocar dois números de whatsapp flutuante na loja

Olá pessoal neste artigo vou mostrar como podemos colocar dois números de whatsapp em só um botão flutuante na loja, só lembrando que a loja tem este recurso na base, mas para um botão só, veja aqui neste link.

Antes de começar, só para ficar claro este “botão flutuante” é um recurso disponibilizado pela API do whatsapp, em resumo, vamos usar a parte que permite criar um link e deste link abrir o whatsapp web ou o aplicativo (se tiver no celular). Improtante este é um recurso de terceiros, isso deixa o código fora da sua loja, então se o link um dia parar de funcionar, teremos que procurar outra solução. A Brasil na Web não se responsabiliza por códigos de terceiros ok?!

Bom agora que sabemos com funciona o “botão”, vou ensinar como fazer este visual:

Aqui temos uma ação para fechar a caixa, uma imagem da logo do whatsapp e dois telefones cada um com um link para abrir o whatsapp, para isso vamos precisar de 3 passos avançados, então leia com calma, copie e cole os códigos em cada local indicado abaixo, vamos lá.

1) CRIE UMA ÁREA PERSONALIZADA

Vamos criar uma área personalizada para colocar o código visual e é aqui que vamos trocar ou adicionar mais telefones e links, vá no menu de Customização > Áreas Personalizadas, vamos adicionar uma nova área, coloque um nome fácil de se lembrar, e na edição de texto clique no botão Código Fonte e cole o código abaixo:

<div id="abre_janela_wp"><span class="fa fa-chevron-left"><i>abre</i></span></div>
<div id="fecha_janela_wp"><span class="fa fa-chevron-right"><i>fecha</i></span></div>
<div id="janela_wp">
	<p><img src="/image/data/fale-whatsappweb.png"></p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514996837689&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9683-7689</span>
		</a>
	</p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514991280480&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9128-0480</span>
		</a>
	</p>
</div>

Volte e clique no botão de Código Fonte e ai poderá editar os dados aqui, mude a imagem, neste link você pode baixar a imagem do exemplo acima, basta clicar duas vezes na imagem “quebrada” e substituir por esta imagem que estou disponibilizando. Para os números e links basta tocar o texto e mudar a URL.

Pra gerar o link da API, use nossa ferramenta de gerar link de whatsapp, basta coloca o(s) seu(s) telefones de wahtsapp e gerar a URL, depois só colocar ela como link do telefone, veja neste tutorial como colocar link em texto e imagens, caso tenha dúvida.

Agora que editamos os textos, links e imagens vamos rolar um pouco a tela e vamos fazer as configurações deste módulo. Vamos ocultar o título, vamos colocar no layout “Todas as Páginas”, na posição “Rodapé Inferior”.

2) ADICIONE O CSS AVANÇADO

Agora vamos no menu de Customização > Personalização depois na aba de Avançado e vamos colar o trecho abaixo de CSS, mas MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

.whatsapp-duplo{margin: 0}	
	#abre_janela_wp,
	#fecha_janela_wp,
	#janela_wp{
		position: fixed;
		right: 0;
		top: 160px;
		z-index: 500;
		background: #27ae60;
		color: #FFF;

		-webkit-border-top-left-radius: .3rem;
		-webkit-border-bottom-left-radius: .3rem;
		-moz-border-radius-topleft: .3rem;
		-moz-border-radius-bottomleft: .3rem;
		border-top-left-radius: .3rem;
		border-bottom-left-radius: .3rem;
		-webkit-box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		-moz-box-shadow: 0 0 .3rem 0 rgba(50,50,50,0.75);
		box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		background-color: #27ae60;

		-webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			 -o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;		
	}

	#abre_janela_wp,
	#fecha_janela_wp{
		z-index: 500;
		top: 120px;
	}
		#abre_janela_wp{right: -50px}

	#abre_janela_wp span, 
	#fecha_janela_wp span{
		display: block;
		font-size: 20px;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		cursor: pointer;
	}
		#abre_janela_wp span i, 
		#fecha_janela_wp span i{display: none;}	

	#janela_wp{
		z-index: 5800;
		padding: 10px 15px;
		text-align: right;		
	}
		#janela_wp a,
		#janela_wp a:hover{
			font-size: 18px;
			text-decoration: none;
			color: #FFF
		}
		#janela_wp a .ddd{font-size: 14px;}

	#abre_janela_wp.open    {right: 0 !important;}
	#fecha_janela_wp.close  {right: -60px !important;}
	#janela_wp.close        {right: -250px !important;}

3) ADICIONE O JAVASCRIPT AVANÇADO

E por fim vamos colocar o código de Javascript na mesma tela, um pouco mais abaixo, MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

$(function(){
	$('#fecha_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').addClass('close');
		$('#abre_janela_wp').addClass('open');
		$('#fecha_janela_wp').addClass('close');
	});

	$('#abre_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').removeClass('close');
		$('#abre_janela_wp').removeClass('open');
		$('#fecha_janela_wp').removeClass('close');
	});
});

Bom com isso vamos ter o mesmo visual, não se esqueça de subir a imagem que usei neste exemplo ou trocar por outra que achar melhor, já estamos pensando em fazer um recurso mais elaborado por dentro da loja, fique de olho nas atualizações.

Espero ter ajudado, e até mais!

Este artigo foi útil para você?!

Ecommerce de 1 Milhão em Vendas – O que eles fazem?

O que Meus Clientes de 1 Milhão em Vendas Fazem no Ecommerce

Nesta edição do Brasil na Web Talk Ecommerce reuniões Leia mais

Este artigo foi útil para você?!