DocumentaçãoCommerceGuia de sistemas do administrador

Personalizar modelos de email

Last update: Wed Nov 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Iniciante
  • Intermediário
  • Administrador
  • Líder

O Commerce inclui um template de email padrão para a seção do corpo de cada mensagem enviada pelo sistema. O modelo para o conteúdo do corpo é combinado com os modelos de cabeçalho e rodapé para criar a mensagem completa. O conteúdo é formatado com HTML e CSS, e pode ser facilmente editado e personalizado adicionando variáveis. Os modelos de email podem ser personalizados para cada visualização de site, loja ou loja. Se estiver usando modelos personalizados, atualize a configuração do sistema para garantir que o modelo correto seja usado. Para saber como você pode usar declarações condicionais ao personalizar o modelo de email, consulte a documentação do desenvolvedor.

Exemplo - visualização do email de boas-vindas {width="500" modal="regular"}

Os templates padrão incluem o logotipo e informações da loja e podem ser usados sem mais personalizações. No entanto, como prática recomendada, você deve visualizar cada modelo e fazer as alterações necessárias antes de enviá-los aos clientes.

Modelos de email {width="700" modal="regular"}

Informações do modelo

Campo
Descrição
Template Name
O nome do seu modelo personalizado.
Insert Variable
Insere uma variável no modelo na posição do cursor.
Template Subject
O Assunto do modelo aparece na coluna Assunto e pode ser usado para classificar e filtrar os modelos na lista.
Template Content
O conteúdo do template no HTML.
Template Styles
Qualquer declaração de estilo CSS necessária para formatar o modelo pode ser inserida na caixa Template Styles.

Modelo do cabeçalho

Após concluir a configuração, o modelo de cabeçalho de email inclui seu logotipo vinculado à sua loja. Se você tem um conhecimento básico de HTML, pode facilmente usar variáveis predefinidas para adicionar informações de contato de armazenamento ao cabeçalho.

Etapa 1. Carregar o modelo padrão

  1. Na barra lateral Admin, vá para Marketing > Communications>Email Templates.

  2. Clique em Add New Template.

  3. Na seção Load default template, clique no seletor Template e escolha Magento_Email > Header.

    Cabeçalho do modelo de email - carregar modelo padrão {width="600" modal="regular"}

  4. Clique em Load Template.

    O código HTML e as variáveis do modelo aparecem no formulário.

Etapa 2. Personalizar o modelo

  1. Insira o Template Name para seu cabeçalho personalizado.

  2. Insira um Template Subject para ajudar a organizar os modelos.

    Na grade, a lista de modelos pode ser classificada e filtrada pela coluna Subject.

    Informações de cabeçalho do modelo de email {width="600" modal="regular"}

  3. Na caixa Template Content, modifique o HTML conforme necessário.

    note note
    NOTE
    Ao trabalhar no código do modelo, tenha cuidado para não substituir nada que esteja entre chaves duplas.

  4. Para inserir uma variável, posicione o cursor no código em que deseja colocar a variável e clique em Insert Variable.

  5. Escolha a variável que deseja inserir.

    Modelo de cabeçalho - Inserir variável {width="600" modal="regular"}

    Quando uma variável é selecionada, uma marca de marcação para a variável é inserida no código.

    Embora as variáveis da Loja de Endereço de Email sejam as mais frequentemente incluídas no cabeçalho, você pode inserir o código para qualquer sistema ou variável personalizada diretamente no modelo.

  6. Se precisar fazer qualquer declaração CSS, insira os estilos na caixa Template Styles.

  7. Quando estiver pronto para revisar seu trabalho, clique em Preview Template.

    Faça as alterações necessárias no modelo.

  8. Quando terminar, clique em Save Template.

    O cabeçalho personalizado agora aparece na lista de modelos de email disponíveis.

Etapa 3. Atualizar a configuração

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Role para baixo e expanda Seletor de expansão na seção Transactional Emails.

  4. Escolha o Header Template que é usado como padrão para notificações por email.

  5. Quando terminar, clique em Save Config.

Configuração de design de email transacional - modelo de cabeçalho {width="600" modal="regular"}

Modelo de rodapé

O rodapé do modelo de email contém a linha de fechamento e assinatura da mensagem de email. Você pode alterar o fechamento para ajustá-lo ao seu estilo e adicionar outras informações, como o nome da empresa e o endereço abaixo do seu nome.

Etapa 1. Carregar o modelo padrão

  1. Na barra lateral Admin, vá para Marketing > Communications>Email Templates.

  2. Clique em Add New Template.

  3. Na seção Load default template, clique no seletor Template e escolha Magento_Email > Footer.

  4. Clique em Load Template.

    O código HTML e as variáveis do modelo aparecem no formulário.

Etapa 2. Personalizar e visualizar o modelo

  1. Digite o Template Name para seu rodapé personalizado.

  2. Insira um Template Subject para ajudar a organizar os modelos.

    Na grade, os modelos podem ser classificados e filtrados pela coluna Subject.

    Rodapé do modelo de email - informações {width="600" modal="regular"}

  3. Na caixa Template Content, modifique o HTML conforme necessário.

    note note
    NOTE
    Ao trabalhar no código do modelo, tenha cuidado para não substituir nada que esteja entre chaves duplas.

  4. Para inserir uma variável, posicione o cursor no código em que deseja colocar a variável e clique em Insert Variable.

  5. Escolha a variável que deseja inserir.

    Quando uma variável é selecionada, uma marca de marcação para a variável é inserida no código.

    Embora as variáveis de Contato da Loja sejam as mais frequentemente incluídas no rodapé, você pode inserir o código para qualquer sistema ou variável personalizada diretamente no modelo.

  6. Se precisar fazer qualquer declaração CSS, insira os estilos na caixa Template Styles.

Etapa 3. Atualizar a configuração

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Role para baixo e expanda Seletor de expansão na seção Transactional Emails.

  4. Escolha o Footer Template que é usado como rodapé padrão nas notificações por email.

  5. Quando terminar, clique em Save Config.

Configuração de design de email transacional - modelo de rodapé {width="600" modal="regular"}

Modelos de mensagem

O processo de personalização do corpo de cada mensagem é o mesmo que personalizar o cabeçalho ou rodapé. A única diferença é o modelo de mensagem para cada atividade ou evento que aciona uma notificação. Você pode usar os modelos como estão ou personalizá-los para corresponder à sua voz e marca. Além do texto do modelo, há uma grande variedade de variáveis predefinidas e personalizadas permitidas que você pode criar e incorporar no modelo.

Etapa 1. Carregar o modelo padrão

  1. Na barra lateral Admin, vá para Marketing > Communications>Email Templates.

  2. Clique em Add New Template.

    Modelos de email - carregar modelo padrão {width="600" modal="regular"}

  3. Faça o seguinte:

    • Em Load default template, escolha a Template que deseja personalizar.

    • Clique em Load Template.

Etapa 2. Personalizar o modelo

  1. Para Template Name, digite um nome para o modelo personalizado.

  2. Se necessário, altere o Template Subject.

    Esta é a primeira linha da mensagem, que é a saudação por padrão. Você pode deixá-la como está ou pode inserir algo mais descritivo.

  3. Anote o caminho Currently Used For para o modelo, que é o caminho usado para atualizar a configuração.

    Modelos de email - informações do modelo {width="600" modal="regular"}

  4. Na caixa Template Content, modifique o HTML conforme necessário.

    O conteúdo consiste em uma combinação de tags HTML, diretivas CSS, variáveis e texto.

    note note
    NOTE
    Ao trabalhar no código do modelo, tenha cuidado para não digitar acidentalmente sobre o código delimitado por chaves duplas.

  5. Para inserir uma variável, posicione o cursor no código onde deseja que a variável apareça.

    A seleção de variáveis varia de acordo com o modelo e inclui as variáveis predefinidas e personalizadas permitidas, se disponíveis.

  6. Clique em Insert Variable e escolha a variável que deseja inserir.

    Um comando para inserir a variável é delimitado por chaves e adicionado ao código no local do cursor. Por exemplo:

    customVar code=my_custom_variable

  7. Para fazer declarações CSS, insira os estilos em Template Styles.

    Modelos de email - adicionar estilos personalizados {width="600" modal="regular"}

    note note
    NOTE
    Estilos personalizados são aplicados ao email somente se {{template config_path="design/email/header_template"}} estiver presente no Template Styles. Para usar CSS personalizado sem um modelo de cabeçalho padrão, você deve fornecê-los aqui dentro da tag HTML <style>.

Etapa 3. Atualizar a configuração

A trilha de navegação estrutural Currently Used For ​mostra onde o modelo é usado. Neste exemplo, a configuração do modelo está na página​ Customer Configuration, na seção Create New Account Options ​e no campo​ Default Welcome Email.

  • Página - Customer Configuration
  • Seção - Create New Account Options
  • Campo - Default Welcome Email

  1. Na trilha de navegação estrutural Currently Used For, clique no link para abrir a página de configuração do modelo.

    Modelo de email atual {width="600" modal="regular"}

  2. Expanda a seção Seletor de expansão e localize o campo do modelo de email que você personalizou.

  3. Desmarque a caixa de seleção Use system value e clique no nome do seu modelo personalizado.

    Configuração dos clientes - modelo padrão de email de boas-vindas {width="600" modal="regular"}

  4. Quando terminar, clique em Save Config.

  5. Na mensagem na parte superior do espaço de trabalho, clique em Cache Management e limpe qualquer cache inválido.

Etapa 4. Pré-visualizar e salvar o modelo

  1. Quando estiver pronto para revisar seu trabalho, clique em Preview Template.

  2. Atualize o modelo conforme necessário.

  3. Quando terminar, clique em Save Template.

    Seu modelo personalizado agora está disponível na lista de modelos de email.

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1