Neste rápido vídeo vamos mostrar como gerar o token dentro do painel eRede e onde habilitar o módulo em sua Leia mais
All posts by Adriano Meira
Link pop-up na loja – Lightbox
Olá pessoal hoje vou ensinar para você uma forma de colocar um link para abrir um pop-up, ou seja, abrir uma página ou conteúdo na mesma janela que o link está, é um recurso muito valioso para quem quer colocar uma mensagem ou conteúdo sem que saia da tela, por exemplo um link para abrir manual do produto, cupom de desconto e etc.
Atenção vamos fazer isso com código avançado da loja, tome muito cuidado ao colocar esses dados lá, então vamos lá. Primeiro vamos acessar o painel da loja e vamos no menu de Customização > Personalizar aqui vamos na aba de Avançado e no campo de JavaScript vamos colar o seguinte código:
$(document).ready(function() { if(is_mobile){ $('.abre-pagina').colorbox({width:'90%', top: '30px'}); }else{ $('.abre-pagina').colorbox({width:'50%'}); } });
ATENÇÃO: Se houver outro trecho de código aqui, cole no final dele ok? Sempre na última linha “de um enter” e cole o código acima.
Neste trecho de código temos um “validador” de mobile, assim poderá fazer com que o esta caixa abra em tamanhos diferentes para telas menores, se desejar usar só uma instrução, com porcentagem você pode usar o seguinte código mais “enxuto”:
$('.abre-pagina').colorbox({width:'90%'});
Neste código acima ele vai abrir com largura de 90% do navegador seja ele desktop ou mobile. Agora vamos salvar e vamos criar uma página.
Neste exemplo vou colocar um link para um cupom de desconto que já criei, quer saber como criar cupons de desconto, saiba como aqui..
Com o cupom criado vamos no menu de Customização > Páginas institucionais para criar o conteúdo do pop-up, insira uma nova página e capriche no conteúdo.
Agora vamos copiar a URL desta página, esta informação fica na aba de Dados, copie e guarde ela para colocarmos no link.
Agora eu vou colocar o pop-up, em uma barra abaixo do meu banner principal, para chamar a atenção e as pessoas possam usar este meu cupom, no menu de Customização > Áreas personalizada eu criei uns mini-banner de destaque da minha loja, e um deles é o cupom.
Aqui estou usando uma imagem, para que funcione corretamente você precisa colocar uma classe no link da imagem, então clique no ícone da opção de link na barra de ferramentas:
Ao abrir a caixa de edição de link, vamos na aba de Avançado e no campo Classe de CSS vamos colocar “abre-pagina”, isso vai ativar o POP-UP
Agora na aba de Informações vamos colocar a URL da página que criamos com um parâmetro a mais, no meu exemplo ficou
https://www.SEUDOMINIO.com.br/pop-up-cupom-primeira-compra?information_popup=1&title=no
– Coloque sempre a URL completa da página, sem ela não vai abrir corretamente.
– Ai na URL temos dois parâmetros um que habilita o pop-up (information_popup) e outro que remove o título da página (title)
Agora vamos salvar e tesar na nossa loja.
Bacana não, use este recuro tanto em imagens ou links, em qualquer parte da loja que tenha o editor ou possa colocar um link com essa classe. Você pode até abrir outros sites dentro usando a função de iFrame, para isso você vai precisar mexer no código avançado, neste link tem a documentação do plugin completa, mas tome cuidado é preciso um pouco de conhecimento em Linguagem de Javascript, se tiver alguma dúvida não deixar e entrar em contato com nossa central de suporte.
Até mais!
Página de Sucesso – Mensagem de compra finalizada
Olá pessoal neste artigo vou falar rapidamente de uma página da sua loja bem importante, a Página de Sucesso, também conhecida como mensagem de compra finalizada. Esta página vai aparecer após o seu cliente efetuar uma compra na loja, seja qual for o meio de pagamento que ele escolheu.
Logo devemos deixar informações úteis ali como o link para o pedido recém realizado, falar de pontos de fidelidade, se você utilizar, segunda via para pagamento, e etc… então vamos começar acessando essa página no menu de Configurações > Pedidos > Página de Sucesso
Veja abaixo a listagem de campos e funções deles nesta tela:
Status | Você pode habilitar ou desabilitar essa página, se desabilitar será substituída por uma mensagem padrão. |
---|---|
Status Banner Ebit | Se você possui cadastro no Ebit, você pode habilitar ele aqui e já deixar nesta tela o banner para que possam votar na sua loja. |
Seu ID Ebit | Coloque o ID do seu cadastro do Ebit, este campos será obrigatório se habilitar o de cima |
Seu ID Buscapé | Aqui o mesmo caso do Ebit, se tiver cadastro do Buscapé, coloque aqui o seu ID |
Abrir Lightbox Ebit | Ao clicar no Ebit ele abre outra página, para não perder o foco do seu cliente, você pode fazer com que ele ao clica aparece uma tela sobre esta de sucesso, sem que ele recarregue ou saia da tela original. |
Texto para compartilhamento no Twitter | Defina o texto padrão que você deseja que seja utilizado para compartilhamento no Twitter |
Hashtags | Lista de hashtags separadas por vírgula, sem o caracter #. Exemplo: loja, compra, minhaloja, melhorloja |
Agora para a edição da mensagem você pode usar alguma tags, que serão substituídas por códigos, como número do pedido, página de contato, e etcc. veja abaixo a relação:
{account_link} | Será substituído por um link para a página da conta do cliente (se logado) |
---|---|
{contact_link} | Será substituído por um link para a página de contato |
{customer_email} | Será substituído pelo e-mail do cliente |
{downloads_link} | Será substituído por um link para a página de downloads do cliente (se logado) |
{orders_link} | Será substituído por um link para a página de pedidos do cliente (se logado) |
{order_id} | Será substituído pelo número do pedido |
{facebook} | Adiciona um botão para compartilhamento no Facebook |
{twitter} | Adiciona um botão para compartilhamento no Twitter |
Já deixamos um padrão bem legal com um estilo bem legal, mas se desejar mudar podemos por exemplo colocar, uma mensagem para compartilhar no Facebook sua loja, então vamos colocar assim:
Gostou da nossa loja? Compartilhe em suas redes sociais: {facebook} {twitter}
Assim a tag de {facebook} e {twitter} será substituída pelo botão de compartilhar de cada um, outro exemplo podemos compor o link para ver o pedido recém realizado. Abra a caixa de edição de link, ou na caixa de imagem na aba de link, vamos usar o protocolo “outro” e colocar a a seguinte URL: detalhe-pedido?order_id={order_id} onde a tag {order_id} será substituída pelo código de identificação deste pedido.
Espero ter ajudado, boas vendas e até mais!
Configurações Gerais da Loja Virtual – Menu Configurações – Opções da Loja
Olá pessoal neste artigo vou mostrar e explicar sobre as opções da loja, nesta parte da loja vamos configurar vários aspectos, como e-mails, notificações, CNPJ, dados para SEO, usabilidade e muito mais, para acessar as opções da loja vá no menu de Configurações > Opções da Loja abaixo vou deixar uma tabela com cada aba em azul, suas opções e um abreve explicação de onde esta configuração vai afetar, vamos lá!
Geral | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Nome Fantasia | Se não houver pode ser um nome fictício para a loja. | Será usado nos e-mails automáticos, no rodapé da loja junto com o CNPJ. |
Razão Social | Se não houver pode ser o nome do proprietário. | Para fins de páginas de contrato e termos da sua loja. |
CNPJ | Seu Cadastro Nacional da Pessoa Jurídica junto a Receita Federal. | Para fins de páginas de contrato e termos da sua loja e no rodapé da loja junto com o CNPJ. |
Exibir o CNPJ no rodapé? | Você pode escolher exibir ou não o seu CNPJ no rodapé e demais locais. | Atenção: Confira sobre a remoção do CNPJ na Lei de Ecommerce |
Endereço | Endereço físico/legal da sua loja | Será exibido na página de contato. |
Conta de e-mail que pode ser usado como destinatário ou remetente de algumas mensagens. | ||
Telefone | Telefone fixo da loja | Pode aparecer no topo ou na página de contato. |
Telefone para Whstaapp da sua empresa. | Pode aparecer no topo ou na página de contato. | |
Fax | Fax da sua empresa |
Loja | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Título | Título da sua loja, pode se usar o nome fantasia ou fictício. | Ele vai aparecer no topo dos navegadores (nas abas de navegação), ele vai aparecer na home demais páginas (exceto tela de produtos) |
Meta Descrição | É uma descrição que será colocada automaticamente no HTML principal da loja com o fim de fornecer um resumo da página para buscadores. |
Localização | ||
Sessão | ||
---|---|---|
Campo | Explicação | Onde vai afetar na loja |
País Padrão | País padrão da loja | Para tela de cadastro de clientes. |
Estado Padrão | Estado padrão da sua loja, ou local do centro de distribuição. | Para tela de cadastro de clientes. |
Idioma Padrão (Loja) | Você pode trabalhar com vendas em outros países, ao usar uma nova língua e ver as mudanças, limpe o cache do seu navegador e redefinir o cookie existente. | Ao adicionar uma nova língua na sua loja no painel administrativo vai abrir uma nova aba em todos os lugares que você edita conteúdo e no topo da loja vai ficar as bandeiras que criar, aqui você define qual a principal língua e vai ser carregada ao entrar na loja. |
Idioma Padrão (Administração) | Além da loja, você pode colocar todo o painel administrativo em outra língua. | Ao adicionar uma nova língua na sua loja no painel administrativo vai abrir uma nova aba em todos os lugares que você edita conteúdo. |
Moeda Padrão | Seguindo a ideia d vender em outros países você pode definir outras moedas e colocar elas aqui uma como padrão. | Ela vai aparecer no topo da sua loja, com o símbolo que cadastrar. |
Atualizar Moeda Automaticamente | Se trabalhar com outras moedas, pode haver variação diária, logo sugerimos que deixe marcado como Sim. | Será alterado apenas o valor do produto na loja. |
Unidade de Medida Padrão | Você pode cadastrar outras medidas padrões, como Metros Cúbicos e definir aqui qual a medida padrão. | Será mudado no cadastro do produto a medida já pre-escolhida. |
Unidade de Peso Padrão | Você pode cadastrar outras medidas padrões, como Polegadas e definir aqui qual a medida padrão. | Será mudado no cadastro do produto a unidade já pre-escolhida. |
Opções | ||
ITENS | ||
---|---|---|
Campo | Explicação | Onde vai afetar na loja |
Itens por Página (Loja) | Quantidade de itens que serão exibidos por página na loja. | Isso vai afetar as telas de listagem de categorias e busca |
Itens por Página (Administração | Quantidade de itens que serão exibidos por página na administração | Isso vai afetas apenas o painel administrativo da loja, tela como listagem de clientes, produtos, pedidos, etc.. |
PRODUTOS | ||
Campo | Explicação | Onde vai afetar na loja |
Qtd de Produtos no Departamento | Exibir o número de produtos nos departamentos e subdepartamentos | Aparece um número ao lado do nome da categoria com o total de produtos pertencentes a ela. Ao desativar esta opção você pode melhorar o desempenho de sua loja. |
Permitir Comentários | Clientes podem fazer comentários sobre os produtos | Tela de detalhes de produtos. |
Permitir Downloads | Venda de downloads (apostilas, manuais, etc..) na loja | Aparece na tela do cliente da sua loja um menu para esta opção. |
VELES PRESENTES | ||
Campo | Explicação | Onde vai afetar na loja |
Valor Mín. para Vale Presentes | Valor mínimo para a compra de um vale presentes | |
Valor Máx. para Vale Presentes | Valor máximo para a compra de um vale presentes. | |
IMPOSTOS | ||
Campo | Explicação | Onde vai afetar na loja |
Exibir Preços com Impostos | Exibir os preços dos produtos da loja já com os impostos | Altera apenas a exibição do preço dos produtos na loja. |
Validar Número VAT (IVA) | Validar o número VAT (IVA) com o serviço http://ec.europa.eu | |
Utilizar Endereço da Loja para Cálculo de Impostos | Utilize o endereço da loja para calcular impostos caso o cliente não esteja logado. Você pode optar por utilizar como endereço de envio ou de pagamento. | Altera apenas a exibição do preço dos produtos na loja. |
Utilizar Endereço do Cliente para Cálculo de Impostos | Utilize o endereço padrão do cliente quando ele logar para calcular os impostos. Você pode optar por utilizar como endereço de envio ou de pagamento. | Altera apenas a exibição do preço dos produtos na loja. |
CONTA | ||
Campo | Explicação | Onde vai afetar na loja |
Clientes Online | Monitorar o acesso de clientes via relatório de clientes online | Apenas relatório na área administrativa da loja. |
Grupo de Clientes | Grupo de clientes padrão no cadastro de clientes da loja. | Este grupo vai ser o primeiro cadastro do cliente na sua loja, se desejar pode criar novos grupos e definir aqui. |
Grupos de Clientes | Caso marque mais de um grupo, o seu cliente poderá selecionar em que grupo deseja se cadastrar. | altera na tela de cadastro de novo cliente na loja. |
Autenticar para Exibir Preços | Só exibir os preços dos produtos quando o cliente estiver autenticado na loja? | Em todas as telas que o produto é exibido o preço fica oculto e só aparece quando o cliente está logado. |
Termos para Cadastro | Termo que o cliente deverá obrigatoriamente aceitar para cadastrar-se na loja. | Este termo fica na tela de cadastro do cliente e no checkout. |
FINALIZAR PEDIDO | ||
Campo | Explicação | Onde vai afetar na loja |
Exibir Peso no Carrinho | Exibir o peso dos produtos na página do carrinho | Apenas na tela do carrinho. |
Termos para Pedido | Termo que o cliente deverá obrigatoriamente aceitar para finalizar um pedido na loja. | Este termo fica no checkout da loja. |
Edição do Pedido | Número máximo de dias em que um pedido pode ser editado. Isto é necessário, pois os preços e descontos podem ser alterados corrompendo assim a estrutura do pedido. | Apenas na tela de pedidos do administrativo da loja. |
Prefixo da Fatura | Escolha qual será o prefixo da fatura antes do número da mesma. Ex.: FAT-2012 | Isso vai aparecer no número do pedido do cliente e para você no painel da loja. |
Situação do Pedido | Situação padrão do pedido quando finalizado pelo cliente. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
Situação do Pedido Completo | Situação do pedido que o cliente deve alcançar para pode acessar os downloads de produtos ou utilizar vales presente. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
Situação do Pedido Cancelado | Situação do pedido quando ele é cancelado por algum motivo. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
Situação do Pedido para 2ª Via | Situação do pedido que permite ao cliente tentar pagar o pedido novamente. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
Situação do Pedido Processado | Situação do pedido quando ele é considerado processado. Escolha aqui qualquer status que indique que o pedido foi “convertido”. Essa configuração será utilizada para medir a taxa de conversão da sua loja. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
Situação do Pedido Pago | Situação do pedido quando ele é considerado pago. | Isso vai aparecer no status do pedido do cliente e no seu fluxo de pedidos dentro do painel da loja. |
ESTOQUE | ||
Campo | Explicação | Onde vai afetar na loja |
Exibir Estoque | Exibir a quantidade em estoque na página do produto | Será exibido o estoque do produto, na tela de detalhes do produto logo abaixo do preço. |
Exibir Aviso de Sem Estoque | Exibir mensagem de que não há estoque para um determinado produto quando ele for adicionado ao carrinho de compras? | Essa mensagem aparece na tela de carrinho do produto, caso ele esteja sem estoque. |
Venda sem Estoque | Permitir que clientes comprem o produto mesmo quando estiver fora de estoque. | |
Situação do Estoque | Situação padrão de estoque que aparecerá no cadastro de um novo produto. | Apenas no cadastro de produto pelo painel da loja. |
AFILIADO | ||
Campo | Explicação | Onde vai afetar na loja |
Termos para Afiliado | Termo que o candidato a afiliado deverá obrigatoriamente aceitar para cadastrar-se no Programa de Afiliados. | Irá aparecer na tela de cadastro de novo afiliado. |
Status do pedido para liberação da comissão | Situação do pedido em que a comissão pode ser liberada pro afiliado automaticamente. | No painel do afiliado irá aparecer o valor de comissão. |
Comissão para Afiliados (%) | Valor percentual padrão que todos os afiliados receberão de comissão baseado no preço total do pedido. | Esta valor aparece no texto de entrada do login do afiliado. |
DEVOLUÇÕES | ||
Campo | Explicação | Onde vai afetar na loja |
Termos de Devolução | Após selecionado, o cliente será forçado a concordar com os termos antes de solicitar a devolução. | aparece na tela de devolução de produtos. |
Situação da Devolução | Situação padrão da devolução quando for feita uma solicitação pelo cliente. | Aparece no status do pedido do cliente e no seu fluxo de pedidos. |
Situação da Devolução Finalizada | Situação da devolução quando ela é dada como finalizada. | Aparece no status do pedido do cliente e no seu fluxo de pedidos. |
Usabilidade | ||
GERAL | ||
---|---|---|
Campo | Explicação | Onde vai afetar na loja |
Ordem | Essa será a ordenação padrão na listagem de produtos. | Altera nas páginas de Categoria, Fabricantes e Busca. |
Redimensionamento de imagem | Você pode optar por deixar o sistema criar miniaturas das imagens da loja com o tamanho padrão, preenchendo com espaços brancos (padrão da opencart) ou cortar elas em formato quadrado, cortadas no centro preenchendo o espaço destinados a elas. | Todas as páginas que exibem produtos, página inicial, listagens, produtos, carrinho etc.. |
Posição da logo nos e-mails enviados pela loja | Nos e-mails automáticos da loja, como confirmação de pedido, você pode optar pode colocar a logo da loja no topo ou no rodapé deste e-mail. | E-mails automáticos da loja |
Exibir percentual de desconto nos produtos em promoção | Ao habilitar essa opção, ao invés de exibir o texto Promoção, a loja exibirá o valor do percentual de desconto. | Nas listagens de produtos (categorias, busca, etc..), carrosséis de produtos, tela de detalhes de produtos e carrinho. |
Texto para produtos em promoção | Aqui você pode definir o texto que aparece para produtos em promoção. Ex.: OFF, PROMOÇÃO, DESCONTO | Nas listagens de produtos (categorias, busca, etc..), carrosséis de produtos, tela de detalhes de produtos e carrinho. |
Ocultar preço do produto se ele estiver indisponível | Se o produto tiver fora de estoque, você pode ocultar o preço dele na loja. | Nas listagens de produtos (categorias, busca, etc..), carrosséis de produtos, tela de detalhes de produtos e carrinho. |
Exibir produtos indisponíveis por último | Se o produto tiver fora de estoque, você pode dixar que ele aparece no final de cada listagem que apareça.. | Nas listagens de produtos (categorias, busca, etc..), carrosséis de produtos, tela de detalhes de produtos e carrinho. |
LAYOUT | ||
Campo | Explicação | Onde vai afetar na loja |
Fixar topo da loja ao rolar a página | Quando o cliente rolar a página, logo, barra de busca e carrinho ficarão fixos no topo (sempre visíveis) | Altera no topo da loja toda. |
Exibir telefone no topo da página | Exibe o telefone cadastrado na aba de Geral | Topo da loja desktop |
Exibir Whatsapp no topo da página | Exibe o whatsapp cadastrado na aba de Geral | Topo da loja desktop |
Exibir segunda imagem do produto nas telas de listagem de produtos | Quando cadastramos uma segunda imagem para o produto, podemos exibir ela ao passar o mouse no produto, apenas para desktop. | |
Exibir balão indicando o número de produtos já adicionados ao carrinho nas telas de listagem de produtos | Nas listagens de produtos (categorias, busca, etc..) e carrosséis de produtos. | |
Exibir botão no rodapé de ir para o topo da loja | Habilita um botão para que ao clicar vá até o topo da loja. | Parte inferior a direita da loja, ao rolar uma tela. |
CARRINHO/COMPRA | ||
Campo | Explicação | Onde vai afetar na loja |
Habilitar o módulo de compra rápida | Esse módulo adiciona dois botões nas páginas de listagem de produto: Adicionar e Ver Detalhes. | Nas listagens de produtos (categorias, busca, etc..), carrosséis de produtos. |
O que deve ocorrer ao clicar no botão de compra na página do produto? | Você tem a opção de ao clicar no botão de compra continuar na tela ou redirecionar para o carrinho. | Altera a ação do botão de compra na tela do detalhe do produto. |
O que deve ocorrer ao clicar no carrinho no topo da página? | Você tem a opção ao clicar no carrinho no topo direcionar para a tela de carrinho ou abrir uma lista suspensa com os itens adicionado no carrinho. | Topo da loja, onde aparece o botão do carrinho. |
Exibir busca na página do carrinho | Você pode escolher aparecer ou não a busca na tela do carrinho, isso pode ajudar a comprar mais ou pode atrapalhar o fechamento da venda. | Topo da tela de carrinho. |
MOBILE | ||
Campo | Explicação | Onde vai afetar na loja |
Em dispositivos móveis, quantos produtos devem ser exibidos por linha? | Para uma boa experiência do seu cliente, você pode optar por exibir um ou dois produtos por linha nas listagens de produtos, isso pode variar de acordo com o tamanho do título do seu produto. | Nas listagens de produtos (categorias, busca, etc..) e carrosséis de produtos. |
CADASTRO DE PRODUTO | ||
Campo | Explicação | Onde vai afetar na loja |
O campo Modelo é obrigatório | Ao cadastrar um produto deixa o campo obrigatório. | Altera apenas na tela de cadastro de produtos no painel da loja. |
Requer envio | Ao cadastrar um produto deixa o campo obrigatório. | Altera apenas na tela de cadastro de produtos no painel da loja. |
Reduzir do estoque | Ao cadastrar um produto deixa o campo de redução de estoque marcado como sim ou não. | Altera apenas na tela de cadastro de produtos no painel da loja. |
PÁGINA DO PRODUTO | ||
Campo | Explicação | Onde vai afetar na loja |
Atualizar preço do produto de forma automática ao escolher as opções ou alterar quantidade | Quando usado opcionais nos produtos, podemos colocar adição ou subtração de valores neles. | Tela de detalhe do produto, abaixo do preço. |
Ocultar o preço do opcional de produto | Esse preço aparece ao lado do nome do opcional. Ex. (+ R$ XX,00) | Tela de detalhe do produto, abaixo do preço. |
Exibir estoque? | Exibe a quantidade de estoque do produto. | Tela de detalhe do produto, abaixo do preço. |
Exibir modelo? | Exibe modelo cadastrado para o produto. | Tela de detalhe do produto, abaixo do preço. |
Exibir fabricante? | Exibe o nome do fabricante cadastrado para o produto. | Tela de detalhe do produto, abaixo do preço. |
Exibir botão “Lista de Desejos”? | Exibe botão para adicionar o produto em uma lista de desejos, somente para cliente logado. | Tela de detalhe do produto, abaixo do botão de compra. |
Exibir botão “Comparar”? | Exibe botão para adicionar o produto em uma lista de comparação, somente para cliente logado. | Tela de detalhe do produto, abaixo do botão de compra. |
Exibir todas as imagens adicionais já abertas? | Você pode escolher em deixar todas as imagens adicionais abertas ou colocar elas em um carrossel de imagens. | Tela de detalhe do produto, abaixo da imagem principal. |
Exibir as tags do produto? | Você pode cadastrar tags para o produto e exibir elas ou não. | Tela de detalhe do produto, abaixo do botão de compra. |
Exibir carrinho flutuante? | Ao rolar a tela aparece um carrinho flutuando com o preço e condições do produto | Tela de detalhe do produto, topo da página. |
Exibir botões de compartilhar na tela do produto | Para ajudar a divulgar o seu produto, habilite esta opção para que outras pessoas publiquem nas redes sociais deles o link do seu produto. | Tela de detalhe do produto, abaixo do botão de compra. |
PÁGINA DE BUSCA | ||
Campo | Explicação | Onde vai afetar na loja |
Buscar na descrição dos produtos por padrão | Você pode optar por não buscar na descrição do produto, foçando o cliente achar somente pelos títulos do produto e tags. | Tela de resultado de buscas |
Buscar palavras no singular e plural | Nesse tipo de busca, o termo buscado será buscado tanto no singular quanto no plural. | Tela de resultado de buscas |
Texto e Categorias na tela de resultado de busca não encontrado. | Será exibido um texto mais completo, dando sugestão de pesquisa e uma lista das suas categorias. | Tela de resultado de buscas, quando não encontrado resultado. |
PÁGINA DE CATEGORIA | ||
Campo | Explicação | Onde vai afetar na loja |
Exibir lista de sub-categorias | Você pode optar por exibir ou não as sub-categorias da loja. | Tela de categorias (departamentos) |
Exibir imagem das sub-categorias | Você pode optar por exibir ou não as imagens sub-categorias da loja. | Tela de categorias (departamentos) |
PÁGINA DE CONTATO | ||
Campo | Explicação | Onde vai afetar na loja |
Exibir link de “Devolução” na página de contato | O Link de devolução é uma das normativas da lei de ecommerce ele deve sempre estar visível, por isso deixamos esta opção. | Página de contato da loja |
Exibir o e-mail de contato na página de contato | Você pode exibir o e-mail que cadastramos na aba Geral, porém isso pode trazer muitos Spans para sua caixa de correios. | Página de contato da loja |
Exibir o telefone na página de contato | Telefone fixo da loja | Página de contato da loja |
Exibir o Whatsapp na página de contato | Telefone para whstaapp da sua empresa. | Página de contato da loja |
OTIMIZAÇÃO | ||
Campo | Explicação | Onde vai afetar na loja |
Forçar carregamento das tags <script> antes do fechamento da tag <head> | Isso vai ajudar na indexação e otimização da loja, é um dos requisitos para alguns indexadores como o Google. | Carregamento de estilos da loja toda. |
PAINEL ADMINISTRATIVO | ||
Campo | Explicação | Onde vai afetar na loja |
Tipo de layout do painel administrativo: | Altera o Layout do painel administrativo da loja. |
Imagens | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Logo da Loja | Recomendamos não inserir uma imagem com altura maior que 120px e largura superior a 250px. Em último caso, ative o redimensionamento automático de logo. | Topo da loja e e-mails automáticos. |
Logo da Loja em smartphones | Essa imagem será exibida apenas quando a loja for acessada por celulares. O recomendado é que não tenha mais que 35px de altura. | Topo da loja na versão mobile. |
Usar esse texto no lugar da logo para smartphones | Se preferir, você pode definir aqui um texto que aparecerá no lugar da logo. O limite é de 30 caracteres. | Topo da loja na versão mobile. |
Redimensionar o logo da loja automaticamente | Se marcado, o logo será redimensionado automaticamente pelo sistema para evitar problemas no layout. | Topo da loja e e-mails automáticos. |
Favicon | Exibido na barra de endereços do navegador. Deve ser uma imagem com extensão .png de 16×16 pixels. | ícone para o navegador, que fica na aba de navegação. |
Imagem de marca d’água | Todas as imagens de produtos e blog ficam com uma marca d’água, essa imagem deve ser em formato PNG com fundo transparente | Todas as imagens de produtos e do blog da loja. |
Posição da imagem de marca d’água | Você pode definir em que posição sua marca d’água pode ficar por cima das imagens. | Todas as imagens de produtos e do blog da loja. |
Imagem de pagamento no rodapé | Exibe uma imagem no rodapé das formas de pagamentos. | Rodapé inferior da loja |
Exibir imagem de pagamento | Se marcar como SIM e não colocar imagem no campo acima, aparecerá uma imagem padrão. | Rodapé inferior da loja |
Tamanhos de imagens | Você pode definir nestes 11 campos seguintes tamanhos para as imagens da loja, como carrosséis, listagens de produtos, detalhes de produtos e outros. Confira neste link um artigo completo sobre este assunto com detalhes. |
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
e-mail de teste | Envia um e-mail de teste, quando configurado os campos abaixo. | envia um e-mail para o qual colocar aqui. |
Protocolo de E-mail | Escolha “Mail” se seu servidor de hospedagem tiver suporte a função “Mail” do PHP, caso contrário sempre utilize “SMTP”. | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Parâmetros do Protocolo: | Parâmetros adicionais para o protocolo “Mail”, devem ser configurados aqui. Ex.: -r | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Servidor SMTP | Qual é o servidor de SMTP da sua conta, em geral é mail.seudominio.com.br | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Usuário SMTP | Seu login da conta de e-mail para autenticação, em geral é seu próprio e-mail. | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Senha SMTP | Sua senha da conta de autenticação. | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Porta SMTP | Porta do servidor da conta de autenticação, em geral a porta SMTP é 587 | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Tempo de Conexão SMTP | Tempo que ficará ativo a conexão durante o envio SMTP. | Notificações por e-mail da loja (novo pedido, cadastro, status do pedido, etc..) |
Alerta de Novo Pedido | Avisar por e-mail quando um novo pedido for realizado | Enviado e-mail para o administrador da loja. |
Alerta de confirmação de pagamento do pedido | Avisar por e-mail quando o pedido tiver o pagamento confirmado de acordo com o status configurado na aba Opções > campo Situação do Pedido Pago | Enviado e-mail para o administrador da loja. |
Alerta de Nova Conta | Avisa por e-mail quando uma nova conta for cadastrada | Enviado e-mail para o administrador da loja. |
E-mail para envio de alerta de pedidos | Caso não seja definido nenhum e-mail, será utilizado o e-mail padrão da loja definido na aba Geral | Envia o alerta para o e-mail cadastrado neste campo |
E-mail para envio de alerta de pagamento do pedido | Caso não seja definido nenhum e-mail, será utilizado o email padrão da loja definido na aba Geral | Envia o alerta para o e-mail cadastrado neste campo |
E-mail para envio de alerta de novas contas | Caso não seja definido nenhum e-mail, será utilizado o email padrão da loja definido na aba Geral | Envia o alerta para o e-mail cadastrado neste campo |
Email para recebimento dos formulários de contato | Caso não seja definido nenhum e-mail, será utilizado o email padrão da loja definido na aba Geral | Envia o alerta para o e-mail cadastrado neste campo |
Alerta E-mails Adicionais | Coloque os e-mails adicionais em que você também deseja receber mensagens de alerta, além do e-mail principal da loja. (Separados por vírgula) | Envia o alerta para o(s) e-mail(s) cadastrado neste campo |
Fraude | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Utilizar Sistema MaxMind Detecção de Fraude | MaxMind é um serviço de detecção de fraude. Se você não possui uma chave de licença clique aqui. Quando você obtiver a chave de licença, cole-a no campo abaixo. | Apenas para validação de pedidos |
Chave de Licença para o MaxMind | Chave que você vai obter no link acima. | Apenas para validação de pedidos |
Pontos de Risco no MaxMind | Quanto maior a pontuação, maior a possibilidade de fraude. Defina uma pontuação entre 0 – 100. | Apenas para validação de pedidos |
MaxMind Situação do Pedido Fraudado | Pedidos acima da pontuação serão atribuídos a esta situação e não serão liberados automaticamente. | Apenas para validação de pedidos |
Servidor | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Utilizar SSL | É necessário possuir um certificado SSL válido e instalado para o domínio da loja e alterar os arquivos config.php. Todas as lojas no servidor da BNW já tem este certificado, para quem comprou a licença de uso externo deve ficar atento a esta configuração. | Certificado “verde” no browser que estiver navegando na loja. |
Habilitar SSL Global | Ao habilitar o SSL global, a loja ficará com SSL em todas as páginas, não apenas na área de cliente e finalização do pedido. Todas as lojas no servidor da BNW já tem este certificado, para quem comprou a licença de uso externo deve ficar atento a esta configuração. | Certificado “verde” no browser que estiver navegando na loja. |
Utilizar Sessões Compartilhados | Ativa o compartilhamento do cookie de sessão entre as lojas para que o carrinho possa ser utilizado em domínios diferentes. | entre lojas diferentes. |
Robôs de Busca | Lista de robôs de busca que não terão acesso as sessões compartilhadas. Digite um por linha. | Não afeta ou altera layout, apenas performance dos buscadores dentro da sua loja. |
Utilizar URL Amigável | O módulo “mod-rewrite” do Apache deve estar instalado e o arquivo “.htaccess.txt” deve ser renomeado para “.htaccess” para que este recurso realmente funcione. | Altera a forma de navegar entre páginas e produtos na loja. |
Extensões Permitidas | Lista de extensões de arquivos que serão permitidas nos uploads na loja. Digite uma por linha. | Upload de imagens e arquivos para download na loja. |
Tipo de Arquivos Permitidos | Lista de tipos de arquivos que serão permitidos nos uploads na loja. Digite um por linha. | Upload de imagens e arquivos para download na loja. |
Habilitar Recuperação de Senha | Habilita ou não a recuperação de senha na administração da loja. Este recurso será desativado automaticamente se o sistema identificar uma tentativa de invasão. | Apenas a tela de login do painel da loja. |
Chave de Criptografia | Chave secreta utilizada para encriptação dos dados durante as transações dos pedidos. | Apenas altera o processamento de pedidos na loja. |
Nível de Compressão | Compressão GZIP das páginas para maior eficiência. Nível de compressão deve estar entre 0 e 9. Só utilize se souber como funciona o GZIP | Para otimizar e m inimizar o tamanho de arquivos da loja, arquivos de código e processamento. |
Exibir mensagens de Erro | Exibir mensagens de erro na loja e na administração da loja. | Se habilitado, caso aconteça um erro vai aparecer na tela para quem estiver navegando no site. |
Registrar Erros | Gravar erros da loja no Logs de Erros. (Configurações->Logs de Erros). | Apenas no painel da loja |
Nome do Arquivo de Log | Nome do arquivo em que onde será armazenado os logs de erros. Ex.: error.txt | Apenas no painel da loja |
Seo | ||
Campo | Explicação | Onde vai afetar na loja |
---|---|---|
Gerar URL’s de imagens amigáveis | O sistema vai gerar nomes de imagem usando melhores práticas de SEO. O nome do arquivo da imagem será renomeado automaticamente para ter o mesmo nome do produto. | Cadastro de produtos no painel da loja, detalhes de produto e listagens do mesmo. |
Nome do produto que será exibido nas páginas de listagem | Você pode escolher entre usar o campo padrão de nome ou utilizar o campo H1, ambos definidos no cadastro do produto. | Listagens de produtos, Home, Categoria, Promoções, Busca e carrosséis |
Código Google Analytics: | Acesse sua conta no Google Analytics, copie o código referente ao domínio de sua loja, e cole o código neste campo para gerar estatísticas simples de acesso da sua loja. | Apenas para análise no seu painel do Google Analytics |
JavaScript no cabeçalho da página | Inclua aqui qualquer código JavaScript (código de terceiros) que tenha que ser incluído entre as tags <head></head>.O script deve ser incluído considerando também a tag <script></script> | Cuidado ao colocar códigos aqui pois pode afetar outras programações de Javascript e Layout da sua loja |
JavaScript no corpo da página | Inclua aqui qualquer código JavaScript (código de terceiros) que tenha que ser incluído logo abaixo da tag <body><. | Cuidado ao colocar códigos aqui pois pode afetar outras programações de Javascript e Layout da sua loja |
Código de Remarketing Dinâmico | Código Gogole para fazer o seu remarketing. | Apenas para análise no seu painel do Google Analytics |
Código de Remarketing | Código Gogole para fazer o seu remarketing. | Apenas para análise no seu painel do Google Analytics |
Códigos de Conversão | Crie código para acompanhar a conversão dos seus pedidos em seus painéis de Marketing Digital. | Apenas para análise no seu painel do Google Analytics |
Botão flutuante do WhatsApp
Neste rápido treinamento, vamos mostrar com é fácil colocar um botão flutuante com link para o whatsapp, isso ajuda muito Leia mais
Captura de e-mails com desconto
Olá pessoal, neste artigo vou mostrar como podemos capturar e-mails na loja o oferecer a este novo e-mail um cupom de desconto.
Mas para que serve capturar o e-mail? Isso vai gerar para você uma base pessoas interessadas na sua loja, e nada melhor que contatos qualificados que podem gerar comprar na loja não é? Sendo assim tendo o e-mail dessas pessoas podemos extrair a lista de e-mails, e com ferramentas de automação, criar campanhas da loja, datas especiais, listas de interesse ou produtos específicos. Lembrando que este não é um módulo de newsletter, o sistema de newsletter serve tanto para captura quanto disparo, para que não quebre uma regra de uso/disparo de email, que está prevista em contrato, não fazemos este tipo de ação na loja.
Dentro das lojas da Brasil na Web temos este recurso e além de poder capturar os e-mails, podemos gerar um cupom para que essa pessoa possa usar na sua primeira compra, gerando ainda mais engajamento do usuário, e ajudando a converter ele em um cliente da sua loja.
Agora que já entendemos o porquê de se usar, vamos configurar o módulo na sua loja, mas antes como quero dar 15% de desconto na primeira compra, vamos então cadastrar um novo cupom. Vamos no menu de Vendas > Cupons aqui vamos dar um nome, um código único para que possa ser aplicado na loja, no meu caso vou definir a porcentagem e não vou aplicar frete grátis.
Neste link https://ajuda.coopstore.com.br/como-criar-um-cupom-de-desconto-na-loja-virtual/ você vai poder ver mais detalhes dos demais campos, mas o que importa neste nosso exemplo são os campos de Autenticação que vamos deixar marcado como Sim, campo de Utilização por cupom, que vou deixar vazio e o campos de Utilizações por Clientes aqui vou deixar com o valor 1, isso vai permitir que o cupom seja usado apenas uma vez, por um cliente que esteja logado na loja.
Agora vamos, configurar o módulo de Captura de e-mails, vamos no menu de Vendas > Captura de E-mails> Configurações
Nesta primeira aba temos as configurações básicas, temos os campos:
- Notificar o Administrador: Envia e-mail de notificação para o administrador quando alguém assinar/cancelar a newsletter
- Clientes registrados: Quando habilitada, essa opção permite que os clientes já cadastrados usem essa função para se inscrever ou desinscrever da newsletter.
- Confirmação para inscrição: O cliente tem que confirmar o e-mail de inscrição na newsletter.
- Mensagem de e-mail de sucesso: Envia um e-mail com mensagem de sucesso quando o usuário assinar a newsletter.
- Desinscrever: Permitir que os clientes deixem de assinar a newsletter.
- Confirmação para desinscrição: Exibe campo para que coloque a mensagem de desinscrever, habilite se o campo acima for habilitado.
- Habilitar Listas de Newsletter: Você pode criar listas de e-mails, vou falar delas mais abaixo.
- Exibir campo Nome: Define se o campo nome será ou não exibido no formulário.
- Campos Extras: Você pode usar outros campos como email, cidade, para uma campanha mais detalhada, se caso queira usar.
No nosso exemplo, como vou dar um cupom de desconto ao se cadastrar, vou habilitar a Mensagem de e-mail de sucesso e na próxima tela vou colocar lá o cupom que gerei antes.
Na próxima aba de Mensagens vamos configurar os textos e forma que vai aparecer o formulário na página da sua loja, logo no primeiro campo podemos fechar automaticamente o pop-up da captura de e-mail, isso se configuramos o pop-up, isso vou falar com mais detalhes na próxima tela.
Este formulário de captura pode ter duas formas uma de texto, onde o seu layout será um campo de texto aberto e abaixo o formulário, ou com imagem de fundo, escolhendo esta opção você pode criar uma peça com uma boa imagem de fundo e o texto fica por cima.
Para facilitar vamos usar a opção de texto aqui, logo em seguida você pode configurar as cores dos botões, logo abaixo temos a caixa de mensagens que vai aparecer no formulário, capriche no texto para chamar a atenção e convencer o visitante a deixar seu email.
Agora como habilitamos a mensagem de sucesso, essa mensagem vai chegar no email do cliente com o cupom que criamos, então vamos caprichar nessa mensagem, podemos personalizar com algumas tags, que vão personalizar sua mensagem, por exemplo se colocar %nome% vai substituir pelo nome da pessoa, caso você tenha habilitado, esta opção.
Neste exemplo vou só capturar o email, então eu vou colocar assim:
Estamos quase lá, agora vamos na aba de Layouts e aqui vamos configurar onde e como exibir nosso formulário, para saber mais sobre Layouts e Posições de uma conferida neste artigo https://ajuda.coopstore.com.br/mapa-de-posicoes-da-loja-da-brasil-na-web/
Para meu exemplo, vou usar o formulário no rodapé da minha loja, para ser exibido em todas as páginas e não vou habilitar o pop-up, logo ele vai ficar com esta aparência:
Se desejar usar ele como pop-up vai ficar desta forma:
Por isso é importante caprichar no texto e na formatação para ficar legal na aparência. E por fim, para fechar com chave de ouro vamos na aba de Desconto e aqui vamos colocar nosso cupom que criamos, basta habilitar e colocar o código que criamo lá no começo.
Mesmo usando a mensagem enviada por email, vamos habilitar aqui, caso o visitante faça o cadastro o cupom será automaticamente aplicado no carrinho, isso vai criar uma boa experiência de uso na sua loja. Vamos fazer um teste, cadastre seu e-mail e salve.
Vamos ver como chega no e-mail:
Continuando, vamos na loja e adicionar um produto ao carrinho. Note que o cupom já veem preenchido, agora só ele finalizar a compra para aplicar o desconto.
Agora que já temos a experiência do cliente completa, vou mostrar a você onde e como pegar a lista de e-mails, vamos no menu de Vendas > Captura de E-mails > Assinantes aqui nesta tela temos a lista dos e-mail que conseguimos capturar, aqui você pode inserir, excluir, importar ou exportar novos contatos. Para estas duas últimas opções temos o arquivo modelo para que possa abastecer de uma forma mais rápida por planilha.
Como citei lá em cima, você pode criar listas de e-mails e organizar os emails por campanhas ou preferências do assinante, por exemplo podemos criar listas como Promoções, Novidades, Novos Produtos, e assim deixar que o assinante escolher qual lista irá se inscrever e isso ajuda a você e enviar e-mails para eles mais focados em seus interesses. Lembrando que para ativar a lista, volte nas configurações básicas do módulo e vá na opção de Habilitar Lista de Newsletter
E para concluir, temos a tela de estatísticas que mostra os dados de quantas vezes foi exibido o formulário padrão e como pop-up, o número de inscritos e de cancelamentos.
Um módulo bem versátil e útil para fomentar as vendas na sua loja, agora é com você, se tiver dúvidas pode chamar nossa equipe de suporte.
Espero ter ajudado, até mais!
Desconto Global na loja
Neste treinamento vamos mostrar como é fácil colocar um desconto global na loja, confira o vídeo.
Instagram + Loja Virtual – Como fazer e aumentar vendas
Que tal transformar seguidores em compradores?
Nesta aula da Brasil na Web você vai aprender sobre como utilizar o Instagram para Leia mais
Como trocar a cor de um ou mais itens específico do menu
Olá pessoal neste artigo vou mostrar como trocar a cor de um ou mais itens do menu, por exemplo queremos destacar o menu de promoções, outlet, etc.. serve para um ou mais itens.
Por enquanto não temos esta função como base da loja, por isso vamos usar de um recurso avançado de CSS, só manter o foco e atenção nas instruções que vai dar certo, vamos ao passo a passo:
1º) Vá no menu principal (Customização > Menu Principal), escolha o item do menu que deseja colocar a cor de fundo e adicione uma classe a ele no campo “Classe de CSS”, como mostra a imagem abaixo. Obs.: Só vai funcionar para os itens principais, sub-categoria ou menus não funciona bem.

2) Vá no menu de edição de cores (Customização > Personalizar) e vá na aba “Avançado”, aqui temos o campo de “CSS Personalizado”, é onde vamos colocar o código que vai mudar a cor, mas atenção tem que ser exatamente como a estrutura abaixo:
/* * MENU EM amarelo */ .navbar .nav>li.amarelo>a, .navbar .nav>li.amarelo>a:hover, #off-canvas-nav .megamenu li.amarelo a, #off-canvas-nav .megamenu li.amarelo a:hover{ font-weight: bold; font-size: 20px; background: #ff8684 } .navbar .nav>li.amarelo>a, .navbar .nav>li.amarelo>a:hover, #off-canvas-nav li.amarelo .menu-title{color: #333 !important;}
Muito importante é seguir a estrutura acima , mudando apenas o “NOME-DA-CLASSE”, deixe exatamente os mesmos caracteres e espaços. As cores serão em hexadecimal, um código web para cores, existe vários sites com esta tabela, neste aqui http://erikasarti.com/html/tabela-cores/ esta classificdo por tons, pode ser muito útil. É importante que copie e cole exatamente os valores e não deixe de colocar o ponto e virgula (;) no final das cores, como na estrutura acima.

Atualizado em 25/11/2019 – O código acima agora também funciona no menu mobile.
Bom espero ter ajudado, qualquer dúvida estamos aqui! Até mais!
Galeria de Imagens – Coleção de Fotos
As lojas da Brasil na Web contam com um sistema de Coleção de Fotos, que também podemos chamar de galeria de fotos, onde você vai organizar por coleções (álbuns) fotos para exibir na sua loja, isso é bem útil para quem trabalha com moda e precisa expor um catálogo de fotos de uma coleção, confira abaixo como é fácil criar um coleção de fotos.
1º) Cadastrando as Fotos
Primeiro vamos separar as fotos pra subir no site, antes de ir no sistema certifique que as imagens estejam já otimizadas. Sugerimos que use imagens no tamanho máximo de 850x650px, um bom tamanho para web, e com resolução de 72DPI, não sabe como reduzir e otimizar as imagens, da uma olhadinha neste artigo aqui.
Com as imagens no tamanho e peso adequado, vamos criar um grupo destas imagens usando o recurso que fica no menu de Customização > Banners > Cadastrar Banner aqui vamos criar um novo grupo de banners, de um nome habilite e escolha as imagens.

Dica: Crie pastas dentro do editor de imagens, para facilitar localizar depois e otimizar seu tempo de trabalho na plataforma. Não coloque tudo na primeira pasta de “image” 😉
2º) Criando os Tipos
Os tipos são as “categorias” da coleção de fotos, podemos ter mais de uma coleção dentro do tipo, por exemplo, temos o tipo Inverno, e dentro dele a coleção 2017, 2018, 209, etc… Para cadastrar os tipos vamos no menu de + Módulos > Galeria de Imagem ao entrar vamos na aba de tipos e adicionar um novo, no meu exemplo vai ser Inverno.

3º) Criando a Coleção
E agora sim vamos criar a coleção de fotos, basta clicar na aba de Coleção e Inserir

Nesta tela vamos dar um nome para nossa coleção, escolher o tipo (no nosso exemplo inverno), escolher o banner que cadastramos no passo 1º), escolher o tamanho da imagem ampliada (seguindo o que falamos no passo 1º, sugerimos que deixe o tamanho de 850×650), escolher o tamanho da imagem em miniatura (seguindo a mesma proporção use o tamanho de 250×190, isso vai dar 4 imagens por linha), deixe como habilitado e escolha uma ordem, caso queira.

4º) URL da coleção
Agora que criamos a coleção e o tipo, precisamos colocar ela na loja ou usar a URL da coleção para divulgar, para saber qual a URL correta vá no menu de + Módulos > URL’s amigáveis este módulo monta as URLs amigáveis, cuidado para não deletar ou editar uma URL, isso pode prejudicar sua loja, só vamos consultar qual a URL da coleção ok?!
Procure por “galeria” e você vai achar module/galeria_neturno ai vai notar que na frente temos a URL, no exemplo abaixo é colecoes, sendo assim basta colocar a URL da sua loja /colecoes, por exemplo www.brasilnaweb.com.br/colecoes

Então ao acessar o site teremos a lita com os tipos cadastrados e dentro dele as coleções que cadastramos, ao clicar na coleção note que vai gerar uma outra URL no navegador, ai basta usar esta URL para um banner no site, ou para enviar para suas campanhas de email marketing.

Até mais!
Gerenciando comentários do blog na loja BNW
neste artigo vou mostrar de forma simples e rápida como gerenciar os comentários do blog, usando o serviço Local saiba mais neste artigo. Os os comentários por padrão não sã liberados de imediado, precisam da aprovação do administrador da loja, para ajustar esta configuração veja publicação que citei acima.
Sendo assim a cada novo comentário, você precisa acessar o menu de Blog > Comentários do Blog para habilitá-lo para fazer isso basta selecionar o comentário e clicar em “Publicar” e pronto ele vai estar ativo na tela de leitura da publicação, ainda nesta tela você pode “Despublicar” um comentário, deixar ele no banco de dados, mas não aparece na tela ou excluí-lo definitivamente, sem reversão.

Outra função é Editar o cometário, porém você só vai poder editar se estará publicado ou não, e o texto do comentário, os demais campos são fechados para edição.

Criar e gerenciar categorias de blog na loja
Para criar categorias no blog da loja é bastante simples, só temos que ter atenção a alguns campos avançados, para começar vamos no menu de Blog > Categorias aqui a tela se divide em duas partes, vamos começar falando da árvore do menu.
A árvore do do menu, serve para você ordenar a posição que o menu de categorias de blog vai aparecer quando habilitarmos o módulo dele, saiba mais aqui, bastante simples basta arrastar e soltar, se desejar pode arrastar para o lado que ele entende que é um sub-departamento da linha de cima. Após configurar a ordem você precisa salvar esta ordem clicando no botão verde “Atualizar Ordem do Menu” e pronto a ordem está criada e salva.
Ele funciona como o menu principal, se desejar editar basta clicar no ícone de “lápis” e deletar no ícone de “lixeira”
Agora vamos criar um novo menu de categoria, primeiro vamos colocar um título (obrigatório) podemos colocar um texto, ele será exibido na listagem de categoria, veja mais neste link, o próximo campo é “ID item Pai” que define se este novo item será uma categoria pai ou filha (sub-categoria) se for uma sub-categoria basta escolher entre uma das que já foram criadas.
Você também pode definir uma imagem para esta categoria, que vai aparecer somente na listagem de categorias, como a descrição, e se for necessário passar uma classe de CSS, par estilizar ele no código todos os dois campos, não são obrigatórios.
Agora temos os campos avançados para SEO, estes campos vão ajudar a indexação da sua categoria junto aos buscadores, utilize somente se for trabalhar muito com o seu BLOG para gerar conteúdo, os campos são:
URL Amigável | URL única para sua categoria, não use espaços, letras misculas ou caractres especiais, substitua espaços por – (hífen) e verifique se é uma URL global única, se não tem produto, ou categoria de produto ou postagem com o mesmo nome. |
---|---|
Meta Título | Título que vai aparecer na aba do navegador. |
Meta Palavra-Chave | Dados escondidos para os buscadores acharem por palavra chave. |
Meta Descrição | Dados escondidos com a descrição da categoria, para os buscadores. |
Agora que sabemos como criar as categorias vamos criar um novo post, veja como neste artigo.
Configurando módulos do blog da loja
Você pode colocar partes do blog na sua loja, como as últimas publicações no rodapé, o menu de categorias de postagens na lateral da página de categorias, ou os últimos comentários aprovados por você na tela de contato da loja. Para isso vou mostrar como colocar estas partes (módulos) na sua loja, mas antes você vai precisar ler este artigo e entender um pouco sobre layout, rotas e posições, leia e volte aqui.
Então vamos colocar a mão na massa, vamos no menu de Blog > Módulos > Categorias ao entrar na tela temos três abas, mas mesmas que temos no menu, então não vamos precisar entrar de novo no menu.

Na primeira aba de Configuração módulo de categoria vamos habilitar ou desabilitar o menu de categorias do blog, na imagem acima temos este menu dentro das páginas do blog, na coluna da direita habilitado na posição 1, lembre-se a loja funciona com um lego, onde cada peça (módulo) vai se encaixando nas partes de cada layout, e mais uma vez, se não leu, leia este artigo para ficar bem claro este conceito, pois vamos usar ele em todas as configurações aqui 😉
Vamos a um exemplo prático quero colocar menu de categorias de blog na coluna da esquerda da tela de categorias de produtos e na busca, então basta adicionar um novo, escolher o layout Categoria, na posição Collumn Right deixar ele Habilitado e vou colocar na posição 30, pra garantir que vai ficar em baixo de tudo. Simples assim repetimos o mesmo passo, criando um novo e só mudamos o layout que será o de Resultado de Busca

Agora na segunda aba temos então Configuração Módulo de Últimos comentários vamos seguir as mesmas configurações anteriores, escolher o layout, posição deixar habilita e posição, o que muda é só o item Max Colunas – Limite de Itens no Carrossel aqui vamos definir a quantidade de itens que vai aparecer, se deixar 6 aparecerá 6 itens no máximo.

E por fim a aba de Configuração Módulo de Últimos Posts aqui temos alguns campos a mais, mas antes de falar deles, vamos ver no finalzinho que temos a mesma configuração anterior de layout, posição, habilitado e ordem, ou seja, segue a mesma ideia, vamos pensar em que página (layout) e qual posição colocar, por exemplo, seguindo o artigo que mencionei, vamos colocar na Página inicial na posição Segundo Destaque, basta colocar (na ordem) Home – Mass Bottom -Habilitado – 1
Agora os demais campos, primeiro o campo de descrição, ele está em desuso, não precisa preencher, depois temos o Tipos de aba de produto aqui você pode escolher entre as postagens mais recentes (Últimos), Em destaque (você define na hora de cadastrar uma postagem) e os Mais vistos pelo público da sua loja.
ainda podemos configurar as dimensões e larguras das imagens que serão exibidas neste módulo. E pro fim configuramos a quantidade de itens por coluna e linha, por exemplo queremos exibir as quatro últimas postagens em linha ficaria assim 4 – 1 se eu quiser exibir um bloco com duas linhas e quatro colunas ficaria assim 4 – 2 e assim por diante.

Configurações gerais do blog da loja
Além de poder criar conteúdo no estilo blog, podemos configurar o modo de exibir as postagens, o tamanho da imagem padrão, como será exibido as postagens nas listagens de categorias e na hora de ler a postagem, neste artigo vou mostrar como como fazer estes ajustes finos no blog da sua loja.
Primeiro vamos acessar o menu de Blog > Configurações Gerais ao entrar na tela a primeira aba vamos tratar dos tamanhos padrões de imagens, estes valores servirão para vário locais, como listagem de categorias, dentro da postagem, nas imagens de posts relacionados, uma vez trocado aqui ele vai trocar em todas as telas.
Outros ajuste nesta tela é o limite de postagens no feed, para pessoas que vão ler seu blog que usam leitor de feed e a URL padrão do blog, pode mudar por exemplo para “notícias”, mas se ajustar aqui vai precisar mexer nas configurações de + Módulos > URL Amigável trocando também de “blog” para “notícias”.


Campo | Sua função |
---|---|
Colunas Filhas | Monta colunas de sub-categorias, por exemplo temo suma categoria pai chamada “Loja Virtual” e sus filhas (sub-categorias) “Marketing”, “Recursos” e “Módulos”.Neste caso se colocarmos 3 colunas, será exibido as sub-categorias em 3 colunas. Se escolher 1 será uma sobre a outra |
Dimensão da imagem da categoria (Altura x Largura) | Como o próprio nome diz, este valor vai aumentar ou diminuir o tamanho das imagens das sub-categorias relacionadas, caso tenha. |
Limite de Posts Principais | Define a quantidade de postagens principais para o início da página de categoria. O sistema sempre considera principal as últimas postagens criadas. |
Limite de Posts Secundários | Define a quantidade de postagens secundárias, também vai ajuda na paginação, quantidade de itens mostrados por categoria. |
Tamanho das Imagens Principais | Define o tamanho das imagens principais, pode-se colocar um tamanho grande para destacar ela das secundárias |
Tamanho das Imagens Secundárias | Define o tamanho das imagens secundárias, pode-se colocar um tamanho grande para destacar ela das primárias |
Número de colunas com Posts Principais | Você pode definir postagens principais por colunas, como as sub-categorias lá em cima. |
Número de colunas com Posts Secundários | Você pode definir postagens secundarias por colunas, como as sub-categorias lá em cima. |
E por fim temos as configurações para a tela de leitura de um post, uma tela simples de configurar, vamos habilitar ou desabilitar algumas cosias como título, imagem, autor, etc.. definir e a imagem é grande ou pequena. Vamos dar uma olhada nas funções mais avançadas como comentários.

Bom espero ter ajudado, até mais!
Fluxo de pedidos da loja – Adicionado ou removendo status e colocando em fluxo
Olá pessoal neste artigo vou mostrar como é fácil organizar o fluxo de pedidos da sua loja, mas antes vamos entender um pouco deste conceito e como aplicar no nosso dia a dia de lojista.
De uma forma mais simples, vamos pensar como é o processo do dia a dia de nossa loja, o cliente vem a loja, escolhe, você da as opções de compra, ele paga, você embala e o cliente sai feliz. Na loja virtual temos o mesmo processo, logo temos um fluxo desde quando o cliente paga até a entrega e neste ponto que vamos tratar neste artigo.
O fluxo de pedidos pode variar de acordo com o seu seguimento, então pense com carinho um fluxo mais enxuto pro seu dia a dia, por exemplo, neste artigo vou mostrar o fluxo de uma loja que produz os seus produtos, assim temos algumas etapas que fogem do padrão, mas a plataforma permite que ela se adeque ao seu fluxo, então vamos ao exemplo e antes de mostrar telas no sistema vamos desenhar nosso fluxo do dia a dia.
Pra começar a organizar nosso fluxo, vamos primeiro montar uma lista do que acontece com o pedido, quando ele entra na loja, com as variáveis que pode ocorrer durante todo ele, todo pedido da Loja Virtual se inicia com o status Aguardando Pagamento, então vamos partir deste ponto. Para facilitar vou montar um “check-list” com o que pode ocorrer desde a entrada do pedido até a entrega dele, vejam o meu exemplo:
- Aguardando Pagamento
- Pagamento Negado – AUTOMÁTICO
- Enviar notificação ao cliente e informar motivo
- Pagamento Confirmado – AUTOMÁTICO
- Continuar processo
- Pagamento Negado – AUTOMÁTICO
- Produzindo Produto
- Problema na produção
- Informar ao cliente e estender prazo de entrega
- Problema na produção
- Embalando
- Falta embalagem, precisa de mais tempo? Comunicar ao cliente e estender prazo de entrega
- Pedido Enviado
- Enviar pedido aos correios e colocar rastreio
- Produto Entregue
- Fazer contato para satisfação – AUTOMÁTICO
- Fim do processo
Alguns pontos, deste processo, eu marquei como automático, ou seja, que não precisa da interação do lojista. Por exemplo do Aguardando Pagamento até o Produzindo Produto vai depender da interação do meu meio de pagamento, se vai liberar o cartão, boleto, etc.. Agora que temos o fluxo completo, a jornada do pedido está bem definida vamos checar se temos os Status necessários cadastrados na loja, para isso vamos no menu de Configurações > Pedidos > Status de Pedido.

Deixamos alguns status pré-cadastrados, mas você pode criar novos para adaptar ao seu fluxo, neste meu exemplo, vou enxugar meu processo e colocar a etapa de Embalando, junto a Produção e criar um novo de Problema na Produção, apenas para sinalizar minha equipe da loja.
Então terei um fluxo para a equipe da loja e um para o meu cliente, já já mostro como vai ser para ele, mas por hora vamos tratar de como exibir o fluxo aqui na parte administrativa da loja. Para criar é muito simples, basta clicar em inserir e colocar o nome que desejar.

Agora que temos os status necessários, vamos ordenar esse fluxo de forma visual tanto na parte administrativa da loja quanto para o cliente, vamos voltar no menu de Configurações > Pedidos > Fluxo de Status nesta tela temos duas partes de configurações uma para o cliente e outra para o lojista (administração)

Vamos habilitar para o cliente (depois vamos montar o fluxo), vamos habilitar tanto para a página inicial quanto para a tela de pedidos e deixar 10 itens na listagem, você pode colocar mais ou menos como achar melhor. Como falei vamos primeiro definir o Fluxo na parte administrativa da loja, depois do cliente, primeiro vamos na aba de “Fluxo no painel da loja“.

Aqui vou escolher os Status que já cadastrei, escolher uma imagem. Aqui uma observação, como estas imagens vão para o seu cliente não tem como colocar novas imagens, elas são tratadas com tamanho e peso adequado para serem exibidas na caixa de email do cliente, por isso temos uma certa limitação, se sentir a necessidade de ter outa ou mudar a cor, contate nossa equipe de suporte para podermos orçar um ajuste para sua loja.

Ao escolher o Status e imagem, basta arrastar para cima ou para baixo para montar o fluxo, de acordo com nosso “check-list” lá em cima.

Bom o fluxo do administrativo está pronto, para o do cliente vou reduzir um pouco, não vou colocar para ele o processo de “Problema na Produção”, isso é um processo apenas interno, assim reduz as etapas na tela de pedido do cliente, que mostro mais para frente, para desabilitar, basta não marcar a opção, depois de tudo pronto basta salvar. vamos na tela de pedidos (Vendas > Pedidos) ou na tela inicial para checar como ficou n osso fluxo.

Veja que agora temos um fluxo que atende ao processo interno da loja de produção dos produtos, e para o cliente aprece apenas os status que ele precisa saber.

Bacana não, este é um recurso que pode ser adaptado para o seu negócio, por exemplo digamos que sua loja não precise de confeccionar os produtos,já tem em estoque, mas é um outro lugar e outra equipe. Logo podemos ter o seguinte processo (sugestão):
Fluxo Administrativo | Fluxo para o cliente |
---|---|
|
|
Neste exemplo eu tenho um fluxo que posso acompanhar minha equipe de galpão, caso meu cliente enter em contato vou saber onde o pedido dele está, e qual o responsável pela etapa. Da outra ponta meu cliente vai ver apenas o “que lhe interessa”.
Sendo assim a loja, com alguns cliques vai adaptando ao seu negócio tornado não só uma ferramenta de venda on-line, mas pode te ajudar a controlar o seu dia a dia de forma mais simples e prátiva, nõa basta se um bom vendedor precisa de administrar e organizar bem o seu negócio para ter um sucesso escalável =)
Espero ter ajudado, e até mais!
Como usar o editor de texto da loja para esconder ou mostrar um conteúdo em celular (mobile) e/ou desktop
Olá pessoal neste artigo vou mostrar um recurso avançado para mostrar ou esconder conteúdo na loja no mobile e ou no desktop. Mas antes de começar vamos precisamos entender o conceito de site responsivo, em geral um site responsivo é aquele que tem um só conteúdo e ele se adapta para diversos tamanhos de telas, de diferentes aparelhos.
Para que a mágica aconteça, algumas áreas das lojas são tratadas com uma base de códigos que está homologada para a maior parte destes tamanhos, mas note que no GIF acima o banner principal perdeu informação, ficou bem menor, e é neste ponto que vale mais a pena criar um novo banner no formato adequado para uma tela menor, assim seu cliente pode ler e entender melhor as informações e ofertas que deseja passar.
Bom neste caso, infelizmente ainda não tem tecnologia para a mágica, então devemos duplicar o conteúdo. Criando um banner no formato adequado (tamanho de foto de Instagram, por exemplo) para mobile, escondendo ele no desktop e escondendo o banner grande em mobile. E para executar tudo isso, além de criar as duas peças, vamos precisar de ter um pouco de conhecimento técnico, mas vou deixar abaixo um passo a passo para lhe ajudar, vamos lá!
Atenção: Esta dica v ale para qualquer parte da loja que tenha o editor de texto, pode ser detalhes de produto, área personalizada, descrição de categoria, etc..
1) ATIVAR MARCADOR DE CÓDIGO
Para começar vamos ativar no editor, o Marcador de Código, com ele vai ficar mais fácil de enxergar os códigos gerados durante esta edição e nas manutenções futuras, veja na imagem abaixo
2) CRIAR UMA DIV
Agora vamos criar uma DIV, DIV´s podemos associar com uma sala vazia, um espaço onde vamos colocar os móveis, que no nosso caso são textos, imagens, vídeos, etc..
Agora vamos dar uma “classe” para a DIV, essa classe é uma instrução de comportamento, no caso da imagem abaixo estamos orientando ela para não abrir no desktop, basta escrever neste campo: hidden-desktop
Dar o OK e pronto, já temos uma área que só vai ser vista somente no mobile, e aqui dentro poderá colocar o que desejar. Agora vamos fazer o mesmo para esconder coisas do mobile, ou no nosso exemplo lá em cima, o banner grande.
3) CRIANDO NOVAS ÁREAS (DIV´S)
Como deixamos a opção de mostrar códigos ativada, basta agora clicar na seta vermelha no fim da caixa que vamos abrir outra instrução, fora desta DIV que criamos
Agora vamos repetir o mesmo processo de criar uma nova DIV e adicionar outra classe a ela, para esconder no mobile, copie e cole estas classes: hidden-tablet hidden-phone
Pronto agora temos duas áreas pra editar, uma que só abre no mobile e outra no desktop, uma dica para ver se deu tudo certo é abrir o “código fonte” do editor e conferir se temos uma estrutura parecido com isso:
Note que temos a DIV com sua classe, dentro dela um P (parágrafo) com os nosso texto, e o mesmo segue para a outra DIV. Bom espero ter ajudado, e até mais!
CRO Ecommerce – Aumentar Vendas da Loja Virtual
Nesta aula da Brasil na Web você vai aprender sobre técnicas para aumentar as vendas de sua loja virtual trabalhando Leia mais
Black Friday – Estratégias de Vendas – 22 Dicas – Aula ao Vivo – Brasil na Web
AULA DE ESTRATÉGIAS PARA BLACK FRIDAY AO VIVO – BRASIL NA WEB
# Ainda não possui uma loja virtual? Comece grátis Leia mais
Cadastro Rápido de Produtos
Neste treinamento rápido vamos mostrar como cadastrar produtos de forma simples e rápida, confira!
Cadastro Rápido de Categoria
Neste rápido vídeo vamos mostrar como cadastrar categorias de uma forma mais rápida e eficiente. Confira!
Módulo de Filtro Avançado – Entenda
Veja como funciona um dos nossos módulos de filtro avançado, aqui ele busca produtos com mesmos requisitos, neste exemplo mostramos Leia mais
Alterando Mapa na Tela de Contato do Site
Como alterar o DNS (apontamento de servidor) da minha conta da GoDaddy
Se você fez o registro de sua hospedagem pela empresa GoDaddy e agora tem uma loja da Brasil na Web, você vai precisar trocar o DNS e apontar para nosso servidor, de acordo com o plano que contratou, antes de alterar o DNS fale com nossa equipe de suporte para garantir que sua conta esteja devidamente criada em nosso servidor e sistema, e solicite a GoDaddy um backup do sei site/loja e também um backup de sua conta de e-mail, estes dados podem ser perdidos na troca de DNS.
Muito importante, só faça esta alteração após contactar com nossa equipe de atendimento ou suporte, só será válido se sua conta estiver devidamente configurada em nossos servidores e esta ação pode demorar, um pouco, cada provedor de internet tem o seu tempo de atualização de rota, por isso tenha um pouco de paciência e tente fazer em finais de semana ou a noite, para não prejudicar sua reputação com seus clientes.
Agora vamos mostrar o como proceder dentro do painel da GoDaddy, acesse o painel e clique em DNS:
Dentro desta tela, na opção de Servidores de nomes clique em alterar
Selecione a opção de Personalizar e altere o nome do servidor, de acordo com o seu plano.
Feito isso seu site agora aponta para nossos servidores e estará pronto para nossa equipe migrar sua loja de teste para seu domínio, abaixo vou deixar os DNS do nossos servidores de acordo com cada plano.
Lembrando que se tiver dúvida não deixe de falar com nossa central de suporte. Espero ter ajuda, e até mais!
Configurar meio de pagamento e.Rede
A Brasil na Web é parceira oficial da Rede – Itaú e tem taxas especiais para nossos clientes, veja aqui: brasilnaweb.com.br/erede
Basta preencher o formulário que abrimos a sua conta (PV) de operação na Rede com a taxa especial da nossa parceria!
– Válido somente para clientes da Brasil na Web.
Atenção: A Rede possui ótimas taxas, mas não possui o serviço de análise anti-fraude ou qualquer garantia contra chargebacks.
Recomendamos utilizar o serviço CLEAR SALE para vendas operadas/autorizadas pela REDE.
www.clearsale.com.br
Como Gerar o Token – Chave de Integração – eRede
1) Assim que o seu PV (conta de operação) for aberta, a Rede enviará um e-mail com instruções, conforme exemplo abaixo:
2) Crie o seu Login no portal userede.com.br – você deverá informar os mesmos dados que preencheu em nosso formulário para que tudo seja sincronizado.
3) Faça login no portal userede.com.br > Menu > Vendas online > Ecommerce > Chave de Integração para gerar o TOKEN – Chave de Integração.
3.1 – No primeiro acesso, mais algumas confirmações de dados serão solicitadas para tornar o seu login com PERFIL MASTER (necessário para gerar o token). Informe os dados solicitados e pronto!
A tela vai exibir o botão de geração do TOKEN, copie e siga agora para a Plataforma da Loja Virtual.
Como configurar o módulo eRede na Loja Virtual – Brasil na Web
Acesse o Painel Administrativo de sua Loja Virtual > Menu > Configurações > Meios de Pagamento > eRede
Clique em Instalar ou Editar (caso já esteja instalado)
Configure conforme o exemplo abaixo. Leia cada campo atentamente e ajuste conforme suas preferências.
Em caso de dúvidas utilize o TUTORIAL no botão amarelo da tela.
Configure o FLUXO DE STATUS DE PEDIDOS, conforme exemplo abaixo:
As 2 situações marcadas acima, são casos em que normalmente você precisa definir se vai aceitar ou não o pedido.
Você também pode criar um “status” novo para o seu fluxo de pedidos para configurar de forma personalizada essa parte acima. Acesse: (Menu > Configurações > Pedidos > Status de Pedidos)
Pronto – eRede Configurado em sua Loja Virtual
É hora de testar!
Entre em sua loja virtual, faça um pedido com cartão de crédito e efetive o pagamento para ver como funciona!
Você poderá ESTORNAR o valor da compra logo em seguida para que não seja efetivamente debitado em seu cartão.
Para Estornar: Menu > Vendas > Pedidos (Processar) Aba eRede > Estornar.
Gostou? E a Antecipação com taxa de 1%?
Não deixe de ver também sobre a Antecipação com taxa de 1% do Banco Inter aqui e economizar ainda mais reforçando seu capital de giro para reinvestir em Estoque e Marketing!
DICA BONUS Para segurança da sua loja contrate um serviço de Anti-Fraude, saiba mais aqui https://www.brasilnaweb.com.br/clearsale
Boas vendas!
Exibir todos os produtos na página inicial da loja
Em alguns casos queremos exibir todos os produtos de uma vez só na página inicial da loja, mas antes de mostrar uma forma de se fazer isso, orientamos que não coloque todos os produtos, isso pode pesar muito sua página inicial e fazer com que seu carregamento seja prejudicado e eu cliente desista, aconselhamos sempre a colocar apenas uma “faixa”, com destaques, mais vistos, vendidos ou novos produtos.
Para os produtos em destaque ou montar o carrossel vou deixar alguns vídeos abaixo, é bom para que veja os treinamentos, para podermos prosseguir com este artigo ok?
- Configuração de carrossel e abas de produtos na loja
- Produtos em destaque por Categoria ou Escolha de Produtos
Agora que já sabemos como colocar produtos na home, usando o recurso de Carrossel ou abas de produtos, vou mostrar um macete para colocar um único carrossel com todos os produtos, primeiro vamos na listagem de produtos para saber a quantidade total de produtos. Vá no menu de Cadastros > Produtos > Lista Completa ao rolar a página vamos no final e note que vai ter o total de produtos, veja na imagem abaixo:
Note que temos aqui o total de produto, neste exemplo acima é de 190 produtos, mais uma vez, não aconselhamos que coloque todos os produtos na página inicial, ele pode ficar mais lenta e você pode perder SEO por causa disso.
Agora que sabemos o total, vamos no módulo de Produtos em Carrossel ou de Abas, no menu de Customização > Produtos em qualquer um dos exemplos adicione um novo item, escolha os Lançamentos, na parte de itens por lâmina coloque o total de produtos, que no meu exemplo é 190, em Colunas por lâmina coloque 4 e no Total de itens coloque novamente o total de produtos, neste exemplo de 190. Depois basta escolher o layout home e a posição (seguindo os artigo que mencionei acima).
Pronto, desta forma todos os produtos que estão na sua loja, serão exibidos por ordem de cadastro no sistema, se colocar um novo produto, você vai precisar voltar neste módulo e adicionar nos itens por lâmina e total de itens o novo total de produtos da loja.
Bom espero ter ajuda e até mais!
Como colocar vídeo do youtube responsivo na loja
Olá neste artigo vamos falar de vídeos na loja, para colocar vídeos na loja sempre usamos os incorporadores, códigos que o youtube fornece para a gente, porém estes códigos não são responsivos, ou seja, não ficam ajustado a telas menores. neste artigo vou mostrar uma forma mais avançada de se usar os códigos do vídeo do Youtube de forma responsiva na sua loja, vamos lá!
1 Adicionado CSS
Primeiro vamos no menu de Customização > Personalizar e na aba de Avançado vamos colocar o seguinte trecho de código de CSS Personalizado mas ATENÇÃO se tiver algum código ali, role para a última linha e cole depois de tudo ok?
.embed-container{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin-top: 30px; margin-bottom: 30px; } .embed-container iframe, .embed-container object, .embed-container embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
2 Copiando o código do Vídeo
Agora vamos pegar o código de incorporação do vídeo, na data de publicação deste artigo ele fica logo ao lado da avaliação do vídeo, em COMPARTILHAR
Ao clicar abre uma janela e logo no início tem um ícone de inorporar
Ao clicar nele uma nova janela se abre e basta copiar o código, que deve ser algo como isso:
<iframe width="560" height="315" src="https://www.youtube.com/embed/pibj7vfVJKU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Dica: Você pode alterar algusn parâmetros do vídeo do youtube, como remover vídeos ao final, autoplay, etc.. confira mais abaixo do código algumas opções e depois copie e guarde este código, vamos usar ele no próximo passo.
3 Adicionado o Vídeo
Agora vamos voltar na loja, e ir no módulo que vamos inserir o vídeo, pode ser qualquer lugar que tenha um editor de texto, descrição de produto, categoria, área Personalizada, etc… no meu exemplo vou colocar este vídeo na tela inicial da loja abaixo do banner de ofertas especiais. Leia neste artigo mais sobre posições e Layouts da loja, saiba onde e como pode colocar diversas partes e módulos na loja e motar como desejar.
Vou utilizar o módulo de Áreas Personalizada para colocar meu vídeo na página inicial, então vamos no menu de Customização > Áreas Personalizada vou criar uma nova área e chamar de vídeo home, não mostrar o título, escolher o layout home e a posição coluna esquerda.
Agora vou no editor de texto e criar uma DIV primeiro, clicando no símbolo e colocando a classe embed-container como mostra a imagem abaixo:
Vou escrever dentro dela algo fácil de encontrar no código como CÓDIGO DO VÍDEO, vai ficar como a imagem abaixo:
Assim vai ficar mais fácil de achar o ponto exato de onde devo inserir o código do vídeo, para isso basta clicar em Código Fonte, veja que temos uma DIV e dentro dela nosso texto.
Agora vamos substituir o texto pelo código do vídeo, deve ficar assim:
Feito isso só salvar e testar na loja, pronto agora toda vez que eu precisar usar um vídeo crio uma DIV com a classe coloco o vídeo do youtube dentro dela.
Espero ter ajudado, até mais
Instrução para instalação das Lojas BNW
Este é um vídeo para quem tem loja virtual da Brasil na Web, se ainda não tem abra a sua Leia mais
Alterar Fonte da loja virtual
Olá pessoal, neste treinamento vamos mostrar como trocar a fonte da sua loja Brasil na Web, confira no vídeo!
Recomendamos a Leia mais
Configurar PagSeguro na Loja Virtual
Olá pessoal neste treinamento, vamos mostrar como é simples e rápido configurar o meio de pagamento da PagSeguro em nossas Leia mais
Pagamento na Entrega ou Retirada da loja
Neste rápido treinamento vamos mostrar com é fácil habilitar o meio de pagamento na retirada do produto na loja ou na entrega do produto, uma forma bacana para quem tem loja física ou trabalha com motoboy, confira!