Como eu faço para que um banner na loja seja vistos da mesma maneira no PC e no Celular?

[Angelamanenti]

Estou tendo dificuldade de redimensionar meus banners para quem fiquem iguais, sendo eu acessando o site pelo computador tanto quanto pelo celular. Quando entro pelo celular os banners mudam, gostaria que ficassem da mesma maneira como quando entro no website pelo computador. Existe um tamanho ideal de imagens ? Existe algum código que deva adicionar na loja? 

Obrigada, 

[Paula]

Olá @Angelamanenti!

Pela sua explicação eu entendo que você adicionou uma imagem no banner da loja e parece que ela está sendo exibida de forma diferente ao acessar o celular, certo? Quando você diz banner da loja você está se referindo à seção apresentação de slides, correto?

Precisarei fazer algumas perguntas para saber mais detalhes sobre o comportamento do banner para assim buscar soluções. Poderia por gentileza me informar:

• Qual é o tema que você está usando? 
• Esse banner que você está editando ele é nativo do tema? Ou você o implementou através de app ou customização no código? 
• Qual é o comportamento do banner ao acessar o celular? As imagens adicionadas estão sendo cortadas?
• Qual é o URL da sua loja? Gostaria de acessar a loja para fazer alguns testes e também visualizar o comportamento.

Geralmente a altura da apresentação de slides se ajusta automaticamente para preencher a tela do dispositivo que está sendo usado para navegar na loja. Como resultado, algumas das imagens / vídeos podem ser parcialmente cortados. Esse geralmente é o comportamento esperado de qualquer site que use Hero Image. A maioria dos temas da Shopify usa hero image e hero banner, portanto, estariam sujeitos a esse corte automático.

Existem alguns pontos a serem considerados ao enviar imagens de largura total, pois não é algo que pode ser ajustado ou corrigido sem substituir a apresentação de slides inteira. Para obter mais informações sobre isso, consulte este documento que apresenta as práticas recomendadas ao adicionar imagens de largura total.

Também temos este artigo do blog que detalha como prevenir o corte de imagens. Esse artigo está em inglês, portanto se não for familiar com o inglês, poderá traduzir a página para o português facilmente utilizando o navegador Google Chrome - veja aqui como traduzir.

Confira esses documentos para saber sobre o tipo de imagem que deve ser usada no banner, e se ainda encontrar dificuldade, nos envie os detalhes solicitados e ficaremos felizes em conferir essa questão mais a fundo.