All posts by Adriano Meira

Criando Layout para Produtos

Este recuro da loja permite colocar banner, avisos, notas, menus e qualquer outro recurso que utiliza o menu de posições para um determinado produto. Por exemplo se quisermos colocar uma mensagem de cupom de desconto para um produto (ou mais) específico no topo da página abaixo do menu,podemos fazer com este recurso, vamos ao passo a passo.

1) Escolhendo os produtos
Primeiro vamos anotar e guardar o nome e a URL deste produto, por exemplo, abaixo temo o produto exemplo 1, ao acessar vamos pegar a URL do navegador e guardá-la em um bloco de notas, neste nosso caso a URL é produto-de-exemplo-01

2) Inserindo as URL personalizadas
Agora vamos cadastrar esta URL como uma nova rota de layout, vá no painel da loja no menu de “Customização” > “Rotas e Layouts” e clique em Inserir

Agora é só dar um nome para o layout e em “Adicionar” colocar a URl que copiamos

3) Alterando layout do produto
Agora vamos alterar o layout deste produto, assim toda vez que se entrar na URL dele, podemos ter informações e banners para este produto. Vamos no painel no menu de “Cadastro” > “Produtos” > “Lista” e vamos selecionar este produto e clicar em editar.

Dentro da edição do produto vá na aba de “Design” aqui temos uma seleção de layout e escolha esta que acabamos de criar.

Pronto, agora temos o layout deste produto cadastrado e no produto configurado, podemos utilizar vários recursos como banner, carrossel de produtos, menu principal, menus secundários e quaisquer recursos da loja que permite o seu posicionamento através de layout, veja este artigo que falamos sobre as posições e layout´s da loja. Como neste nosso exemplo vamos colocar uma mensagem de cupom de desconto para este produto (veja treinamento de cupom de desconto), vamos utilizar o recurso de Áreas Personalizadas, vá no menu de Customização > Áreas Personalizadas.

4) Criando conteúdo para o produto
Agora dentro do módulo de áreas personalizada vamos criar uma nova aba, vamos chamá-la de “Desconto do Produto 001”, no campo de conteúdo vamos colocar o texto ou imagem que desejamos, em nosso exemplo um texto e o cupom de desconto.

Depois vamos marcar a opção de Ocultar Título, e em Layout vamos selecionar nosso layout que criamos no passo 2, e em posição vamos selecionar a posição “PROMOÇÃO” isso fará com que nosso texto fique abaixo do menu e acima da descrição do produto. Deixe opção de status habilitado, e coloque a ordenação como 0 (zero).


E pronto agora seu produto terá a mensagem de cupom de desconto!

Agora você pode fazer o mesmo procedimento para outros produtos, ou pode fazer uma área genérica e trocar apenas em outros produtos o seu layout. Lembrando que o recurso de Área Personalizada permite utilizar texto e imagens, com este procedimento, você pode criar novos banners, carrossel de produtos, imagens, etc… e colocar em diversas áreas do layout, veja o artigo que falamos de layout´s e posições.

Se desejar um banner mais profissional, pode contar com nossa equipe de designers, entre em contato conosco para contratar uma manutenção e nossos design estão preparados para criar um ótimo banner ou visual para esta parte da sua loja.

Até mais!

 

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

Abra sua loja, cadastre, customize e venda!

Musica por: Prefekt – Rose Tinted

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

Como criar Cupom de Desconto

Neste tutorial vamos mostrar como criar e aplicar um cupom de desconto na sua loja virtual da Open Cart.

Veja mais Leia mais →

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

Programa de afiliados no ecommerce

Na loja virtual da Brasil na Web, existe um recurso que pode potencializar muito as suas vendas, é o Programa de Afiliados.

Com ele você pode ganhar parceiros (blogueiros, digital influencers, entre outros) que vão divulgar a sua loja virtual e receber uma comissão por isso. Vamos ver algumas etapas importantes abaixo para configurar e dicas para criar o seu programa de afiliados.

TAXA DE COMISSÃO, TERMOS E STATUS DE PEDIDO

Antes de começar é importante que crie um termo para afiliação, ele vai ser útil no ato de cadastro pela loja do seu afiliado, ajudando a você para se prevenir de alguém mal intencionado. Então vamos no menu de Customização > Páginas Institucionais e criar uma nova página com os TERMOS DE AFILIADOS descreva o programa, coloque prazos de pagamento, taxas e condições, sempre indicamos deixar tudo claro para você e seus afiliados.

Após criar a página vamos agora adicionar este termo no formulário de inscrição e configurar a taxa de afiliação. Vamos no menu de Configurações > Opções da Loja depois vamos na aba de Opções e por fim na seção de Afiliados, aqui vamos vincular a página que criamos. Podemos também colocar um status diferenciado quando o pedido deste afiliado cair (veja mais em fluxo de pedidos) e o valor da comissão que vai dar  ao afiliado, essa informação vai aparecer na tela de cadastro no site, é bom manter ela sempre alinhada com a página do termo que criamos.

SOBRE O CADASTRO

O cadastro de afiliado pode ser feito na loja virtual de duas formas:
1- O afiliado acessa o link www.seudominio.com.br/afiliados-login e faz o cadastro como afiliado
2- O administrador da loja realiza o cadastro em Menu > Vendas > Afiliados > Inserir

Em ambos os casos, é preciso aprovar o cadastro acessando Menu > Vendas > Afiliados > Aprovar.

SOBRE O ACESSO

Depois de ter feito o cadastro e ser aprovado, o afiliado pode acessar sua área de afiliado no link www.seudominio.com.br/afiliados-login
Acessando sua conta, ele terá um menu com todas as ferramentas que estão disponíveis pra ele.

SOBRE A DIVULGAÇÃO

Para divulgar um produto, o afiliado deve acessar sua área e clicar no item “Gerar Links”.

O afiliado pode copiar a URL da sua loja com o seu respectivo código de rastreamento ou escolher o produto que o sistema apresentará o link que ele deve utilizar. Quando um cliente chegar na loja através desse link, o pedido ficará vinculado ao afiliado, gerando comissão quando for pago.

SOBRE O COMISSIONAMENTO

Depois de feito o pedido, caso ele tenha vínculo com algum afiliado, isso aparecerá no sistema na tela de detalhes do pedido: Menu > Vendas > Pedidos > Processar

Nessa tela, existirão dois campos:
1- Afiliado: identificando o afiliado responsável pelo pedido
2- Comissão: valor de comissão devido ao afiliado

Entretanto, o valor de comissão deve ser liberado manualmente pelo administrador, depois de conferir o pedido e garantir que não há nenhuma falha. Para isso, basta clicar no botão verde Adicionar Comissão ao lado do campo “Comissão”.

E para remover a comissão deste pedido, basta clicar no botão vermelho Remover Comissão.

SOBRE O PAGAMENTO DE COMISSÕES

Uma vez liberada a comissão, o afiliado receberá um e-mail informando seu saldo atual.

Ele pode solicitar pagamento diretamente pela sua área de afiliado, recomendamos que você estipule um valor mínimo para saque das comissões, exemplo: R$ 50,00 ou R$ 100,00.

O processo de pagamento ao afiliado é feito de forma externa à loja, ou seja, ele pode optar por depósito bancário, pagamento via pagseguro, paypall, etc.. Você deve fazer isso fora da plataforma da loja.

Entretanto, para fins de controle, o saldo do afiliado deve ser abatido na loja acessando Menu > Vendas > Afiliados > Editar > Créditos. Nessa aba, basta lançar um valor negativo (-100.00, por exemplo) indicando que um pagamento foi feito e por isso deve ser abatido da comissão do afiliado.

É possível também adicionar qualquer crédito avulso utilizando essa mesma tela.

BENEFÍCIOS ADICIONAIS

A estratégia de afiliação é tão importante e boa que você vê cada vez mais empresas de nome criando programas assim. Um benefício oculto, mas não menos importante é que ao obter centenas de pessoas falando e criando links para a sua loja virtual em busca de comissão, elas estão ajudando no seu Link Building.

Ou seja, quanto mais links sua loja recebe na internet, mais popular ela fica, mais chances você tem de se sair melhor nos resultados de busca do Google. Não se preocupe, se os links forem naturais, feito de divulgações pontuais e não spam, sua loja não corre riscos de ser classificada com infratora das Guidelines do Google para Webmasters.

Se quiser entender ainda mais sobre Gestão de Afiliados, recomendamos participar do Afiliados Brasil, acesse e confira as dicas e participe dos eventos para criar uma excelente estratégia!

Então, comece agora o seu programa de afiliados, procure potenciais parceiros que possuem sintonia com o assunto que você também trabalha e bons negócios!

Gostou das dicas? Comente pra nós, implante e boas vendas!

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

JadLog – Módulo e Configurações para Loja Virtual

Neste artigo vamos falar do módulo Jadlog, uma opção de transportadora para a sua loja virtual. Com mais de 10 anos de mercado trabalhando no transporte de mercadorias nacionais e internacionais. No seu portfólio atendem desde documentos a cargas de grande porte e volume, saiba mais neste link..

Oferecer mais opções de entrega na sua Loja Virtual pode potencializar ainda mais suas vendas. A Brasil na Web oferece a integração com a JadLog através de módulo adicional,  que você pode comprar neste link.

 

A partir de agora, vamos mostrar como configurar o módulo.

Depois que você adquirir o módulo e ele for instalado pela nossa equipe, você vai acessar as configurações em Menu > Configurações > Opções de Frete > Transportadora JadLog > Editar. A tela de configuração está exibida abaixo:

Depois de configurar os campos de acordo com o seu contrato com a empresa JadLog. Você precisa checar a medida e peso padrão da sua loja, pois este módulo só trabalha com Centímetros e Kilograma.

Para isso acesse Menu > Configurações > Opções da Loja > aba Localização. Procure pelos campos Unidade de Medida Padrão e Unidade de Peso Padrão e defina como Centímetros e Kilograma, respectivamente.

 

Gostou da dica? Adquira o módulo pela nossa loja que nossa equipe dará todo o apoio necessário para implantar essa transportadora no seu ecommerce! Comente nosso post e boas vendas!

 

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

Adicionar vídeo no produto ou páginas da Loja Virtual

Olá pessoas hoje vamos falar de como adicionar vídeos na descrição de produtos ou em páginas de Informação da sua loja virtual na Brasil na web.

Você pode utilizar vídeos do Youtube, Vimeo entre outros que ofereçam o incorporador.

Obtendo o código do vídeo para incorporar

Primeiramente, obtenha o código de incorporação do vídeo, vamos usar como exemplo o youtube.

No youtube escolha o vídeo que quer colocar na loja, vá no item Compartilhar e depois em Incorporar e copie o código ali gerado. Veja que é possível mudar o tamanho e outras configurações, clique no “mostrar mais”.

 

Para adicionar o vídeo

Com o código copiado, vamos na sua loja virtual. Neste exemplo vamos colocar o vídeo em uma descrição de produto, mas pode ser aplicado a qualquer lugar da loja que tenha o editor de conteúdo, por exemplo, páginas de informação, áreas personalizadas, etc…

O editor serve para negritar, alinhar ao centro e definir alguns padrões para o texto, além destas funções temos o código fonte. Com ele podemos ver os códigos gerados ao usar funções como estas citadas acima, e com isso colocar nosso código de incorporação do vídeo.

Clique no botão Código Fonte:

A tela de edição vai ficar preta e com isso acessamos o código fonte deste trecho. Agora basta colar nosso código de incorporação do vídeo entre as linhas verdes, aconselhamos que seja nos espaços vazios, no início ou no fim de todo o código.

Agora salve e pronto, o vídeo está incorporado ao seu conteúdo e você acaba de aprender um pouco sobre HTML que lhe dá mais liberdade para enriquecer seus conteúdos.

Lembre-se vídeos enriquecem muito a experiência de compra do seu cliente e vão ajudar a melhorar as suas vendas. Saia do básico, crie vídeos de seus produtos, coloque no seu canal do youtube e vincule em sua loja virtual!

Simples não é? Gostou, comente e boas vendas!

 

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

Tamanho do banner da loja

O banner é uma parte fundamental da sua loja, é onde vamos mostrar aos consumidores promoções, novos produtos e destaques da loja! Antes de mais nada, vamos apenas definir dois conceitos importantes sobre os tipos de layout. O banner pode ser configurado de duas formas:

Ao cadastrar um banner que utilize o layout full, precisamos ficar atentos a alguns aspectos quanto ao tamanho de monitores e dispositivos móveis. Vamos tentar explicar de forma simples através do diagrama abaixo:

Quando trabalhamos com imagens que ocupam toda a tela do navegador (Layout Full), devemos lembrar que existem vários tamanhos de monitores, vários tipos de tablets e smartphones. Por isso devemos criar imagens com uma largura muito alta, para que se adapte à maioria dos navegadores.

No diagrama acima, a área azul representa a parte visível da imagem, a parte vermelha a que não vai aparecer. No layout full, a imagem se ajusta à largura do navegador e cresce proporcionalmente do topo da esquerda para baixo da direita (conforme indicação da seta no diagrama).

Os sites com layout full devem ser tratados para que o conteúdo principal do banner não fique nas bordas nem na parte inferior (vide área vermelha do diagrama). Já os sites com layout boxed não precisam se preocupar com isso. Desta forma para usar melhor a área do seu banner, aconselhamos usar o peso da imagem e/ou informações sempre na parte superior mais ao centro, assim os textos e botões de ação sempre estarão visíveis mesmo que seu cliente acesse em uma tela menor.

Para o tamanho do banner, você pode utilizar 1680x500px para layout full e 1170x500px para layout boxed. O tamanho do banner (largura e altura) pode ser configurado clicando no botão “Configurações Gerais do Banner” que fica no topo da tela de edição dos banners. Abaixo veja uma “blue print” de onde colocar o conteúdo do seu banner, assim ele vai se adaptar ao tamanho das telas sem que o foco de venda (informações importantes) seja perdido em telas menores:

Download desta imagem em PSD (Photoshop)
Se quiser mais dicas de banner ou mais funções veja o vídeo de treinamento abaixo ou clicando aqui

Para completar seus estudos para o banner da loja não deixe de ver estes link:

  1. Entenda a Mecânica do Banner na sua loja
  2. Criando um novo grupo de banner da loja
  3. Mapa de posições da Loja
  4. Personalizar Banner

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!

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.

Outros tutoriais que podem te interessar

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!

Outros tutoriais que podem te interessar

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!

 

Outros tutoriais que podem te interessar

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.

Outros tutoriais que podem te interessar

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-encoding. Em 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!

 

 

Outros tutoriais que podem te interessar

Este artigo foi útil para você?!