Como exibir banner tarja no mobile?
Por padrão o banner tarja é escondido quando o site é visualizado no mobile, devido ao formato do banner, que por ser muito comprido fica pequeno na tela do celular, prejudicando a leitura.
Com o código abaixo, o banner tarja é ativado no mobile e você pode utilizar uma outra imagem adequada à tela do celular para exibir uma versão diferente do banner tarja quando o acesso ocorrer por smartphone.
Passo 01 - Suba a imagem do banner tarja mobile no Gerenciador de Arquivos do painel (confira o tutorial), e copie a URL gerada.
Passo 02 - No painel da sua loja vá em: Personalize sua loja > Incluir código HTML. Clique em Adicionar código, em seguida, preencha com as seguintes informações:
- Local publicação: Rodapé
- Página de publicação: Página Inicial - Home
- Tipo: CSS
Conteúdo: Em conteúdo copie e cole o script abaixo.
@media only screen and (max-width: 767px) {
/* 577c1788-054d-4397-9724-7bde1ae058ba */
.row-fluid.banner.hidden-phone{
display: block!important;
}
.span12.banner.tarja img{
content:url("url-do-banner-tarja.png");
width: 100%;
}
}
Passo 03 - Substituia no código abaixo o campo “url-do-banner-tarja.png” pela URL que você copiou.
Passo 04 - Pronto! Não se esqueça de clicar em “Criar código”, e dentro de alguns minutos estará disponível em sua loja!
Nas imagens abaixo é possível conferir o resultado, utilizando duas imagens diferentes para o banner tarja, com as informações em uma linha para desktop e duas linhas para mobile, facilitando a leitura na tela do celular.
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.