Como exibir Banners Full exclusivos na versão mobile?
No código abaixo, para cada banner em formato desktop, deve haver um banner equivalente em formato mobile, sem exceção, é necessário ter a mesma quantidade de banners desktop e mobile. Utilize quantos forem necessários copiando o código e modificando o número que aparece em parênteses (1, 2, 3, etc).
Se houver link de redirecionamento nas imagens, é preciso respeitar a mesma ordem dos banners no painel e no código abaixo para os links fazerem o redirecionamento para a página correta de acordo com o banner.
Passo 01 - Suba o banner mobile no Gerenciador de Arquivos do painel (confira o tutorial), e copie a URL gerada da imagem.
Importante: É recomendado que todos os banners mobile possuam a mesma resolução e proporção, para não ocorrerem quebras no layout.
Passo 02 - Após isso, acesse Personalize sua loja > Incluir código HTML, para incluir o seguinte código:
Local publicação: Rodapé
Página de publicação: Página Inicial - Home
Tipo: CSS
Conteúdo: dentro do bloco de código você vai colar o código abaixo.
@media only screen and (max-width: 767px) {
/* b2076a3a-2067-46ba-90fa-18c11dc288d0 */
.secao-banners .cheio .flexslider .slides>li:nth-child(1) img{
content:url("url-da-imagem1.png");
}
.secao-banners .cheio .flexslider .slides>li:nth-child(2) img{
content:url("url-da-imagem2.png");
}
.secao-banners .cheio .flexslider .slides>li:nth-child(3) img{
content:url("url-da-imagem3.png");
}
}
Passo 03 - Substitua no código o campo “url-da-imagem.png” pela URL que você copiou, para cada banner mobile que você quer exibir na loja.
Passo 04 - Clique em Criar código e dentro de alguns minutos estará disponível em sua loja!
Exemplo de uso com artes diferentes para banner desktop e mobile, utilizando o tema “Mix de Imagens”:
Créditos: @RafaelGoulart-TAM
A Loja Integrada não se responsabiliza pela personalização deste código , pois o comportamento pode ser diferente dependendo do tema e outras personalizações. Qualquer mudança no layout inesperada, recomendamos a remoção do código.
