Como funciona a marca do e-mail
O Alva renderiza o e-mail de entrega do lado do servidor a partir de um único template que lê o registro EmailSettings da sua loja. Cinco campos de marca — emailLogoUrl, emailLogoSize, emailAccentColor, emailButtonColor e emailBackgroundColor — são incorporados como CSS no momento do envio para que o estilo sobreviva no Gmail, Outlook e Apple Mail. O logotipo fica hospedado no Shopify Files e é referenciado por URL; as cores são strings hex puras.
Configure sua marca
1. Envie seu logotipo
No admin do Alva, vá em Configurações → E-mail e role até a seção Logotipo. Clique em Enviar e escolha um PNG quadrado com fundo transparente. O Shopify Files hospeda o arquivo; o Alva guarda a URL em emailLogoUrl e o tamanho de exibição em emailLogoSize (padrão 100 px).
Configurações de e-mail → card Logotipo. Mostre o botão Enviar, um logotipo quadrado de exemplo já enviado e o slider de tamanho. Destaque o botão Enviar. Sem dados reais de cliente visíveis.
2. Defina a cor de destaque
Na seção Estilo, clique no swatch Cor de destaque e escolha um valor hex. O destaque pinta a faixa do cabeçalho que fica atrás do logotipo e os divisores finos abaixo dos títulos de seção. Use a cor primária da sua loja aqui — esse é o sinal de marca mais forte do e-mail.
3. Defina as cores do botão e do título
Na seção Botão, escolha uma Cor do botão para o call-to-action de Download. Depois, em Estilo, defina a Cor do título — essa é a cor do texto que fica em cima da faixa de destaque, então tem que contrastar com o destaque. Branco sobre um destaque escuro ou quase-preto sobre um destaque claro são os padrões seguros.
Configurações de e-mail → seções Estilo e Botão lado a lado. Mostre três seletores de cor Polaris abertos (Destaque, Botão, Título) com inputs hex visíveis. Destaque o seletor de Destaque. Sem dados reais de cliente visíveis.
4. Confira a pré-visualização ao vivo
O painel de pré-visualização à direita rerrenderiza a cada mudança. Confirme se o logotipo está no tamanho certo, se o destaque aparece como uma faixa em vez de um filete e se o botão se destaca. A pré-visualização usa o mesmo template que o Alva entrega no momento do envio.
5. Salvar
Clique em Salvar. A marca passa a valer para todo e-mail de entrega enviado a partir daí. Para verificar contra uma caixa de entrada real, envie um e-mail de teste — veja o artigo relacionado abaixo.
O que os clientes veem
O e-mail abre com uma faixa colorida no cabeçalho (sua cor de destaque) contendo o logotipo e o título. O texto do corpo fica sobre o fundo da página. O botão de Download aparece no meio do e-mail na sua cor de botão com texto branco e o arredondamento que você escolheu. Os títulos de seção carregam um sublinhado fino na cor de destaque que amarra o e-mail à faixa do cabeçalho.
Um e-mail de entrega renderizado visto no Gmail desktop. Mostre a faixa de destaque do cabeçalho com logotipo e texto do título, o texto do corpo, o botão Download em uma cor contrastante e um título de seção com o sublinhado de destaque. Use uma marca fictícia. Sem dados reais de cliente visíveis.
Dicas
Mire em uma razão de contraste de pelo menos 4,5:1 entre a cor do título e o destaque (e entre o texto do botão e a cor do botão). Verificadores WCAG gratuitos sinalizam valores abaixo desse limite; o botão padrão #4a6cf7 com texto branco passa.
Use um PNG com fundo transparente — JPEGs renderizam um quadrado branco opaco que briga com toda cor de destaque. Mantenha a fonte em até 600 px na borda mais longa; o e-mail exibe ela em emailLogoSize pixels (padrão 100), então fontes maiores só inflam o payload.
Perguntas frequentes
Posso usar marcas diferentes para produtos diferentes?
Sim. Cada produto pode carregar seu próprio registro ProductEmailSettings que sobrescreve o logotipo e as cores globais. Defina-os na página de detalhes do produto em E-mail. Produtos sem sobrescrita voltam para o EmailSettings global.
O que acontece se a URL do meu logotipo parar de funcionar?
O Alva incorpora o logotipo como uma tag de imagem remota, então uma URL quebrada mostra um espaço em branco (a maioria dos clientes exibe o alt text). Reenvie o logotipo pela página de configurações de e-mail para atualizar a URL. O asset fica hospedado no Shopify Files; apagá-lo lá quebra o e-mail.
Por que a cor do meu botão fica estranha no Outlook?
O Outlook no Windows rerrenderiza CSS inline pelo Word, que limita alguns valores hex à sua paleta de 16 cores e remove o border-radius. O botão ainda funciona — só fica mais retangular. Envie uma pré-visualização para uma caixa Outlook antes do lançamento.
Veja também
Foi útil?
Última atualização 2026-05-06