FROM CACHE - pt-br_header

BANNER RESPONSIVO (TEMA BOOST)

Resolvido
ItalloAlb
Turista
6 0 1

Olá pessoal, bom dia!!

Tenho um tema pago BOOST, e preciso que na versão mobile a imagem de banner seja diferente (proporções) da imagem Desktop. Há alguma forma de configurar mais de uma imagem, para formatos de tela diferente?

1 SOLUÇÃO ACEITA

Soluções aceitas
Amy
Shopify Staff
Shopify Staff
371 113 41

Sucesso.

Olá @ItalloAlb,

Entendo que a imagem que você está utilizando na versão desktop está com proporções diferentes na versão mobile certo? Para que eu possa te ajudar melhor, poderia me dizer o motivo pela qual você pretende exibir imagens diferentes na versão Desktop e Mobile?

O tema Booster é um tema totalmente responsivo, portanto, se você publicá-lo como seu tema, ele deve funcionar em diferentes dispositivos, ou seja, as imagens são otimizadas em todos os tamanhos de tela. Para exibir imagens diferentes, isso realmente exige alguma edição de código do seu tema. Uma opção que você pode considerar é entrar em contato com os próprios desenvolvedores do tema para que eles possam te ajudar com essa questão de codificação ou contratar um dos nossos Shopify Experts.

Não há como configurar mais de uma imagem para diferentes formatos de tela, entretanto, há algumas opções a serem consideradas para controlar como a imagem será cortada:

1. Use imagens com o dobro da largura e da altura. Essas imagens têm uma proporção entre largura e altura de 2:1. As dimensões recomendadas são 1200 px por 600 px. Entretanto, para esse tema recomenda-se 1500(min) x 1000px, em que a proporção seria 3:2. Vale a pena lembrar que esse problema é uma boa opção para testar diferentes tamanhos e ver o que funciona melhor para você.

07-56-yk4wu-comya

2. Se você não está preocupado com o corte em telas de desktop e deseja causar impacto em dispositivos móveis, use imagens quadradas (proporção entre largura/altura de 1:1) ou mais altas do que largas (proporção entre largura/altura de 2:3).

3. Defina a altura do slide como Adaptar à primeira imagem. Na edição do tema, busque a Altura da seção. Para evitar o corte das imagens, selecione Adaptar à imagem, que define a altura da seção de acordo com a altura da sua imagem. Lembrando que cada dimensão requer uma configuração diferente de altura do slide. Dê uma olhada nessas diretrizes:

07-26-6qmuf-9j93d

Além dessas dicas, sugiro dar uma olhada nessa página do próprio suporte do tema, a página está em inglês mas contém dicas ótimas para imagens. A melhor dica que posso dar aqui é encontrar uma imagem que funcione em todos os tamanhos de tela, pois isso é o que mais o beneficiará a longo prazo.

Aproveito para perguntar, você possui mais tráfego em dispositivos móveis? 

Aguardo a sua resposta 🙂

Até mais!

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

1 RESPONDER 1
Amy
Shopify Staff
Shopify Staff
371 113 41

Sucesso.

Olá @ItalloAlb,

Entendo que a imagem que você está utilizando na versão desktop está com proporções diferentes na versão mobile certo? Para que eu possa te ajudar melhor, poderia me dizer o motivo pela qual você pretende exibir imagens diferentes na versão Desktop e Mobile?

O tema Booster é um tema totalmente responsivo, portanto, se você publicá-lo como seu tema, ele deve funcionar em diferentes dispositivos, ou seja, as imagens são otimizadas em todos os tamanhos de tela. Para exibir imagens diferentes, isso realmente exige alguma edição de código do seu tema. Uma opção que você pode considerar é entrar em contato com os próprios desenvolvedores do tema para que eles possam te ajudar com essa questão de codificação ou contratar um dos nossos Shopify Experts.

Não há como configurar mais de uma imagem para diferentes formatos de tela, entretanto, há algumas opções a serem consideradas para controlar como a imagem será cortada:

1. Use imagens com o dobro da largura e da altura. Essas imagens têm uma proporção entre largura e altura de 2:1. As dimensões recomendadas são 1200 px por 600 px. Entretanto, para esse tema recomenda-se 1500(min) x 1000px, em que a proporção seria 3:2. Vale a pena lembrar que esse problema é uma boa opção para testar diferentes tamanhos e ver o que funciona melhor para você.

07-56-yk4wu-comya

2. Se você não está preocupado com o corte em telas de desktop e deseja causar impacto em dispositivos móveis, use imagens quadradas (proporção entre largura/altura de 1:1) ou mais altas do que largas (proporção entre largura/altura de 2:3).

3. Defina a altura do slide como Adaptar à primeira imagem. Na edição do tema, busque a Altura da seção. Para evitar o corte das imagens, selecione Adaptar à imagem, que define a altura da seção de acordo com a altura da sua imagem. Lembrando que cada dimensão requer uma configuração diferente de altura do slide. Dê uma olhada nessas diretrizes:

07-26-6qmuf-9j93d

Além dessas dicas, sugiro dar uma olhada nessa página do próprio suporte do tema, a página está em inglês mas contém dicas ótimas para imagens. A melhor dica que posso dar aqui é encontrar uma imagem que funcione em todos os tamanhos de tela, pois isso é o que mais o beneficiará a longo prazo.

Aproveito para perguntar, você possui mais tráfego em dispositivos móveis? 

Aguardo a sua resposta 🙂

Até mais!

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