Boa tarde.
Galera, gostaria de saber se existe algum código css ou algum local que eu devo alterar para que eu tenha banners de formatos diferentes para mobile e desktop.
Igual ocorre em alguma site aqui dentro da loja integrada.
Veja o exemplo da loja H2O Purificadores.
5 curtidas
Olá Osvaldo, não sei se já resolveu, eu tenho um código bem simples que fiz, se ainda precisar, me da um toque: gianvitordias@gmail.com;
2 curtidas
Salvador da pátria!
Ainda estou a procura irmão se puder compartilhar com todos… Seria ótimo!
Acredito que vai ajudar muito a comunidade…
.box-banner img {
max-width: 100%;
}
1 curtida
Fala @Osvaldo_Lopes_Silva
Segue o código:
Adiciona em Rodapé, JAVASCRIPT
x = window.screen.width;
if (x <= 767) {
document.getElementsByClassName(‘slides’)[0].getElementsByTagName(‘img’)[0].src=‘URL DA IMAGEM’;
}
Para mais banners, só mudar o segundo número na sequência, ficando
document.getElementsByClassName(‘slides’)[0].getElementsByTagName(‘img’)[1].src=‘URL DA IMAGEM’;
no URL DA IMAGEM, basta colocar o link da imagem que você quer que apareça, equivalente a sequência do full banner do desktop
1 curtida
Na verdade eu peguei do seu site e fiz Gian. Uma ótima saída.
Eu só removi da primeira linha a opção de trocar imagem por que eu utilizo imagens diferentes no banner tarja.
Mas solucionou muito bem a necessidade.
Vou criar uma postagem definitiva para banners mobile aqui na comunidade.
Muito obrigado pela colaboração. Se precisar e eu puder ajudar em algo só mandar uma mensagem.
Consegui mudar o banner do mobile pegando o código pelo seu site… mas só aparece um banner. Tem algum código para ir trocando como slide?
E vc consegue mapear o banner do mobile com algum link clicavel?
Olá,
Qual o tamanho ideal de um banner para móbile?
Obrigado
Vai depender muito do layout e estilo da sua loja. Na minha coloquei no tamanho de 640px X 500 px e gostei do tamanho. Tenta fazer nesse tamanho e depois não esquece de testar.
Olá, como conseguiu colocar os banners responsivo ? Valeu
Osvaldo, também estou precisando fazer essa alteração. Poderia postar aqui como colocou uma imagem diferente com tamanho diferente no mobile?
Desde de já muito grato,
Bom dia,
Para o meu eu faço o banner na medida 375x480px (png)
Coloco depois no html, rodapé:
$banners_mobile = [
{
href: ‘#’,
src: ‘url imagem’,
alt: ‘BannerSALE’,
title: ‘Banner2’
},
{
href: ‘#’,
src: ‘url imagem’,
alt: ‘BannerEntrega’,
title: ‘Banner2’
},
{
href: ‘#’,
src: ‘url imagem’,
alt: ‘BannerLançamento’,
title: ‘Banner3’
}
];
E aí vai aumentando conforme o número de banner que quer.
E para colocar o link de direcionamento substituir o “#” em “href” pelo link
{
href: ‘#’,
src: ‘url imagem’,
alt: ‘BannerLançamento’,
title: ‘Banner3’
}
No meu não está dando certo…
É só colocar o codigo e o banner no lugar da URL?
Tem que configurar alguma coisa na plataforma para ativar esse HTML? Coloquei e nao aparece pra mim 
1 curtida
E qual o código eu utilizo, para o titulos e informaçõe do banner se adaptarem também, como o desse site:
posso pagar dependendo do valor…
Na nossa nova linha de temas primeshop 2.0, você consegue cadastrar versões de banners exclusivos para mobile em todos os banners da loja, diretamente pelo painel da plataforma(sem precisar de códigos).
A quem interessar, segue os temas:
Use o cupom PRIME25 para ter 25% de desconto até o dia 15/08.
PrimeShop 2.0 Black
PrimeShop 2.0 Blue Orange
PrimeShop 2.0 Fashion
1 curtida
Olá,
Adicionei o código, mas agora os thumbs dos produtos estão substituídos pelos banners mobile. Isso só acontece na versão mobile… conseguem me ajudar?
Obrigado!
oii, você tem algum outro código para isso porque no meu site não está funcionando. Segue o link do mesmo se você quiser: https://jura-store.lojaintegrada.com.br/
/*
$(".banner:not(.lateral) .flexslider") .removeData(“flexslider”);
$(".banner:not(.lateral) .flexslider") .flexslider({slideshowSpeed:2500});
*/
JAVA / RODAPE
VE SE AJUDA
Olá alguém pode me ajudar com o meu problema?
Estou tentando colocar o banner mobile mas não consegui com esse código:
Tentei com outro que a equipe da loja disponibilizou na página da comunidade (scripts validados pelo time li)
@media only screen and (max-width: 767px) {
/* b2076a3a-2067-46ba-90fa-18c11dc288d0 */
.secao-banners .flexslider .slides>li:nth-child(1) img{
content:url(“url-da-imagem1.png”);
}
.secao-banners .flexslider .slides>li:nth-child(2) img{
content:url(“url-da-imagem2.png”);
}
.secao-banners .flexslider .slides>li:nth-child(3) img{
content:url(“url-da-imagem3.png”);
}
}
Agora o banner mobile está aparecendo, porém em dois deles ficam duplicados.