Problemas na apresentação de slides

Olá pessoal, espero que vocês estejam bem! Estou tendo dificuldades em organizar os banners da minha loja ( apresentação de slides). Eu coloco um modelo de banner no desktop e ele fica muito bom, mas quando vou para o mobile ele aparentemente fica igual ao desktop o que para a tela do mobile não é bom, fica muito pequeno e não se adequa ao modelo mobile, que tem uma proporção de tela diferente. Ao tentar mudar o banner no mobile e usar outro com tamanho especifico para mobile, ele automaticamente altera tambem no Desktop. Ou seja, para resumir, não consigo usar banners diferentes em cada modelo e tentar usar o mesmo banner ele aplica automaticamente a mesma proporção. Se alguém souber como eu poderia resolver isso.

1 Like

Olá @Leleo2552 .

Obrigada pela sua questão! Esta é uma dúvida comum que lojistas enfrentam ao configurar a apresentação de slides ou banner na loja virtual e ficarei feliz em explicar as melhores praticas para assegurar que o visual da loja tem bom aspeto no web tal como no mobile.

Todos os temas na loja de temas da Shopify são responsivos. Isso quer dizer que os temas se adaptam tanto num computador ao ecrã do smartphone. Confira este documento aqui para saber mais sobre os recursos dos temas na nossa ThemeStore. Por padrão, não é possível colocar imagens diferentes na versão mobile. Isso não seja um problema se seguir as seguintes boas práticas para assegurar que o banner do seu site exiba as informações mais importantes, não importa o dispositivo que o visitante usa para navegar o seu site;

  • A imagem do banner será cortada para se adaptar a diferentes dispositivos; por isso, é importante definir o ponto focal da imagem para assegurar que o conteúdo da imagem que pretende destacar é exibida em qualquer dispositivo

  • Não é recomendado usar imagens que contem texto porque ele pode ficar cortado em certos dispositivos e não é possível modificar o texto na imagem. Se pretende colocar texto no banner ou apresentação de slides adicione o texto pelo editor de temas.

Agora vamos ver uns exemplos na minha loja teste para ilustrar esse ponto ainda mais. Basicamente, tem que considerar a orientação da imagem (horizontal ou vertical) e o espaço no seu site em que pretende inserir essa foto.

Confira no seguinte exemplo a imagem do café ao lado direto que quero inserir no banner do meu tema. A imagem é vertical e o banner é horizontal. Como você pode ver, a imagem é cortada e ampliada para encaixar no espaço do banner;

Agora se visualizamos essas imagens na versão mobile, você notará que mais da imagem é visível porque o banner é um quadrado;

Ao contrário da imagem que utilizei que já tinha o conteúdo importante no meio da imagem, pode ser que uma imagem tem o conteúdo principal em outra parte da imagem, como o fundo ou o topo. Neste caso, pode definir o ponto focal da imagem para que a informação mais importante da imagem seja apresentada nas versões desktop e mobile do seu site;u site;

Para saber mais sobre as práticas recomendadas para apresentações de slides e banners no seu site, não deixe de conferir este documento na nossa Central de Ajuda aqui.

Espero ter esclarecido a sua dúvida! Por favor, me avise se você conseguiu definir o ponto focal da imagem no seu banner. Como ficou? Caso não conseguiu inserir a imagem como desejado, sinta-se a vontade de responder aqui incluindo a imagem que você pretende colocar no banner, além de uma imagem do seu banner como ele aparece no seu site agora ou um link para o seu site e ficarei feliz em verificar mais a fundo.

Amália, muito obrigado pela resposta, me ajudou em muitos outros aspectos, mas não consegui solucionar a minha questão. O ponto mais importante e que o banner que tenho atualmente na loja eu criei seguindo as orientações de tamanho e tudo mais. O grande problema é que ao mudar para o mobile ele replica exatamente a mesma coisa porem em tela menor, logo as informações ficam muito pequenas. No seu exemplo do café era a mesma imagem porém com a dimensão adaptada ao dispositivo, no meu caso ele replica exatamente igual, vou enviar algumas imagens para você entender…

1 Like

Eu tambem tive o mesmo problema. O que amenizou foi fazer a arte, subir e ver como ficava no desktop e mobile. Aí se não estava legal, ia ajustando. Dá muito trabalho, mas com nenhum suporte consegui resolver de outro jeito. Fui na gambiarra mesmo.