⏱️ Tempo estimado: 5 minutos
Nível: ⭐⭐☆☆☆ (Básico)
Antes de começar, você precisa:
Acesso ao painel administrativo da sua loja
Imagens otimizadas para dispositivos móveis (até 767px de largura)
Tema que suporte banners na versão mobile
Introdução
A Loja Integrada agora oferece uma funcionalidade nativa para configurar banners específicos para dispositivos móveis. Esta solução substitui métodos antigos que requeriam personalização via código HTML, oferecendo maior praticidade e segurança.
Com esta funcionalidade, você pode criar experiências visuais otimizadas para diferentes dispositivos, garantindo que seus banners tenham o impacto desejado tanto no desktop quanto no mobile.
Método atual - Funcionalidade nativa (Recomendado)
01 - Acesse Personalize sua loja > Banners no painel da sua loja.
02 - Clique em Adicionar banner ou edite um banner existente.
03 - Configure normalmente seu banner para desktop na seção "Imagem do Banner".
04 - Na seção "Imagem do banner para celular", faça o upload da imagem otimizada para mobile.
🔑 Especificações para banner mobile:
Largura máxima: 767px
Formato: JPG ou PNG
Otimização: Use imagens com texto e elementos maiores para melhor visualização em telas pequenas
05 - Configure as demais opções (link, agendamento, etc.) normalmente.
06 - Clique em Salvar para aplicar as alterações.
💡 Como funciona: O sistema detecta automaticamente dispositivos com resolução menor que 767px e exibe a imagem mobile correspondente.
⚠️ Importante: O banner mobile só será exibido se o tema da sua loja suportar esse tipo de banner na versão mobile. A funcionalidade substitui a imagem existente, não adiciona um novo banner.
Método anterior - Personalização via código (Descontinuado)
🚫 Este método não é mais recomendado desde a implementação da funcionalidade nativa de banners mobile.
Por que não usar mais este método?
Complexidade desnecessária: Requer conhecimento em código e pode gerar erros
Manutenção: Atualizações da plataforma podem quebrar personalizações
Suporte limitado: A Loja Integrada não oferece suporte para códigos personalizados
Funcionalidade nativa disponível: A plataforma já oferece esta funcionalidade de forma segura
Para usuários que ainda usam o método antigo
Se você já utiliza personalização via código HTML para banners mobile:
01 - Acesse Personalize sua loja > Incluir código HTML
02 - Localize o código similar ao exemplo abaixo e remova-o:
(function() {
if (window.screen.width <= 767) {
var imagem = document.getElementsByClassName('slides')[0].getElementsByTagName('img');
imagem[0].src = '';
imagem[1].src = '';
imagem[2].src = '';
}
})();
💡 Como identificar: Procure por códigos que contenham:
window.screen.width <= 767getElementsByClassName('slides')imagem[0].src = 'URL_DA_IMAGEM'
03 - Após remover o código antigo, configure os banners mobile usando a funcionalidade nativa descrita acima
Dúvidas Frequentes
A funcionalidade nativa funciona em todos os temas?
A funcionalidade está disponível para todos os tipos de banner, mas a exibição depende do tema suportar aquele tipo de banner na versão mobile.
Preciso remover meu código personalizado?
Recomendamos migrar para a funcionalidade nativa, pois ela é mais estável e segura. Códigos personalizados podem causar conflitos.
O que acontece se eu não definir uma imagem mobile?
O sistema exibirá a imagem padrão do desktop, que será redimensionada automaticamente.
Posso usar diferentes dimensões para cada tipo de banner mobile?
A recomendação é usar largura máxima de 767px para todos os tipos. Consulte o manual do seu tema para especificações exatas.
Meu banner mobile não aparece, o que fazer?
Verifique se o tema suporta o tipo de banner escolhido na versão mobile. Se persistir o problema, teste remover a imagem mobile e entre em contato com o suporte.
Vantagens da funcionalidade nativa
Simplicidade: Configure diretamente no painel, sem necessidade de código
Segurança: Não há risco de quebrar o layout com atualizações da plataforma
Suporte oficial: Funcionalidade mantida e suportada pela Loja Integrada
Facilidade de manutenção: Altere as imagens quando quiser sem mexer em código
Compatibilidade: Funciona com todos os temas que suportam banners mobile
Resumo dos passos principais
Acesse Personalize sua loja > Banners
Adicione ou edite um banner existente
Configure a imagem para desktop normalmente
Adicione imagem específica para mobile (até 767px)
Salve as configurações
Aguarde alguns minutos para aplicação das alterações
Com a funcionalidade nativa, você tem controle total sobre a experiência visual dos seus clientes em diferentes dispositivos, sem complicações técnicas ou riscos de quebra de layout.
#banners #mobile #responsive #visual #loja #nativo