Logo, banners e thumbnail da loja
cada loja tem 5 imagens importantes — logo, banner principal, banner mobile, thumbnail social e Open Graph — saber a especificação de cada uma evita layout quebrado e perda de impacto visual.
# Logo, banners e thumbnail da loja
⏱️ 6 min de leitura · 🏷️ Lojas · 👤 Admin de Plataforma · Admin de Loja · 🆓 Todos os planos
Em 1 frase: cada loja tem 5 imagens importantes — logo, banner principal, banner mobile, thumbnail social e Open Graph — saber a especificação de cada uma evita layout quebrado e perda de impacto visual.
As 5 imagens da loja
| Imagem | Onde aparece | Tamanho | Formato | |---|---|---|---| | Logo da loja | Header do AVA, emails | 4:1 (ex: 512×128) | PNG transparente | | Banner principal (vitrine) | Topo da vitrine pública | 1920×600 | JPG ou PNG | | Banner mobile | Vitrine no celular | 1080×800 | JPG ou PNG | | Thumbnail social | Compartilhamento WhatsApp/Slack | 1200×630 | PNG ou JPG | | Open Graph (OG) | Preview Facebook/LinkedIn | 1200×630 | PNG ou JPG |
💡 Dica de cima: a evob aceita usar a mesma imagem para Thumbnail social e OG (são tamanhos compatíveis). Você só precisa fazer 4 imagens distintas no fim.
1. Logo da loja
Igual ao logo da plataforma, mas pode ser diferente se a loja tem identidade própria.
Onde aparece:- Header do AVA da loja (área do aluno)
- Header do checkout
- Topo dos emails transacionais (se a loja tem email próprio)
- PNG transparente (preferível) ou SVG
- Proporção 4:1 horizontal (ex: 512×128px)
- Tamanho: até 1 MB
- Funciona em fundo branco
💡 Se sua loja é uma marca completamente independente da plataforma, configure logo próprio. Se é só "uma área da plataforma principal", reuse o logo da plataforma.
📖 Saiba mais: Configurar logos
2. Banner principal da vitrine
A primeira coisa que o aluno vê ao acessar a vitrine pública da loja.
Onde aparece:- Topo da vitrine (`cursos.suamarca.com.br`)
- Páginas de categoria
- JPG (banner com foto) ou PNG (banner com logo + texto)
- Tamanho: 1920×600 pixels
- Peso: até 500 KB (otimize com TinyPNG ou similar)
- Texto legível mesmo em telas grandes (≥ 24px de fonte)
- ✅ Headline curta (até 8 palavras)
- ✅ CTA visível ("Ver cursos", "Começar agora")
- ✅ Foto autêntica > foto stock genérica
- ❌ Texto pequeno demais (não lê em mobile)
- ❌ Imagem busy demais (cansa visualmente)
Exemplo de banner que funciona
``` ┌────────────────────────────────────────────────┐ │ │ │ APRENDA DESIGN COM QUEM JÁ FEZ │ │ Mais de 12.000 alunos formados │ │ │ │ [ Ver cursos ] │ │ │ └────────────────────────────────────────────────┘ ```
- Headline + subheadline + CTA
- Foto autêntica de aluno/sala como background (escurecida 40%)
- Texto branco, alinhado à esquerda, padding de 80px
3. Banner mobile
Mesma função do banner principal, mas otimizado para celular.
Por que separar:- Banner 1920×600 fica achatado e ilegível no celular (proporção errada)
- Texto que cabe no desktop fica grande demais no mobile
- CTA pode "sair" da viewport
- JPG ou PNG
- Tamanho: 1080×800 (proporção 4:3, mais alta)
- Peso: até 300 KB
- Texto reduzido (3-5 palavras na headline)
💡 Não tem banner mobile? A evob recorta automaticamente o desktop, mas fica feio. Sempre suba a versão mobile separada.
4. Thumbnail social (WhatsApp/Slack/Telegram)
Quando alguém compartilha o link da loja, o app de mensagem mostra preview com:
- Título (vem do `og:title`)
- Descrição (vem do `og:description`)
- Imagem (vem do `og:image` ou thumbnail social)
- PNG ou JPG
- Tamanho: 1200×630 pixels
- Peso: até 200 KB
- Mostre a essência da loja em uma imagem só
- ✅ Logo da marca + 1 elemento visual
- ✅ Texto curto e legível mesmo em preview pequeno
- ✅ Cor de fundo da marca (não branco genérico)
- ❌ Foto stock muito complexa
- ❌ Texto < 30px (ilegível em preview)
5. Open Graph (OG)
Tecnicamente, é a mesma imagem do thumbnail social — mas usada pelo Facebook e LinkedIn.
Você pode subir a mesma imagem em ambos os campos.
Especificação:- PNG ou JPG
- Tamanho: 1200×630 pixels (mesmo do thumbnail)
💡 Quer testar? Após subir, use o Facebook Debugger com a URL da loja. Ele mostra como o preview vai aparecer.
Como subir cada imagem
- Loja > Configurações > Identidade Visual
- Para cada slot, clique em Subir imagem
- Selecione o arquivo
- Pré-visualize
- Salve
⚠️ Cache pode atrapalhar. Se trocou imagem e o WhatsApp ainda mostra a antiga, use o Facebook Debugger ou peça para o WhatsApp "limpar cache" (forçar reescaneo do link).
Onde encontrar imagens
Bancos gratuitos (recomendados)
- Unsplash — fotos profissionais sem royalty
- Pexels — fotos e vídeos gratuitos
- Pixabay — imagens, ilustrações, vídeos
- Freepik — vetores e imagens (atribuição às vezes obrigatória)
Geração com IA (alternativa moderna)
- DALL-E 3 (ChatGPT Plus)
- Midjourney
- Adobe Firefly (vem grátis com Photoshop)
- Stable Diffusion (gratuito self-hosted)
💡 Atenção a direitos: mesmo imagens "gratuitas" às vezes pedem atribuição. Leia a licença antes de usar comercialmente.
Pago (se quer profissional)
- Shutterstock — assinatura mensal
- Adobe Stock — integrado com Photoshop
- Fotógrafo próprio (melhor opção a longo prazo)
Boas práticas
✅ Faça
- Otimize antes de subir (TinyPNG reduz 60-80% sem perda visível)
- Mantenha estilo consistente entre as 5 imagens (mesma paleta, mesmo tom de filtro)
- Atualize sazonalmente (banner Black Friday, banner verão, banner padrão)
- Teste em mobile real depois de subir (Chrome DevTools nem sempre mostra fielmente)
❌ Não faça
- ❌ Usar JPG comprimido demais (artefatos visíveis)
- ❌ Texto < 24px no banner (ilegível)
- ❌ Imagem stock genérica óbvia (perde credibilidade)
- ❌ Mesma imagem para todas as lojas (perde identidade)
- ❌ Esquecer banner mobile (60% dos acessos são celular)
Erros comuns
"Banner aparece esticado"
Você subiu fora da proporção. Banner desktop é 1920×600 (proporção 16:5).
"Logo aparece com fundo branco"
Você subiu JPG em vez de PNG. Substitua por PNG transparente.
"Imagem demora para carregar"
Tamanho do arquivo grande demais. Comprima com TinyPNG ou Squoosh para até 200-500 KB.
"Preview no WhatsApp continua o antigo"
Cache. Use Facebook Debugger e clique em "Scrape Again". O WhatsApp respeita esse cache.
"Imagem aparece distorcida no celular"
Você não subiu o banner mobile separado. Faça uma versão 1080×800 (mais alta, menos larga).
"Thumbnail social não aparece preview no Telegram"
Telegram bloqueia preview de alguns domínios novos. Aguarde 24-48h ou compartilhe a partir de outra conta.
Próximos passos
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-01