FROM CACHE - pt-br_header
Resolvido

problema com tamanho de banner

Clydenio
Visitante
3 0 0

Olá, quando eu coloco um banner na loja ele fica certo, porém quando abro na versão
desktop  e celular estão diferentes, versão mobile cortada, como faço pra fazer um banner que “caiba” nos dois?

1 SOLUÇÃO ACEITA
Paula
Shopify Staff
1725 339 253

Sucesso.

Olá @Mateusribeiroam!

Qual é o URL da sua loja? Gostaria de acessá-la para conferir o comportamento da apresentação de slides na versão desktop e mobile. 

O tema Minimal possibilita ajustar o tamanho dos slides e também a posição da imagem. Você chegou a explorar essas configurações e verificar quais se encaixam melhor para as imagens que você está usando?

Geralmente nos temas da Shopify, 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 podem ser parcialmente cortadas.

No entanto, o Minimal permite definir a altura da apresentação de slides para "Adaptar-se à primeira imagem", o que permite estabelecer um tamanho mais flexível e reduzir o corte em telas diferentes. 

Para verificar isso, acesse o editor de temas indo em Loja Virtual> Temas> Tema atual> Personalizar. Ao acessar o editor, na Página inicial> clique em Apresentação de slide e no menu de configuração ao lado direito dentro do menu Altura do slide selecione a opção Adaptar ao primeiro slide.

Como mostro nas imagens abaixo, podemos observar que a imagem do slide no desktop e na versão mobile não apresenta cortes.

No desktop:

04-58-67863-45927

 

No dispositivo móvel:

04-13-56397-82291

 

 

Além dessas configurações, poderá também ajustar a posição da imagem. Basta acessar o slide e na configuração escolha a posição de acordo com a área mais importante da imagem. Veja só:

04-20-66455-56892

 

Veja estes documentos para mais instruções:

Confira essas instruções e se ainda estiver encontrando alguma dificuldade, nos informe os detalhes solicitados e poderemos analisar isso mais a fundo. Até mais!

Paula | 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

Exibir solução no post original

5 RESPOSTAS 5

Paula
Shopify Staff
1725 339 253

Olá @Clydenio!

Entendo que você está com problemas com o banner da loja, pois não está sendo responsivo na versão mobile, correto? Precisarei fazer algumas perguntas para saber mais detalhes sobre o problema. 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? 
  • Quando você percebeu esse problema pela primeira vez?
  • Isso tem sido um comportamento constante ou surgiu após adicionar algum app na loja?
  • Qual é o URL da sua loja?

Além disso, por favor nos envie imagens ou um vídeo para mostrar esse comportamento. Ficarei feliz em conferir essa questão mais a fundo e buscar por soluções. Aguardo a sua resposta!

Paula | 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

Mateusribeiroam
Visitante
2 0 0

Tambem estou com o mesmo problema. Uso o tema MINIMAL versão MODERN. Os banners são nativos do tema.

Paula
Shopify Staff
1725 339 253

Sucesso.

Olá @Mateusribeiroam!

Qual é o URL da sua loja? Gostaria de acessá-la para conferir o comportamento da apresentação de slides na versão desktop e mobile. 

O tema Minimal possibilita ajustar o tamanho dos slides e também a posição da imagem. Você chegou a explorar essas configurações e verificar quais se encaixam melhor para as imagens que você está usando?

Geralmente nos temas da Shopify, 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 podem ser parcialmente cortadas.

No entanto, o Minimal permite definir a altura da apresentação de slides para "Adaptar-se à primeira imagem", o que permite estabelecer um tamanho mais flexível e reduzir o corte em telas diferentes. 

Para verificar isso, acesse o editor de temas indo em Loja Virtual> Temas> Tema atual> Personalizar. Ao acessar o editor, na Página inicial> clique em Apresentação de slide e no menu de configuração ao lado direito dentro do menu Altura do slide selecione a opção Adaptar ao primeiro slide.

Como mostro nas imagens abaixo, podemos observar que a imagem do slide no desktop e na versão mobile não apresenta cortes.

No desktop:

04-58-67863-45927

 

No dispositivo móvel:

04-13-56397-82291

 

 

Além dessas configurações, poderá também ajustar a posição da imagem. Basta acessar o slide e na configuração escolha a posição de acordo com a área mais importante da imagem. Veja só:

04-20-66455-56892

 

Veja estes documentos para mais instruções:

Confira essas instruções e se ainda estiver encontrando alguma dificuldade, nos informe os detalhes solicitados e poderemos analisar isso mais a fundo. Até mais!

Paula | 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

Mateusribeiroam
Visitante
2 0 0

Olá Paula, gostaria de dizer que meu problema já foi resolvido 🙂

Entrei em contato com o suporte, e eles ja me orientaram e consegui resolver o problema exatamente como você sugeriu.

Aproveitando, gostaria de esclarecer o tamanho recomendado dos banners e se consigo colocar os banners clicáveis, sem que eu tenha uma botão no banner ligando a um link.

Paula
Shopify Staff
1725 339 253

Obrigada pelo retorno @Mateusribeiroam! Que bom saber que conseguiu solucionar com os passos sugeridos.

O tamanho recomendado para as imagens dos slides do tema Minimal é de 1280 x 460 pixels.

Sobre a customização, você deseja fazer com que os slides se tornem clicáveis sem precisar do botão, correto? Para implementar isso é necessário fazer ajustes no código do tema.

Você já está assinando um plano pago?

Gostaria de saber isso, pois lojistas que usam um tema desenvolvido pela Shopify e estão assinando o plano Básico ou superior, dispõem de 60 minutos de cortesia para receber assistência de temas. Nossa equipe de temas poderá ajudá-lo com pequenas alterações e personalizações, mas saiba que não são todas as customizações que são suportadas; algumas customizações não são atendidas. Saiba mais sobre o atendimento de temas aqui.

Se já estiver assinando o plano, poderá entrar em contato com o nosso suporte através do e-mail e eles poderão verificar se a sua loja está apta para receber assistência ao tema e conversar com a equipe de temas para verificar se será possível implementar essa customização na sua loja. Como nos informou que entrou em contato com o suporte recentemente, basta responder ao último e-mail e um dos agentes poderá ajudá-lo com essa solicitação.

Caso for familiar com codificação e quiser tentar adicionar esse recurso no seu tema, encontrei esses posts na comunidade em inglês que apresenta o código e instruções. Essas páginas estão em inglês, se não for familiar com o idioma, poderá traduzir para o português utilizando o navegador Google Chrome.

Quero esclarecer que eu não sou especialista em codificação, portanto não sou familiar e não saberia lhe informar se essa customização realmente funciona. Se decidir tentar e prosseguir, recomendo duplicar o tema e trabalhar na cópia, pois se algo der errado não irá danificar o seu atual tema. Se tiver qualquer dúvida sobre a implementação do código, sinta-se à vontade em comentar diretamente nesses posts que membros da comunidade ou o especialista poderá ajudá-lo. 

Qualquer outra dúvida, só nos avisar!

Paula | 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