O ShopIA usa estrutura HTML padronizada para todos os emails enviados, garantindo consistência visual e compatibilidade com clientes de email. Esta página explica o que pode ser personalizado e o que é fixo por design.
Filosofia de templates email
Os templates são gerados pelo renderStoreEmail() interno, que combina:
- Estrutura HTML fixa (botões, layout, footer)
- Tokens de marca customizáveis (cor primária, logo, fonte)
- Texto livre que você ou a IA escreve
A IA nunca gera HTML. Apenas gera texto que entra na estrutura padrão. Esse princípio garante que o resultado renderiza bem em qualquer cliente de email (Gmail, Outlook, Apple Mail, Yahoo).
O que pode ser personalizado
Identidade visual
Em Configurar > Marca > Visual:
- Cor primária — usada em botões, títulos, links
- Cor secundária — usada em destaques discretos
- Logo — exibido no header (PNG ou SVG, idealmente quadrado)
- Fonte — Inter (default), Poppins, Roboto, Lato (sem fontes custom no MVP)
Texto
- Linha de assunto
- Pré-header (texto que aparece após o assunto na inbox)
- Conteúdo do corpo (livremente)
- Texto do CTA (botão de ação)
Estrutura macro
Você pode incluir ou excluir seções:
- Header com logo (sempre presente)
- Bloco hero (imagem + título + sub-título)
- Texto livre
- Grid de produtos (com até 6 produtos)
- CTA principal (sempre presente)
- Bloco de redes sociais (configurável em Marca)
- Footer LGPD com link de descadastro (sempre presente)
O que NÃO pode ser personalizado
Por requerimento legal ou técnico:
- HTML cru (não há editor de código)
- Footer LGPD (presente sempre, com link de descadastro funcional)
- Endereço físico no rodapé (exigência LGPD/CAN-SPAM)
- Identificação do remetente
- Largura máxima do email (600px, padrão de inbox)
- Reply-to (configurável globalmente, não por email individual)
Editor de newsletter
Para newsletter, o editor é bloco-a-bloco:
- Adicione seção (texto, imagem, botão, grid de produtos)
- Configure cada seção (texto, link, imagem)
- Reordene arrastando
- Pré-visualize em desktop e mobile
- Envie teste para você antes de mandar pra base
Seções disponíveis:
- Texto — parágrafos com formatação básica (bold, itálico, links)
- Imagem — imagem única com alt text e link
- Botão CTA — botão grande chamado para ação
- Grid de produtos — 1, 2, 3 ou 4 colunas; produtos selecionáveis
- Divisor — linha separadora visual
- Espaçamento — espaço vazio para respiração
Editor de automações
Para automações (recuperação, pós-venda, etc.), o editor é mais simples:
- Edição de texto livre (suporta variáveis
{{...}}) - Edição de assunto
- Edição de CTA principal
- Imagem opcional do produto
Não há manipulação de blocos como na newsletter — a estrutura é fixa.
Pré-visualização
Antes de salvar:
- Desktop — visualização padrão monitor 1024px+
- Mobile — visualização Android/iPhone 375-414px
- Dark mode — alguns clientes (Outlook, Apple Mail) exibem em dark; previsualize para garantir legibilidade
Use ambas as previsualizações antes de publicar.
Tokens de marca
Em Configurar > Marca > Tokens, você define:
| Token | Padrão | Onde aparece |
|---|---|---|
--brand-primary | #6E40C9 (roxo padrão) | Botões, títulos, links |
--brand-on-primary | #FFFFFF | Texto sobre cor primária |
--text-default | #1A1A1A | Texto corrido |
--text-muted | #6B6B6B | Texto secundário |
--bg-default | #FFFFFF | Fundo principal |
--bg-surface | #F7F7F8 | Cards e blocos |
Mudanças refletem em todos os emails futuros automaticamente.
Imagens: tamanho e formato
- Logo header: 240x80px ideal, PNG transparente
- Hero: 1200x600px ideal, JPG ou PNG
- Produto no grid: 600x600px (quadrado), JPG
- Imagens em texto livre: máximo 1200px de largura
Imagens são automaticamente otimizadas pelo sistema. Originais maiores são redimensionadas.
Escrevendo bom HTML mesmo sem editor
Algumas práticas para que seus emails fiquem bem:
- Frases curtas — fáceis de ler em mobile
- Parágrafos curtos — máximo 3 linhas em mobile
- Hierarquia visual — um título principal, subtítulos quando necessário
- Um CTA principal por bloco — múltiplos CTAs disputam atenção
- Cores em moderação — texto preto sobre fundo branco é o padrão por motivo
Salvando como template reutilizável
Após editar uma newsletter, você pode salvar a estrutura como template:
- Em Newsletter > [campanha] > Salvar como template.
- Dê um nome (ex.: "Newsletter mensal padrão").
- Salve.
A próxima vez que criar newsletter, escolha o template como ponto de partida em vez de começar do zero.