Como inserir CSS num e-mail?

Débora Ferreira

Débora Ferreira

Última atualização

A seguinte regra vale para qualquer tipo de e-mail, seja e-mail marketing, template do Message Center ou Master Data: use sempre CSS inline.

Isto porque diversos servidores de e-mail ignoram código CSS no head, assim como arquivos de estilo externos ao HTML. Portanto, para que seu código seja lido e renderizado, é preciso inserir o CSS no body do HTML.

Dica! Sempre que quiser esconder alguma característica de um elemento que o controle da VTEX traz automaticamente, altere a cor desse elemento para a cor de fundo de seu e-mail. Ex.: No carrinho abandonado, a prateleira de itens é montada em uma estrutura ul > li. Essa estrutura exibe pontos (•) no HTML. Para esconder esses pontos, basta alterar essa propriedade:

Antes de chamar a prateleira, torne tudo branco (ou a cor de fundo de seu e-mail). No template de prateleira, volte a aplicar a cor (preto ou qualquer outra cor de seu texto) no conteúdo. Dessa forma, a ul e as li serão brancas (invisíveis), mas dentro delas, os textos serão aplicados com cor (visíveis).