BANNER (SLIDESHOW) REDIMENSIONAR PARA MOBILE - TEMA DANW E SENSE

[Carol20]

Olá,

Estou utilizando slideshow (banner) só que o tema dawn e sense esta dando divergência nas imagens, quando muda para visualizar para mobile. Pode me passar o código e passo a passo para redimensionar? e enquadrar certinho em ambos (desktop e mobile) 

[Paula]

Olá @Carol20!

O que seria esta divergência que você está vendo? A imagem está sendo cortada ao visualizar no celular? Poderia, por gentileza, compartilhar imagens ou um vídeo para mostrar o comportamento? Qual é o layout que você está usando: largura total ou grade? 

Solicito essas informações, pois talvez você esteja encontrando algum problema por conta da imagem que você está usando. Por exemplo, se utilizar uma imagem alta, elas podem ser cortadas em cima e embaixo quando o dispositivo usado tiver uma tela larga, como no laptop ou desktop, veja só:

Já em relação a uma imagem larga, elas também podem ser cortadas quando o dispositivo usado tiver uma tela alta, como um celular ou tablet:

Geralmente, a imagem 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 podem ser parcialmente cortados. Existem alguns pontos a serem considerados ao usar imagens para apresentação de slides.

Para uma exibição ideal, é recomendado o uso de imagens em paisagem para apresentações de slides e banners de imagens. Imagens em retrato ou quadradas são melhores para a seção Banner de imagem se estiver exibindo duas imagens. Também é aconselhável escolher imagens com o conteúdo principal no centro e evitar usar imagens com texto. Embora não haja uma recomendação de tamanho exato, um bom ponto de partida seria usar como base uma largura de 1200px para a apresentação de slides. 

Para obter mais informações, consulte o documento que apresenta as práticas recomendadas ao adicionar imagens para apresentações de slides. 

Se essas instruções não resolverem a sua questão, por favor, compartilhe as informações solicitadas e ficaremos felizes em buscar por soluções. Até mais!

[vania_ribeiro89]

Olá boa tarde, estou com o mesmo problema como posso resolver?

[Fran]

Olá, @vania_ribeiro89. Você chegou a ler as sugestões que minha colega Paula deu acima? São ótimas para adaptar suas imagens aos diferentes dispositivos. 

Os temas responsivos da Shopify adaptam as imagens do banner de acordo com o dispositivo. Dessa forma, dependendo do formato de imagem que colocar, a imagem será cortada nas laterais ou em cima e embaixo. Ainda que partes da imagem sejam cortadas para se adaptar ao dispositivo, existe uma área da foto que será exibida em todos os dispositivos, chamada de ponto focal. Leia mais sobre isso aqui. 

Caso queira forçar a imagem do banner a aparecer da mesma forma em todos os dispositivos, terá que fazer uma modificação no código do tema, no entanto, os agentes de suporte da Shopify não podem orientar como fazer essa modificação, pois não somos desenvolvedores e mudanças no código estão além do nosso escopo de trabalho. 

Importante dizer que geralmente não indicamos fazer isso, pois os temas responsivos da Shopify são projetados considerando a experiência do usuário em diferentes dispositivos. Adaptar a imagem do banner para cada dispositivo garante que ela seja exibida de forma adequada, mantendo a qualidade visual e a legibilidade do conteúdo. Forçar a imagem do banner a ser a mesma em todos os dispositivos pode resultar em problemas de visualização, como distorção, cortes indesejados ou falta de legibilidade.

Se você deseja personalizar a aparência do banner, recomendamos explorar as opções de personalização disponíveis no painel de administração da sua loja Shopify. Lá, você pode ajustar o conteúdo, as cores e outros elementos visuais para criar uma experiência única e atraente para seus clientes. Eu discuto algumas delas neste post aqui. 

Se ainda assim quiser modificar o código do seu tema, achei este post aqui em nossa Comunidade em inglês que ensina a fazer isso. 

Fica a dica: sempre que for fazer uma alteração no código da sua loja, duplique seu tema para criar uma cópia de backup. Isso facilita o descarte de suas alterações sem perder totalmente o progresso do que você fez. 

Se tiver alguma dúvida, deixe um comentário e ficarei feliz em ajudar. 

[CezarA]

Olá Carol/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:

1. No modelo, selecione o item "Apresentação de slides" no menu a esquerda. (atenção que aqui não é no "Slide")

2. No menu a direita, procure por "Altura do slide"

3. 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!