Como inserir um banner tarja com diversos links na Loja Integrada? | Social UP

Como inserir um banner tarja com diversos links na Loja Integrada?

Fala pessoal, tudo certo? Quero mostrar hoje uma forma diferente de cadastrar um banner tarja na sua loja virtual. Essa forma de configurar o banner tarja é aplicado somente à Loja Integrada, ok? Em outras plataformas como Tray, Xtech, VTEX, Nuvem Shop é possível aplicar, porém pedimos que fale conosco, pois não é tão simples quanto esse tutorial.

O que você precisa para iniciar?
  • Uma loja na plataforma Loja Integrada;
  • Um banner tarja;
  • Os links das páginas extras, que nós vamos supor que você já criou;
  • E/ou links externos .

Primeiramente, você deverá acessar o site https://www.image-map.net/ para poder criar o mapa da sua imagem. Clique em SELECT IMAGE FROM MY PC para selecionar a imagem que você tiver em seu computador.



A sequência a ser executada é bem fácil:
- Você marca como ativa a parte que quer gerar um link (em ACTIVE);
- Escolhe o formato de seleção que irá fazer, podendo ser RECT (retângulo), POLY (polígono) ou CIRCLE (círculo);
- Insere o link  respectivo àquele pedaço do banner tarja;
- Coloca um title (Isso pode colaborar com a usabilidade e SEO do seu site);
- Seleciona um target, podendo ser _BLANK, _PARENT, _TOP, _SELF. (Dica: use _SELF para páginas internas e _BLANK para links externos)


Esse processo você irá fazer apenas para inserir um link na imagem, quando quiser fazer outra, deverá clicar em ADD NEW AREA e assim, repetir os passos a cada novo link que queira inserir.
Depois que finalizar, chegou a hora de gerar o código. Clique em SHOW ME THE CODE e irá abrir uma janelinha (a chamamos de modal), e ali teremos o código a ser copiado.



É bom que você se atenha a esse detalhe: Apenas o que está dentro da tag MAP será copiado, ou seja:

<map name="image-map"> SÓ QUE ESTÁ AQUI SERÁ COPIADO </map>
Após copiar, você vai até a sua loja na seção de cadastro de banners



Clica em CRIAR NOVO BANNER na seção BANNER TARJA.

Ali você irá:
  • Ativar ou inativar o banner;
  • Dar um nome para o banner;
  • Escolher em quais páginas você quer que ele apareça;
  • Link do banner  (você irá deixar em branco);
  • Quando clicar no link (deixe como está);
  • Título do banner (pode deixar em branco também);
  • Faça upload da imagem, lembrando que ela deve ser menor que 500kb (recomendo ainda que seja .JPG e tenha menos de 70kb);
  • Clique em INSERIR MAPA DA IMAGEM, cole o código nesse campo;
  • Finalize clicando em CRIAR BANNER.

Pronto! Seu banner tarja está cadastrado.

O que achou desse conteúdo? Gostou? Então comente abaixo o que achou.

Quer sugerir algum conteúdo de vídeo? Envie para nós

Além do texto deixarei o vídeo completo aqui em baixo para que você possa acompanhar passo-a-passo do que foi feito.

Postado originalmente em 11/12/2019

Atualizado em 16/06/2021

Deixe um comentário

O que você achou dessa postagem? Ficou com alguma dúvida, tem algo a acrescentar? Ficaremos muito felizes com o seu comentário. Apenas o seu nome e o comentário ficarão públicos, seu e-mail não será publicado.

Comentários
  • Alison Amaral
    11/06/2020 22:57:47

    Olá Eduardo, tudo bem? Já assisti vários vídeos da Social Up e tem me ajudado muito. Inseri o botão flutuante do whatsapp e deu tudo certo, funcionou perfeitamente. Também gostei muito desse conteúdo a respeito do banner tarja, entendi todo o procedimento, no entanto, poderia me indicar algum banco de imagem que eu possa baixar tais como "Frete Grátis", "Ambiente 100% Seguro", entre outros? Assim como indicou o uso do Iconfinder, achei demais poder utilizar vários ícones sem custo. Aguardo seu retorno se possível. Um abraço

  • Eduardo
    12/06/2020 12:18:05

    Fico feliz com seu comentário em nosso blog. Vou te indicar aqui um banco de bancos: https://uigoodies.com/ Esse site te traz uma listagem de sites de ícones, uma listagem de sites de fotografias gratuitas e assim por diante. Espero que possa lhe ajudar.

  • JEFFERSON SOARES REIS
    22/10/2020 14:49:29

    Olá Eduardo. Venho te agradecer por todo conteúdo, dedicação e disponibilidade que você tem para nos ensinar. Seu blog tem me ajudado muito nesse início do meu e-commerce. Início cheio de incertezas e insegurança sobre o negócio propriamente dito, sobre toda estruturação e layout, porém, seu blog serve de incentivo para pessoas como eu, que utiliza o "faça você mesmo", seja por limitações em investimentos ou demais motivos. Obrigado!!!

  • Lucas
    17/11/2020 19:23:10

    Muito bom o conteúdo.... Se tiver um curso voltado para essas edições eu quero.