⏱️ Tempo estimado: 5 minutos
Nível: ⭐⭐☆☆☆ (Básico)
Antes de começar, você precisa:
Ter uma loja ativa com o Novo tema padrão da Loja Integrada instalado
Ter as imagens dos banners prontas para upload
Os banners são um dos principais canais de comunicação visual entre a sua loja e o cliente. É por meio deles que você anuncia promoções, destaca lançamentos, comunica prazos de frete grátis, reforça datas comemorativas ou simplesmente reforça a identidade da marca logo no primeiro contato do visitante com a loja. Como ocupam posições de alto destaque — muitas vezes a primeira coisa que o cliente vê ao entrar na página —, eles têm impacto direto na forma como a loja é percebida e na taxa de conversão: uma arte bem dimensionada passa profissionalismo, enquanto uma imagem cortada, esticada ou borrada pode transmitir o contrário, mesmo com um bom produto por trás.
O tema padrão não impõe uma restrição rígida de tamanho: você pode subir imagens em diferentes proporções para qualquer um dos banners disponíveis. Ainda assim, existem proporções recomendadas para cada tipo, pensadas para que a imagem apareça completa e bem enquadrada em qualquer dispositivo, sem cortes ou distorções.
O tema padrão conta com quatro tipos de banner: Full Banner, Tarja, Vitrine e Mini. Cada um tem uma função, um comportamento e um local de exibição diferentes na loja — vale conhecer as particularidades de cada um antes de montar suas artes.
Full Banner
❗ Importante: o Full Banner é o elemento de maior destaque da página inicial — geralmente a primeira coisa que o cliente vê ao entrar na loja. Por isso, ele merece atenção redobrada na hora de montar a arte: título, chamada e call-to-action precisam estar bem legíveis mesmo em telas pequenas.
Proporção recomendada:
Desktop: 1270 x 444 px
Mobile: 361 x 444 px
💡 Dica: para o banner mobile, o ideal é exportar a imagem em uma proporção maior (2x, ou seja, 722 x 888 px). Isso garante que o banner mantenha uma boa qualidade em telas retina, que são cada vez mais comuns nos celulares.
🔑 Se você cadastrar mais de um Full Banner, eles não ficam empilhados: viram um carrossel, alternando automaticamente entre as imagens.
Tarja
Proporção recomendada: 1270 x 70 px — a mesma largura do Full Banner Desktop, só que bem mais baixa.
💡 Dica: a Tarja sempre se ajusta para ocupar 100% da largura do container, então o que mais importa aqui é a altura. Por ser um banner naturalmente fino, ela é indicada para avisos curtos (frete grátis, cupom, aviso de horário de atendimento), não para textos longos ou muitos elementos.
🔑 Se quiser apresentar uma Tarja diferente no mobile (em vez de usar a mesma imagem do desktop redimensionada), suba uma imagem separada na mesma largura do Full Banner Mobile: 361 x 70 px — mantendo a altura baixa para a Tarja continuar fina no mobile também.
Vitrine
Proporção recomendada: 850 x 200 px
⚠️ Atenção: diferente do Full Banner e da Tarja, a Vitrine não estica para preencher o espaço disponível — ela é exibida no tamanho em que foi enviada:
Se você enviar uma imagem menor que a área reservada, ela aparece centralizada, com espaço sobrando nas laterais.
Se quiser que a Vitrine ocupe toda a largura disponível, envie a imagem na mesma largura do Full Banner Desktop (1270 px).
🔑 Se você cadastrar mais de uma Vitrine, elas não aparecem juntas: cada uma é posicionada entre os outros blocos de produtos da página. A primeira Vitrine aparece depois dos "Destaques" e antes dos banners Mini; as seguintes aparecem após cada novo bloco de produtos (como "Lançamentos"), intercalando o conteúdo.
Mini
Proporção recomendada: 720 x 400 px
💡 Dica: os banners Mini são exibidos lado a lado — 3 por vez no desktop e 2 por vez no mobile. Se você cadastrar mais banners do que cabem na tela, os demais ficam disponíveis por um carrossel com swipe (arrastar para o lado), tanto no desktop quanto no mobile.
Tabela resumo — dimensões recomendadas
Banner | Desktop | Mobile | Comportamento |
Full Banner | 1270 x 444 px | 361 x 444 px (2x: 722 x 888 px) | Preenche o container. Mais de 1 vira carrossel. |
Tarja | 1270 x 70 px | 361 x 70 px (opcional — só se quiser uma imagem diferente do desktop) | Sempre estica para 100% da largura. |
Vitrine | 850 x 200 px (ou 1270 x 200 px para ocupar a largura toda) | mesma imagem do desktop | Não estica: aparece centralizada se menor que o container. Mais de 1 aparece intercalada entre blocos de produtos. |
Mini | 720 x 400 px | mesma imagem do desktop | 3 por vez no desktop, 2 por vez no mobile — excedentes ficam no carrossel (swipe). |
Como adicionar um banner na loja
01 - Acesse Personalize sua loja > Banners.
02 - Clique em Adicionar banner e escolha o tipo desejado (Full Banner, Tarja, Vitrine ou Mini).
03 - No campo Imagem do banner, faça upload da imagem para desktop já na proporção recomendada para o tipo escolhido.
04 - Se quiser uma imagem diferente para celular, faça upload no campo Imagem do banner para celular. Esse campo é opcional — se você não enviar nada aqui, a imagem do desktop é usada (redimensionada) também no mobile.
05 - Preencha os campos complementares, como link de destino e agendamento de publicação, se necessário.
06 - Clique em Salvar para publicar o banner na loja.
⚠️ Atenção: tanto a imagem de desktop quanto a de celular têm limite de 500KB por arquivo e aceitam apenas os formatos JPG ou PNG. Fique de olho no tamanho do arquivo ao exportar do Canva — se passar do limite, comprima a imagem antes do upload.
💡 Dica: para facilitar a criação das artes, preparamos modelos prontos no Canva já nas dimensões recomendadas de cada banner. Cada modelo já vem com um texto indicando a dimensão — é só apagar esse texto e usar a proporção da arte como guia:
Dúvidas Frequentes
Existe um tamanho obrigatório para os banners?
Não. Você pode subir imagens em qualquer proporção. As dimensões indicadas acima são recomendações para garantir que o banner apareça bem enquadrado, sem cortes, tanto no desktop quanto no celular.
O que acontece se eu subir uma imagem fora da proporção recomendada?
A imagem será exibida mesmo assim, mas pode aparecer cortada ou distorcida dependendo do quanto ela foge da proporção recomendada para aquele tipo de banner.
Por que o Full Banner mobile pede uma imagem em resolução maior (2x)?
Porque a maioria dos celulares hoje tem tela retina, com densidade de pixels maior que a de um desktop comum. Exportar a imagem em 2x evita que o banner apareça borrado ou com baixa qualidade nesses aparelhos.
Todos os temas suportam os quatro tipos de banner?
Isso pode variar conforme o layout ativo na loja. Verifique em Personalize sua loja > Banners quais tipos estão disponíveis para o tema instalado.
Por que minha Vitrine ficou com espaço sobrando nas laterais?
Porque a Vitrine não estica automaticamente para preencher a área — ela é exibida no tamanho enviado, centralizada. Para ocupar a largura toda, envie a imagem já na largura do Full Banner Desktop (1270 px).
O que acontece se eu cadastrar mais de um banner do mesmo tipo?
Depende do tipo: vários Full Banners viram um carrossel automático. Várias Vitrines aparecem intercaladas entre os blocos de produtos da página. Vários banners Mini além dos que cabem na tela (3 no desktop, 2 no mobile) ficam acessíveis por um carrossel com swipe.
Resumo dos passos principais
Escolha o tipo de banner (Full Banner, Tarja, Vitrine ou Mini)
Prepare a imagem na proporção recomendada
Acesse Personalize sua loja > Banners e faça o upload
Salve para publicar
Pronto! Seu banner já está configurado e visível na loja.
#banners #tema-padrao #personalizacao #layout #full-banner