Como ter banner mobile e banner desktop diferentes?

Já reparou que um banner no computador se comporta diferente de um banner no celular?

Nesse artigo ajudaremos voce a criar um banner mobile e um banner desktop diferentes para a Loja Integrada.
Obs. criamos somente para Full Banners (banners inteiros), por enquanto

Vou ensinar o passo a passo de como fazer isto:

  • Entre no painel da loja integrada
    https://app.lojaintegrada.com.br/painel/

Configuração do Script / Código

  • No canto superior direito, clique no icone da engrenagem, depois “Incluir codigo HTML”
O atributo alt desta imagem está vazio. O nome do arquivo é image.png

  • Clique no botão de “Adicionar codigo”
  • Insira um codigo HTML conforme a imagem:

  • No campo conteúdo, coloque o seguinte script:
<script>

var mobile = $(window).width() < 950, obj=[], index=0, index2=0;
$("body.pagina-inicial div.banner.cheio .flexslider img").each(function (x,y) {
		
	if ($(y).attr("alt").indexOf("mobile") != -1) {
		if (!mobile) {
		    obj.push(index);
		    
		    if ($(this).parent().prop("tagName") == "LI") {
		        $(y).parent().remove();       
		    } else {
		        $(y).parent().parent().remove();    
		    }
		}
	} else {
		if (mobile) {
			
			if ($(this).parent().prop("tagName") == "LI") {
		        $(y).parent().remove();    
		    } else {
		        $(y).parent().parent().remove();       
		    }
		}
	}
	index++;
});

</script>
  • Apos isso, clique em “Salvar codigo HTML”


Você ainda não tem um sistema de avaliação inteligente na sua loja? Entre em contato conosco e saiba mais, estamos oferecendo teste grátis de 30 dias para conhecer nossa ferramenta


Configuração do banner

  • No canto superior direito, escolha o botão engrenagem, em seguida clique no link “Banners”, conforme a imagem a seguir:
  • No painel Full Banner, terá um botão chamado “Criar novo banner”, clique nele
  • Para banners a serem utilizados no mobile/celular, voce vai precisar colocar a palavra “mobile” dentro do campo “Nome do banner”, conforme a imagem a seguir:
  • Os banners a serem utilizados no computador, serão os que não contem o nome “mobile”
  • O Script vai automaticamente de acordo com essa palavra colocada, separar os banners na sua loja

Gostou da matéria, passe aos seus amigos, deixe seus comentários, fale para seus amigos lojistas. Se precisar estamos a disposição.

  • Veja um exemplo que fizemos em uma loja de um cliente nosso:
BANNER PARA CELULAR MOBILE LOJA INTEGRADA

BANNER PÁRA COMPUTADOR LOJA INTEGRADA

Deixe uma resposta

O seu endereço de e-mail não será publicado.