Tamanho de banner para loja virtual: os formatos da iSET

Na iSET, o banner do carrossel tem cinco formatos com tamanho definido: Billboard largo, Billboard alto, Faixa fina, Quadrado e Retrato. Cada um tem uma medida para o computador e outra para o celular. Escolher o formato antes de abrir o editor de imagem evita a arte cortada, o texto ilegível no celular e o banner que empurra a vitrine para fora da tela.

Este tutorial mostra onde fica a escolha no painel, a medida exata de cada formato e como ele aparece na loja. Os exemplos foram montados na loja de demonstração da iSET, a loja.iset.com.br, com a mesma regra de encaixe que a plataforma usa.

Onde escolher o tamanho do banner no painel

No painel da iSET, o caminho é Personalização > Banners > Novo banner. Na aba Carrossel, ao lado do botão Enviar imagem, fica o campo Tamanho / proporção no computador. É ali que você escolhe o formato.

À esquerda da área de envio ficam dois botões: Computador e Celular. Ao clicar em Celular, o campo muda para Tamanho / proporção no celular, com as medidas próprias da tela pequena, e a área de envio passa a receber a arte do celular.

Os cinco formatos e as medidas de cada um

Formato	Computador	Celular	Onde usar
Billboard largo	1920 × 400 px	800 × 400 px	Topo da página, sem empurrar a vitrine para baixo
Billboard alto	1920 × 600 px	800 × 600 px	Topo da página, com mais destaque para produto e oferta
Faixa fina	1920 × 200 px	800 × 200 px	Aviso entre seções: frete, cupom, prazo de campanha
Quadrado	1080 × 1080 px	800 × 800 px	Blocos lado a lado no meio da página
Retrato	500 × 840 px	500 × 840 px	Blocos verticais, coleções e lançamentos

Os três primeiros são horizontais e ocupam a largura do conteúdo da loja. O Quadrado e o Retrato são para espaços menores e, no computador, ficam bem lado a lado, dois por linha, como nos exemplos abaixo.

Como a loja encaixa a sua arte

A plataforma reserva a área do banner com a proporção do formato escolhido. Com Billboard alto, por exemplo, a área sempre terá a proporção de 1920 × 600, em qualquer largura de tela. A imagem enviada é então ampliada ou reduzida até cobrir essa área inteira.

Se a arte tiver exatamente a medida do formato, ela aparece inteira. Se tiver outra proporção, o que passar da área é cortado nas bordas. Uma arte quadrada enviada como Faixa fina, por exemplo, perde quase toda a parte de cima e a de baixo, e o texto que estava ali some.

A regra prática é simples: exporte a arte no tamanho exato do formato e mantenha texto, preço e produto longe das bordas. Uma margem de cerca de 10% de cada lado dá folga para as setas do carrossel, que ficam sobre a imagem.

Billboard largo: 1920 × 400 px

É o banner de topo mais discreto. Ocupa pouca altura no computador e deixa a primeira vitrine de produtos aparecer sem rolar a página. Funciona bem para uma mensagem curta com um produto ao lado.

No celular, a arte de 800 × 400 px fica com metade da altura da largura. Há espaço para um título e uma linha de apoio, não para um parágrafo.

Billboard alto: 1920 × 600 px

É o formato mais comum para o banner principal da página inicial. A altura extra dá espaço para foto de produto em tamanho bom, título, oferta e botão. É o formato que a loja de demonstração usa no topo.

No celular, os 800 × 600 px formam um retângulo quase quadrado, que ocupa boa parte da primeira tela. É o lugar da mensagem principal da campanha.

Faixa fina: 1920 × 200 px

A Faixa fina serve para recado, não para vitrine: frete grátis acima de um valor, cupom da semana, contagem para o fim de uma campanha. Ela cabe entre duas seções da página sem quebrar o ritmo da rolagem.

Na tela do celular, a faixa fica com menos de 100 px de altura. Use texto grande e curto, de três a cinco palavras, ou a mensagem não é lida.

Quadrado: 1080 × 1080 px

No computador, o Quadrado aparece em blocos lado a lado no meio da página inicial: duas categorias, dois lançamentos, duas campanhas. Usado sozinho no lugar do Billboard, ele ocuparia a tela inteira de altura. No celular, a medida é 800 × 800 px.

Quem já produz post para o feed do Instagram tem aqui um atalho: o quadrado de 1080 × 1080 px é a mesma medida, então a arte da campanha nas redes pode ser reaproveitada, desde que o texto continue legível no tamanho do bloco.

Retrato: 500 × 840 px

O Retrato é vertical e tem a mesma medida nas duas telas. No computador, aparece em blocos lado a lado, como o Quadrado. No celular, ocupa quase a primeira tela inteira, e por isso tem muita força para lançamento e coleção.

É o formato que mais se beneficia de foto de produto feita na vertical. Se as fotos da loja são horizontais, vale produzir algumas para esse uso, com as mesmas dicas de fotos de produto que convertem.

A opção Livre (sem proporção fixa)

Além dos cinco formatos, o seletor tem a opção Livre (sem proporção fixa), que vem marcada por padrão. Nela, a plataforma não impõe nenhuma das medidas da tabela e o banner segue a proporção da própria imagem enviada.

Ela serve para uma arte com medida fora do padrão, feita para um espaço específico do tema. Para o uso do dia a dia, prefira um dos cinco formatos: com eles a altura do banner fica previsível em todas as telas, e trocar a arte de uma campanha não muda o tamanho do espaço na página.

A arte do celular: por que fazer separada

Abaixo do botão Celular, o painel avisa: deixe vazio para usar as mesmas artes do computador também no celular. Funciona, mas tem um custo. Uma arte de 1920 × 400 px mostrada numa tela de celular com cerca de 360 px de largura encolhe o texto a ponto de não dar para ler.

A arte do celular entra para telas de até 1.000 px de largura, o que inclui a maioria dos tablets na vertical. Nas maiores, entra a arte do computador. É a arte do celular que vê quem compra pelo celular, e por isso ela merece o mesmo cuidado da versão de computador. O tema da importância do design responsivo para e-commerce explica por que a experiência no celular pesa tanto na conversão.

Três ajustes resolvem a maioria das artes de celular:

• Texto maior e mais curto. O título que tinha oito palavras no computador cai para três ou quatro.
• Produto centralizado. Na tela estreita não há espaço para produto de um lado e texto do outro. Empilhe: título em cima, produto embaixo.
• Botão desenhado só se couber. O banner inteiro já é clicável. Se o botão desenhado ficar pequeno demais, tire.

Onde o banner aparece e por quanto tempo

O tamanho é só uma parte do cadastro. Na mesma tela, a seção Onde o banner aparece define o modo de exibição, a posição na página (pela tag que o tema procura, como billboard, header ou footer) e em quais páginas ele entra, como a página principal ou categorias específicas.

Na seção Agendamento, o campo Programado para define o dia em que o banner começa a aparecer, e o campo Expira em, o último dia. Para campanha com data, como a Black Friday, preencha os dois: o banner entra e sai sozinho. Para montar as artes dessa época, veja também como criar banners para Black Friday.

Checklist antes de enviar o banner

1. Escolha o formato pelo lugar onde o banner vai ficar, não pela arte que você já tem.
2. Exporte a arte do computador e a do celular nas medidas exatas da tabela.
3. Deixe texto, preço e produto a pelo menos 10% das bordas.
4. Salve em JPG para foto e em PNG para arte com texto e cores chapadas.
5. Confira a arte do celular no próprio celular, com o brilho da tela baixo.
6. Preencha o agendamento se o banner for de campanha.

Se você ainda não tem quem faça as artes, dá para resolver com ferramentas gratuitas de criação de banners, que já trazem modelos nas medidas mais comuns. Basta ajustar o tamanho do documento para a medida do formato escolhido antes de começar.