problema com tamanho de banner

[Clydenio]

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?

[Paula]

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!

[Mateusribeiroam]

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

[Paula · Accepted solution]

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:

No dispositivo móvel:

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ó:

Veja estes documentos para mais instruções:

• Seções do Minimal - Apresentação de slides
• Dicas para o Minimal

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!

[Mateusribeiroam]

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]

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.

• Fazer com que a apresentação de slides tenha imagens clicáveis (Tema Minimal)
• Como tornar as imagens da apresentação de slides clicáveis (Tema Minimal)

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!