FROM CACHE - pt-br_header

sobre banner desktot e mobile

polar
Visitante
2 0 1

como eu resolvo a divergencia de banners dektop e mobiles, por exeplo, quero colocar um banner para celular, só que no pc fical esticado, e se eu coloco um banner para pc na minha loja, no celular fica pequen, eu uso o tema refresh, alguem sabe como utilizar codigos para isso?

 

4 RESPOSTAS 4

raphaellima
Shopify Partner
46 10 9

Se dentro do editor de tema na sessão do banner não possui um tamanho recomendado ou não possui uma opção de adicionar um banner para desktop/mobile vai ser necessário fazer a alteração via código. Nesse caso você tem duas opções:

 

  • Utilizar CSS e criar mediaqueries para a resolução que a imagem está quebrando e fazer o ajuste da forma com que você ache melhor.
  • Adicionar uma opção de inserir imagem dentro da parte de {% schema %} do arquivo liquid referente a sessão na qual você quer adicionar a imagem mobile, então você poderia inserir uma imagem para mobile e outra para desktop.
Raphael Lima | Developer
WhatsApp: +55 (31) 92002-9324
biaferrazbf
Visitante
2 0 0

Ola Raphael, boa tarde! 

Você conhece algum tema que permite inserir imagem distintas ara desktop e celular?

Se souber, ficarei imensamente agradecida.

Nao desejo alterar no liquid.

Obrigada!

Amalia
Shopify Staff
1331 351 162

Olá @polar

 

O Refresh é um dos temas desenvolvidos pela Shopify e todos os temas desenvolvidos pela Shopify são Responsivos. Com um tema responsivo, o layout do seu site se adapta ao tamanho do visor do dispositivo que está exibindo as informações. Isso signifique que as imagens também se adaptam ao tamanho do ecrã para exibir a melhor imagem possível ao utilizador, seja qual for o dispositivo que estejam a utilizar para acessar o seu site. Por isso acontece que as imagens ficam cortadas entre as visualizações de Desktop e Mobile. A natureza de um tema e de imagens serem responsivos é que as imagens cortadas são inevitáveis. 

 

Outra opção para resolver isso é, escolher imagens do tamanho e a orientação certa para assegurar que os detalhes mais importantes são exibidos em qualquer dispositivo. Confira as dicas abaixo; 

 

-  Utilize imagens horizontais (imagens que são mais largas do que são altas). Orientação retrato ou imagens quadradas são mais adequadas para Banners que podem exibir duas imagens juntas. 

 

- Define o ponto focal da imagem e aumenta a probabilidade que o conteúdo pretendido fica sempre visível. 

 

- Evita usar imagens que contêm texto e coloque o texto após nas configurações do slideshow/banner. Imagens com texto não podem ser lidas por leitores de ecrã que afetará a acessibilidade do seu site, não contribuem para SEO, e é provável serem cortadas em alguns dispositivos de tamanhos diferentes. 

 

- Embora não podemos recomendar um tamanho de imagem exato que funcione sempre, usar 1200px como largura de base e 475px altura para um pequeno slideshow, 489px altura para um slideshow médio, e 775px para um slideshow grande é um bom ponto de começo!

 

Clique aqui para saber mais informações sobre como fazer o upload de imagens no seu site e como lidar com as mesmas.


Espero que isso ajude! Se tiver qualquer dúvida, só deixe um comentário aqui.

 

Amalia | Social Care @ Shopify 
 - A minha resposta foi útil? Clique em Curtir para me dizer! 
 - Sua dúvida foi respondida? Clique em Aceitar Solução
 - Para saber mais visite nossa Central de Ajuda Shopify ou nosso Shopify Blog

oliriacristina
Visitante
2 0 0

Boa tarde,vc tem que por um banner responsivo,ele se adequa a qualquer mídia,desktop,mobile,tablet.Vai no canva e se precisar por as medidas eu posso ver aqui no meu e te passo.