All posts by Adriano Meira

Mapa de Posições da Estrutura de Telas da Loja Virtual

Dentro da loja da Brasil na Web temos uma flexibilidade de colocar vários conteúdos em algumas áreas pré-definidas do template. Na imagem abaixo estão definidas todas as posições disponíveis atualmente na loja. A única área que não pode ser utilizada para acrescentar conteúdo é o Topo.

Utilizando como exemplo o recurso de Áreas Personalizadas, vamos mostrar de forma prática como utilizar as posições. Para isso, siga os passos abaixo:

  1. Acesse o módulo em Menu > Customização > Áreas Personalizadas.
  2. Crie uma nova área personalizada clicando em Adicionar
  3. Informe um título, conteúdo e escolha em que layout/página ele deve aparecer
  4. No campo Posição (destacado na imagem em vermelho) vamos definir a posição que o conteúdo vai ocupar dentro do layout/página escolhido.

No exemplo acima, o conteúdo será exibido em todas as páginas na posição Menu Principal. Abaixo temos uma tabela com todos as posições disponíveis, siga o mapa no início da página para para poder se orientar visualmente.

PosiçãoObservação
Menu PrincipalColoca itens acima ou abaixo do menu principal.
Banner PrincipalColoca itens acima ou abaixo do banner – Posição “full”, ocupa a tela toda.
Primeiro destaquePosição abaixo da posição Promoção, serve como uma amostra dos melhores produtos ou destaques de produtos da sua loja
PromoçãoPosição abaixo do banner
Topo do conteúdoPosição acima do conteúdo da página
Coluna esquerdaPosição a esquerda do conteúdo
Coluna direitaPosição a direita do conteúdo
Rodapé do conteúdoPosição abaixo do conteúdo
Segundo destaquePosição abaixo do conteúdo da página – BLOG na home
Footer CheckoutRodapé da página de checkout – Dependência do layout OneCheckout
Lateral – CheckoutLateral da direita abaixo das formas de pagamento na tela de checkout final – Dependência do layout OneCheckout
Rodapé superiorPosição na parte de cima do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição
Rodapé centralPosição na parte do meio do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição
Rodapé inferiorPosição na parte de baixo do rodapé – Mais de um módulo adicionado, ele vai gerar uma nova coluna nesta posição

 

Estas posições podem ser aplicadas em vários módulos da loja que permitem definir em que posição eles devem ser exibidos. Por exemplo, se quiser colocar os produtos mais vendidos na posição Promoção, basta ir no menu de Customização > Produtos > Carrossel de Produtos e na configuração do módulo escolher qual layout/página e a posição Promoção.

Você pode utilizar os módulos de:

  • Captura de e-mail
  • Depoimentos
  • Listagem de categoria de BLOG
  • Listagem de últimos comentários do BLOG
  • Listagem de últimas postagens do BLOG
  • Banners
  • Áreas Personalizadas
  • Menu principal
  • Menus secundários
  • Caixa de feed do Facebook
  • Produtos em Carrossel
  • Produtos em Abas

Mapa da Minha Loja

Uma dica bem legal é você antes de começar a colocar produtos, banners e promoções na página inicial da sua loja, é criar um Mapa da Home, este mapa vai ajudar a você, de uma forma simples, visualizar os módulos que queira colocar na página inicial da sua loja. Para fazer é bem simples, risque em um papel quadrados e imagine que cada módulo vai ocupar uma linha e cada linha é uma posição e vai “empilhar” um em cima do outro no desenho, para ajudar vamos primeiro pensar como a tela inicial da loja vai ficar, vamos penas descrever o que ter na home, veja:

Na tel inicial da loja, após o banner, vai ter uma lista de produtos em promoção, um banner falando dos descontos de frete que vou dar, outra linha com produtos mais vendidos, outro banner com uma categoria que mais vendo e abaixo dele os produtos desta categoria.

Agora que definimos como vai ser a tela inicial, vamos desenhar, fiz um diagrama no computador, mas pode só escrever num papel ou no bloco de notas, isso vai ajudar a visualizar melhor como vai ficar a home.

Agora fica fácil colocar cada módulo ali, voltando lá em cima no Mapa Principal, vou colocar todos eles na mesma posição. Vou dar a dica bacana, tente colocar os módulos na mesma posição, criando uma base para sua home, tudo na mesma posição, fica mais fácil de ordenar (já falo disso mais em baixo), e pra melhorar a dica coloque tudo na posição “Topo Conteúdo”, assim se precisar um dia de colocar um banner ou produto promocional você vai usar as posições mais acima como “Promoção” ou “Primeiro Destaque”.

Agora que sei a posição padrão, dos módulos que vão na tela incial da minha loja, vou colocar em cada um dos módulo a mesma posição e mudar apenas a ordem, mas antes voltamos no nosso mapa e vamos escrever o módulo que vamos usar e sua ordem, veja na imagem abaixo para simplificar:

Agora é botar mão na massa, digo nos módulos:

  1. Criar um grupo de produtos em destaque da categoria (Veja como neste artigo)
  2. Criar 2 banners promocionais, vou usar o módulo de Área personalizada (Veja como neste artigo) e colocar eles na posição “Topo conteúdo” e eles na ordem 2 e 4
  3. Criar 3 produtos em carrossel (Veja como neste artigo), onde todos tem a posição “Topo Conteúdo”, mas o Promoções na ordem 1, o Mais Vendidos com ordem 3 e o Destaque da Categoria com ordem 5

Pronto seguindo estes passos agora tudo fica alinhado e em sua posição, se eu precisar mexer novamente no banner vou na área personalizada, se eu precisar mudar a categoria vou no módulo de produtos em destaque, e assim por diante.

Principais rotas da loja virtual

A rota é um conceito existente na loja e que tem uma correspondência direta com alguma página. Abaixo listamos as principais rotas existentes.

RotaObservação
account/accountPágina inicial do painel do cliente
account/loginPágina de login do cliente
account/registerPágina em que o cliente pode realizar um novo cadastro
account/voucherPágina para compra do vale presente
checkout/cartPágina do carrinho
checkout/checkoutPágina em que o cliente faz a conferência e conclusão do pedido (mobile)
checkout/successPágina de sucesso da conclusão do pedido
common/homePágina inicial da loja
information/contactPágina de contato
information/contact/successPágina de sucesso de contato enviado
onecheckout/checkoutPágina em que o cliente faz a conferência e conclusão do pedido (desktop)
product/categoryPágina de uma categoria qualquer
product/productPágina de um produto qualquer
product/category/alllista todos os produtos da loja
product/searchPágina de busca
product/specialPágina com a lista de produtos em promoção
product/testimoniallista de depoimentos de clientes

Essas rotas são úteis para utilizar o conceito de “layouts” da plataforma e podem ser usadas também na configuração dos códigos de conversão (veja artigo Como configurar Google Tag Manager, Adwords e Remarketing).

EXEMPLO PRÁTICO

Ao criar um novo LAYOUT você pode fixar módulos só para aquele layout, por exemplo:

Você quer exibir um banner acima de um determinado produto, na tela do produto.

Basta criar um novo layout usando a rota de product/product e dar um novo nome, por exemplo o nome do produto.

Então, basta editar o produto e na ABA DESIGN aplique o layout que você criou.

Agora, habilite o banner na posição desejada e informe o layout em que ele deve aparecer, no caso, o layout que você acabou de criar.

Pronto, somente este produto terá este banner agora!

Isso pode ser feito com qualquer layout de página como também categorias para se ter um banner só em uma determinada categoria, bem como para vários módulos como menus, banners, áreas personalizadas entre outros recursos posicionáveis.

Este artigo foi útil para você?!

Como comprimir e otimizar imagens – Tutorial Ferramenta Online

Olá pessoas, hoje vamos ensinar a comprimir e otimizar imagens para seu site ou loja virtual, é muito importante manter o máximo de qualidade das imagens do seu site com o menor tamanho possível.

Por que comprimir e otimizar imagens?

Ao comprimir a imagem você reduz o peso da mesma (tamanho do arquivo), melhora o tempo de carregamento da página tanto nos dispositivos móveis quanto em desktop e economiza espaço na sua hospedagem.

Então vamos lá, primeiro vamos falar de alguns conceitos básicos de imagens para a web.

Tamanho de telas vs Imagens

As telas de monitores estão se nivelando em resoluções entre 1300 e 1600 pixels (Segundo a uxdesignbrasil.cc), e cerca de 15% da web são telas de quase 1900 pixels de resolução.

Logo se sua imagem precisa cobrir toda a largura de uma tela ela deve conceber em torno de 1900 a 2000 pixels no máximo. Se quiser excluir e trabalhar com uma média menor, use 1680 pixels para aliviar o peso destas imagens. Dica: se possível oculte esse tipo de imagem grande, como banners, na versão mobile de sua loja virtual para otimizar o carregamento.

Resoluções DPI e PPI

Além do tamanho, as imagens digitais guardam o valor de pixel por polegada. Em resumo é quantidade de pixel que sua imagem tem por polegada (2,54cm), isso define o quanto sua imagem será nítida. Imagine um filme em 4K, alta resolução e um filme de celular mais modesto. O filme 4K vai ficar ótimo na sua tela de TV de 42 Polegadas, mas em um celular mais modesto não vai fazer diferença nenhuma, por isso para a internet podemos utilizar uma resolução mais baixa, nos dias atuais para se fazer um bom panfleto, cartão de visita, capa de revista uma imagem precisa ter 300 DPI, isso significa que você poderá ver todos os detalhes dos olhos da modelo da capa, a fina ponta da fonte do cartão, isto porque você vai pegar na peça física e chegar bem perto do seu rosto para ver.

Já imagens para internet só precisamos de 72 DPI, com isso economizamos muito espaço e tamanho de imagem! Então prepare sua câmera do celular ou outro dispositivo para poder tirar fotos no máximo em 90 DPI.

Meta dados de imagens

Além dos dois pontos que abordamos acima, temos os dados da foto que ficam escondidos. Estes “meta dados” guardam informações sobre a foto, como o dia em que foi tirada, qual câmera, que tipo de lente, autor e outros dados que cada dispositivo pode colocar ali, veja um exemplo no Flickr, onde ele pega esses Meta Dados para colocar na descrição das fotos:

formato-camera-blog
Porém estes meta dados geram um peso extra na sua imagem, e para otimizar ainda mais podemos removê-los com alguns softwares específicos.

Agora que temos em mente que temos três coisas para ajustar em nossas imagens, veja o passo a passo de como remover meta dados de imagens com a ferramenta on-line I Love IMG.

 

Como otimizar imagens para sites e lojas virtuais

1) Acesse o site: www.iloveimg.com/pt

Note que você tem algumas opções como Comprimir Imagem, Redimensionar entre outras…

tela-comrpessor

Aqui temos a ferramenta de comprimir imagem, redimensionar, cortar e converter a imagem, vamos começar com a de redimensionar, para colocarmos nossa imagem com largura de 1500 pixel.

2) Redimensionar para otimizar imagens

Selecione sua imagem conforme tela abaixo.

compress-iamge
No meu caso a minha imagem tem 2000 pixel de largura, ao carregar vamos ter algumas configurações veja:

resolucao-02
Aqui vamos manter a opção de “Manter Proporções”, assim não temos que preocupar com a altura.

Vamos mudar a largura para 1500 e clicar em “Redimensionar as imagens” e pronto ele vai abrir a tela para download da imagem.

Veja que só de diminuir de tamanho temos um ganho de metade do tamanho da imagem, e ainda assim ela ficou com ótima qualidade para web.

comparativo-001

3) Remover Meta Dados para comprimir e otimizar imagens

Agora vamos remover os Meta Dados e otimizar a imagem pelo mesmo site na opção de “Comprimir Imagem”. 

Volte na tela incial do site e clique em Comprimir imagem e selecione a imagem que será comprimida. Clique em  Comprimir imagem.

Veja que neste nosso exemplo ele comprimiu de 2.74 mb para 712 kb!!!

result-comrpess

Resultado final após redimensionar e comprimir a imagem:

comparativo-002comparativo-003

Você consegue ver diferença nessas 3 imagens? Eu não! rs…

A qualidade praticamente não é alterada e você obteve um super economia de peso da imagem e ganho de velocidade para o seu site. Gostou?

Por fim…

Este site permite que se faça estas ações com até 15 imagens, com isso você pode redimensionar 15 fotos. Já o recurso de compressão permite trabalhar até 5 imagens por vez!

Lembre-se um site que carrega mais rápido é mais bem visto pelo Google e com isso você pode ganhar melhores posições nos resultados de busca. Essa é uma das técnicas de SEO para loja virtual que já falamos aqui.

Mãos a obra e até mais pessoal!

Este artigo foi útil para você?!

Configuração de carrossel e abas de produtos na loja

Olá pessoas, neste artigo vamos aprender a configurar o carrosel e abas de produtos para a sua loja virtual.

A OpenCart Brasil na Web possui dois módulos que permitem que seus produtos sejam exibidos em formato de carrossel, aumentando assim quantidade de produtos exibidos na home da sua loja – ideal para destacar aquilo que os clientes mais compram para tornar o processo de escolha ainda mais rápido!

Então vamos falar um pouco deste módulo e uma dúvida recorrente sobre como configura-lós!

Para acessar o módulo vamos no menu de “Customização” -> “Produtos” e aqui temos os dois módulos o de “Exibição em Carrossel” e o de “Exibição em abas”

tela-001

 

A diferença entre estes módulos é que um você pode escolher mais de uma aba para o carrossel o outro apenas um. Abaixo vamos dar uma olhada na tela do primeiro módulo “Exibição em carrossel“:

tela-002

Nesta tela temos as seguintes opções:

1) Descrição do módulo: Aqui você pode utilizar texto e imagens para que fique acima da listagem de produtos e abaixo da(s) abas que escolherá mais abaixo.

2) Classe CSS – Prefixo: Neste campo você pode definir um estilo extra e nas customizações avançadas estilizar este módulo, mas é algo mais avançado que exige um conhecimento e técnica de programação, consulte nossos consultores para saber mais sobre customização de layout 😉

3) Tipos de aba de produto: Aqui vamos escolher quais tipos de destaque queremos mostrar neste carrossel, na opção de “Exibição de Carrossel” você só vai escolher um tipo de situação – Ex: Produtos em Promoção, Produtos Mais Vistos e etc. Já no módulo “Exibição em Abas” você pode escolher um ou mais tipos como: Lançamentos, Destaques, Mais vendidos, Promoções e Mais vistos.

Uma observação bacana aqui é sobre os produtos em destaque, que você cadastra no menu menu de “Cadastros” -> “Produtos em destaque” e as promoções na edição de um produto na aba de “promoção”. Assim estes módulos de Carrosel e Abas de produtos vão puxar essas configurações deste local.

4) Dimensão (L x A) e tipo de Redimensionamento: Aqui definimos o tamanho das imagens dos produtos.

5) Itens por Lâmina – Colunas por Lâmina – Total de Itens: Neste campos vamos definir a quantidade de itens por lâminas e colunas, para exemplificar melhor veja o diagrama abaixo, é a partir dele que você vai calcular a quantidade de itens a ser exibido:

diagrama-configuracoes-carrosel

 

Neste exemplo vamos exibir 12 produtos e vai ter mais 12 produtos escondidos, que serão exibidos ao se clicar nas “setinhas”, se desejar exibir apenas uma linha, seguindo o diagrama a configuração ficaria: 4 itens por lâmina, 4 colunas e 8 itens total. Se desejar ter duas linhas e três colunas sem que passe para outra lâmina (sem as “setinhas”) ficaria: 6 itens por lâmina, 3 colunas e 6 itens no total. Assim você pode trabalhar da forma que desejar a exibição dos seus produtos em destaque, lembando que o sistema te uma limitação de colunas que funciona apenas com 1,2,3 e 6 colunas, isso para garantir que em telas menores ele funcione da forma correta e responsivo (saiba mais sobre layout responsivo aqui).

6) Layout: Neste item você define em qual layout/tela este item irá aparecer, isso ajuda a reforçar seu produtos, por exemplo na tela de sucesso da loja você pode mostrar os mais vendidos, ou no resultado de busca os produtos em promoção ou na página incial da sua loja os mais vistos e assim por diante.

7) Posição: A posição do layout é onde será exibido, como na lateral, rodapé, área de promoção (no caso da página inicial), etc…

8) Status: Você pode cadastrar vários carrosséis e ativá-los de acordo com sua campanha de vendas, por exemplo um carrossel de produtos em destaque que mostra os produtos que mais venderam no natal.

9) Ordenação: A ordenação define seu lugar dentro da posição que definimos, por exemplo se escolhermos a posição “Showcase” e se houver outro módulo ali como, área personalizada a ordenação define quem vem acima de quem. Ex: o módulo que tiver ordenação 1 virá acima do que tiver ordenação 2 e assim por diante.

Lembrando que ali no topo você pode criar mais abas ou carrosséis e configurar cada um de uma forma diferente.

tela-003

 

Por hoje é só pessoal, até a próxima!

 

Este artigo foi útil para você?!

Como fazer a configuração automática do Outlook

O processo de configuração automática para o Outlook é bastante simples. Vamos ao passo a passo:

 

  • Na página seguinte, procure a versão do seu Outlook e em seguida clique em POP3 por SSL/TLS
  • Na tela seguinte, clique em Prosseguir

  • Se o seu navegador perguntar se você deve abrir, executar ou salvar o arquivo, escolha Manter ou Executar ou Abrir.
  • Se o seu computador exibir um Aviso de Segurança, clique em Executar.

Executar arquivo de configuração

 

  • Se o seu computador perguntar se você deve adicionar as informações contidas ao registro, clique em Sim.

Confirmar inclusão do registro

 

  • Agora abra o Outlook e utilize sua senha para fazer a autenticação.

 

ATENÇÃO: Se não houver opção de configuração automática para sua versão de Outlook, você pode seguir o tutorial de configuração manual do Outlook.

Este artigo foi útil para você?!

Configurar módulo PayPal na loja virtual

Olá! Hoje quero lhe ensinar a configurar o módulo de Paypal em sua loja virtual para que os pagamentos sejam confirmados automaticamente!

Ao criar sua loja virtual com a Brasil na Web ela já conta com o meio de pagamento PayPal para ser configurado por você, se desejar. Aprenda agora como configurar ativar o Paypal em sua loja virtual 😉

Configurando o Paypal na loja virtual – Brasil na Web

1º) Acesse o Painel Administrativo da sua loja virtual: Menu > Configurações > Meios de Pagamento.

2º) Na próxima tela escolha o módulo “PayPal”, clicando em editar

3º) Dentro do módulo vamos configurar os seguintes campos:

  • E-mail da conta do PayPal
  • Modo de Teste: NÃO
  • Método de Transação: VENDA
  • Situação do Pedido Completo: PAGAMENTO CONFIRMADO
  • Situação do cancelamento revertido: PAGAMENTO CONFIRMADO
  • Situação do Pedido Reembolsado: Cancelado com estorno

Você ainda pode colocar um nome diferente, ou seja, ao chegar no carrinho final (checkout) aparecerá o nome que colocar, por exemplo: Cartão de crédito 3x sem juros – Paypal

Configurando a Conta Paypal – NIP

1º) CONFIGURAÇÃO NIP

Agora que ajustamos o módulo na sua loja virtual, vamos no ambiente da Paypal, acesse sua conta.

Dentro do painel, acesse Configurações da conta e sem seguida no menu lateral clique em “Notificações” e depois em “Notificações instantâneas de pagamento“, clique em Atualizar. Se preferir, tente clicar diretamente nesse link.

 

Dentro deste painel vamos clicar em “Escolher configurações de NIP”

paypall-002

E aqui vamos colocar a URL de notificação que será:

www.SUA-LOJA/index.php?route=payment/pp_standard/callback 

Mude “SUA-LOJA” pelo seu domínio completo, por exemplo brasilnaweb.com.br  e depois marque a opção de “Receber mensagens de NIP (ativado)” , depois clique em salvar.

IMPORTANTE: Se você receber alguma mensagem de “Essa URL não funciona. Informe uma URL com https”, remova o http:// e informe apenas www.SUA-LOJA/index.php?route=payment/pp_standard/callback

 

paypall-006

 

2º) CONFIGURAÇÃO DE CODIFICAÇÃO

Agora vamos a última configuração dentro da PayPal. Acesse a página de Codificação de Idioma: https://www.paypal.com/cgi-bin/customerprofileweb?cmd=_profile-language-encodingEm seguinda clique em “Mais opções” 

paypall-006

E neste novo painel vamos  escolher a codificação UTF-8  e marcar a opção “Sim” como mostra a imagem abaixo:

paypall-006

PRONTO!

Isso é necessário para padronizar a forma como a Paypal irá comunicar com sua loja virtual.

É muito importante que este formato de comunicação esteja em UTF-8 na paypal, que é o formato de leitura da plataforma na Brasil na Web. Você receberá um e-mail da sua conta da PayPal informando a URL do NIP.

Agora você já pode utilizar o PayPal como forma de pagamento da sua loja virtual , faça alguns pedidos de teste para conferir.

Boas vendas!

 

 

Este artigo foi útil para você?!