Como configurar banners responsivos para Mobile

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.

4 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 :frowning:

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:

https://btvoficial.com/

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/