Mosaico de Banners Para Loja Integrada

Mosaico de Banners Para Loja Integrada

posted in: Apps | 0

 

Trazemos a você lojista da Loja Integrada essa extensão bem útil para quem gosta de investir em banners. Com ela é possível inserir mais 4 banners no estilo mosaico abaixo do carrossel padrão da Loja Integrada, confira:

 

Mosaico de Banners Modelo Visualyze Design Web

 

O CSS introduzido nessa extensão traz um suave efeito de ampliação ao passar o mouse sobre as imagens como mostra o exemplo acima. Essa funcionalidade é totalmente responsiva e está disponível também na versão mobile da sua loja!

Observações Importantes:

  • Essa funcionalidade é válida apenas para plataforma Loja Integrada.
  • Essa funcionalidade já traz uma formatação CSS padrão. Se você tiver conhecimento nessa área poderá editar a sua maneira livremente por sua conta e risco ou entre em contato e solicite um orçamento.

 

Instruções de Instalação:

Clique neste link para criar um entrada HTML avançada em sua Loja Integrada e preencha os dados como na imagem abaixo:

 

Mosaico de Banners Local de Instalacao Visualyze Design Web

 

Preencha como na imagem os campos de descrição, local de publicação, página de publicação e tipo. No campo conteúdo, cole todo o conteúdo do arquivo TXT que você irá baixar ao final desta descrição.

Recomendamos usar essa extensão somente na página inicial para não gerar perda de desempenho na sua loja, mas isso fica a seu critério.

Editando o código:

Observando o código, temos o seguinte:

 

Mosaico de Banners Codigo Visualyze Design Web

 

  • As partes sublinhadas em azul representam a posição dos banners no mosaico, não é necessário mexer nisso, serve apenas para se posicionar;
  • As parte sublinhadas em amarelo representam os links dos banners, remova os caracteres “###” e coloque o link da página do produto, categoria ou qualquer outro link que queira entre as aspas. Utilize apenas links HTTPS para não dar problema do certificado SSL. Se caso for usar links de páginas externas adicione o termo target=”_blank” logo depois do link, com isso a página irá abrir um uma nova guia, observe o exemplo abaixo:
  • Ainda nessa mesma linha, observe o termo “title=”NOME QUE APARECE AO PASSAR O MOUSE SOBRE A FOTO”“, o próprio exemplo indica o que é, substitua esse texto entre as aspas e coloque o que quiser;
  • As partes sublinhadas em vermelho representam os links das imagens. Observa que no mosaico existem duas imagens maiores e duas imagens menores. Para que fique correto será necessário criar essas imagens no tamanho correto. As imagens menores possuem o tamanho em pixels de 433 x 300 e as maiores tem o tamanho de 701 x 300. Recomendamos criar as imagens exatamente nesse tamanho para não ocorrer erros. Você poderá criar as imagens nos formatos PNG ou JPG, fica a seu critério. Após criar as imagens faça upload no servidor da sua loja para que seja gerado o link seguro em HTTPS, ou clique aqui se não souber onde é. Copie o link e substitua no local indicado em vermelho na imagem.

Não é necessário alterar mais nada no código.

Obrigado e aproveite!



  • Ao clicar no botão aguarde 5 segundos e clique no botão “fechar propaganda” no topo a direita. As páginas seguintes contêm anúncios.
Comments are closed.