Como mudar as dimensões de um banner no tema Dawn

[Amabile]

Boa tarde, pessoal! Tudo bom?

Venho há algum tempinho tentando modificar as dimensões do banner que uso em meu site, porém não tenho tido sucesso. Toda vez que uplo uma imagem para o banner, ocorre o resize da mesma. Ou seja, por mais que eu faça a imagem/arte no tamanho e dimensão desejada, ocorre o redimensionamento dela. 

Gostaria de solucionar isso o quanto antes, deixando o banner mais fino, e não tão amplo (no sentido vertical) quanto é no tema Dawn. Poderiam me ajudar?

[arthursunrise]

Opa!

Já tentou mudar o código do arquivo "section-image-banner.css" ou "image-banner.liquid"?

Pode conseguir a customização que precisa assim.

[Amabile]

Oi! Já tentei sim, mas infelizmente não consegui deixar o banner em um tamanho desejado ou em um formato o qual o responsivo não mude suas dimensões 😞

[Fran]

@Amabile, já que você ainda não conseguiu ajustar o seu banner, gostaria de recomendar mais duas formas de pedir ajuda. 

• Você pode fazer sua pergunta no nosso fórum especializado em Design. Isso porque há vários especialistas da Shopify que ficam por lá dando dicas de codificação para a frente da loja. As chances de sua pergunta ser respondida com um código que funcione para você são maiores lá. Os posts são feitos e respondidos em inglês, mas você pode utilizar o tradutor de sua preferência caso necessite. 
  
  
• Além disso, você pode contratar um especialista da Shopify para fazer isso para você. Aqui vai uma lista de especialistas que atendem em português. 

Espero que ajude!

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

[Fran · Accepted solution]

Olá, @Amabile. 

Entendi que você está criando uma arte para o banner do seu site, porém, a imagem não está sendo visualizada da maneira como você gostaria. Como o Dawn é um tema responsivo, o tamanho do banner vai variar de acordo com o dispositivo que você estiver visualizando o site. Imagens grandes não cabem em todos os dispositivos. Sabendo disso, o sistema corta parte da imagem, dependendo do dispositivo que você está usando. Por exemplo, se você estiver no desktop, o banner aparecerá de um tamanho, porém no mobile ele terá outro. Então, como se adaptar a isso?

Ponto focal

• 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. Quando as suas imagens são cortadas em algumas telas, o ponto focal permanece visível, enquanto que as áreas ao redor ficam ocultas. Isso quer dizer que você deve colocar toda a informação que não pode ser cortada dentro do ponto focal. 
  
  
• Alguns temas têm uma configuração de posição de imagem que você pode usar para especificar qual parte de uma imagem é o ponto focal, dependendo do dispositivo. Confira a configuração do Dawn aqui. Para temas que não possuem essa configuração, defina o ponto focal de cada imagem no centro.
  
  
• Adicione a imagem desejada e, em seguida, teste a aparência em vários tamanhos de dispositivo diferentes para ter certeza de que a imagem funciona, independentemente de onde seus clientes estejam visualizando. 
  
  

Texto independente da imagem

• Você está utilizando texto como parte da imagem do seu banner? Quando se trata de banners e apresentações de slides é mais fácil trabalhar com imagens sem texto e utilizar as funções do próprio editor de temas para adicionar texto ao banner. Se o texto fizer parte da própria imagem, ele pode acabar sendo movido, recortado ou ajustado com base no tema. O Dawn permite adicionar texto e links ao seu banner sem que esse texto esteja na imagem. 

Alterando o código da loja

• Se ainda assim você não gostar de como o Dawn exibe o banner, você pode fazer uma modificação no código da sua loja, para que o banner seja exibido do tamanho que você quiser. Este post aqui na nossa Comunidade em inglês ensina a fazer isso. Caso precise de ajuda com a tradução, recomendo utilizar o recurso do navegador Google Chrome para traduzir páginas ou optar por um tradutor de sua escolha.
  
  
• É muito importante entender que os agentes de suporte da Shopify não podem oferecer suporte em codificação, pois isso vai além do nosso escopo de trabalho. Por isso, antes de fazer qualquer mudança no código da loja, duplique seu tema para ter uma cópia de segurança caso precise voltar atrás.

Aproveito para deixar aqui um documento que explica como o carregamento de imagens funciona na Shopify. O doc tem várias dicas de como otimizar suas fotos e as melhores práticas para um site com imagens de qualidade. Vale a leitura!

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