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?
Topic summary
Problema central: Como exibir banners diferentes para desktop e mobile sem que fiquem esticados ou cortados inadequadamente.
Soluções propostas:
-
Via código: Usar CSS com media queries para exibir imagens distintas conforme a resolução, ou adicionar opção de upload separado no arquivo Liquid do tema (dentro de
{% schema %}). -
Temas responsivos: O tema Refresh (da Shopify) adapta automaticamente o layout ao dispositivo, mas isso pode causar cortes inevitáveis nas imagens. Recomenda-se usar imagens horizontais (mais largas que altas) e definir o ponto focal para garantir que elementos importantes fiquem visíveis.
-
Dimensões sugeridas: Largura base de 1200px; altura de 475px (slideshow pequeno), 489px (médio) ou 775px (grande). No caso específico mencionado, um banner 1900x500px funcionou bem.
-
Configuração no tema: No menu “Modelo” > “Apresentação de slides”, ajustar “Altura do slide” e ativar a opção “Adaptar à primeira imagem”.
-
Boas práticas: Evitar texto embutido em imagens (prejudica acessibilidade e SEO); adicionar texto nas configurações do banner/slideshow.
Status: Solução prática compartilhada e testada com sucesso.
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.
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.
1 Like
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.
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!
Olá Polar/Pessoal,
Apesar da pergunta feita há algum tempo, encontrei uma solução simples, pois caí aqui com a mesma duvida.
Na pagina de personalização do tema, no menu da esquerda no grupo “Modelo”, siga os passos abaixo:
-
No modelo, selecione o item “Apresentação de slides” no menu a esquerda. (atenção que aqui não é no “Slide”)
-
No menu a direita, procure por “Altura do slide”
-
Altere para a opção “Adaptar à primeira imagem”
Salve e pronto!
Claro que as imagens ainda precisam seguir o padrão dos tamanhos proporcionais em pixels recomendados. Como exemplo no meu caso criei o banner com 1900x500 achei que ficou bom.
Espero ter ajudado!
Abs!