Criando template de e-mails

Personalizar ou criar um template de e-mail


  • No painel administrativo, acesse o menu Aparência > Templates do sistema


  • Clique em Adicionar novo Template caso queira criar um novo template. Caso contrário, selecione um dos templates para edição.


  • Preencha os campos na área Template do Sistema conforme abaixo: 
NomeNome do e-mail, utilizado na listagem
Status:Status do e-mail
Assunto:Assunto do e-mail, utilizado no assunto do e-mail enviado para o cliente, aceita variáveis de contexto
Modelo:Emails/email.default.template
Contexto:Definir em qual tipo de contexto o email será enviado



















  • O campo Conteúdo é o campo que de fato vai representar o corpo do email.





























Conteúdo do email:

O conteúdo do email aceita as linguagens Liquid e HTML, podendo adicionar tags para personalizar e as variáveis em Liquid vindo do Contexto selecionado anteriormente.




  • Para ter uma pré-visualização do e-mail, clique em Preview.

Template de Email no Gerenciador de Arquivos

  • No painel administrativo, acesse o menu Aparência > Gerenciador de Arquivos
  • No Tema de uso, abra a pasta de email
  • No caso o template utilizado é o email.default.template, isso é configurado em Templates de Email


Exemplo:

Exemplo de template:

Código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Detalhes do Pedido</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; color: #333; background:#fff; }
    .container { max-width: 900px; margin: auto; border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
    h1, h2 { color: #0056b3; }
    .header { border-bottom: 2px solid #0056b3; padding-bottom: 10px; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
    .header .brand { display:flex; align-items:center; gap:12px; }
    .header img.logo { max-height: 48px; }
    .header .code { margin-left:auto; }
    .order-info, .client-info { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; }
    .order-info p, .client-info p { margin: 0; flex: 1 1 45%; }
    .status { font-weight: bold; color: red; }
    .page-break { page-break-after: always; }

    table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: middle; }
    th { background-color: #f2f2f2; color: #0056b3; }
    tr:nth-child(even) { background-color: #f9f9f9; }

    img.payment-method { max-height: 28px; vertical-align: middle; margin-right: 10px; }
  </style>
</head>
<body>

<div class="container">

  <div class="header">
    <div class="brand">
      <img class="logo" src="https://d11eda5q0aef1m.cloudfront.net/custom/content/themes/Base/Imagens/logo1.png?nocache" alt="Linx Commerce" />
      <h1>Resumo do Pedido</h1>
    </div>
    <div class="code">
      <p><strong>Código do pedido:</strong> {{Order.OrderNumber}}</p>
    </div>
  </div>

  <div class="order-info">
    <p><strong>Data do pedido:</strong> {{Order.CreatedDate}}</p>
    <p><strong>Situação do pedido:</strong> <span class="status">{{Order.Status}}</span></p>
    <p><strong>Canal:</strong> {{Order.WebSiteName}}</p>
    <p><strong>Valor Total:</strong> R$ {{Order.Total}}</p>
  </div>

  <hr />

  <h2>Cliente</h2>
  <div class="client-info">
    <p><strong>Nome:</strong> {{Customer.Name}}</p>
    <p><strong>E-mail:</strong> {{Customer.Email}}</p>
    <p><strong>Telefone:</strong> {{Customer.Contact.Phone}}</p>
    <p><strong>Celular:</strong> {{Customer.Contact.CellPhone}}</p>
    <p><strong>CPF:</strong> {{Customer.Cpf}}</p>
  </div>

  <hr />

  <h2>Produtos</h2>
  {%- include Emails/inc/order -%}

  {%- include Emails/inc/total -%}

  <hr />

  <h2>Resumo do Pagamento</h2>
  <table>
    <tbody>
      {{#if Order.PaymentMethods.[0]}}
      <tr>
        <th>Meio de pagamento</th>
        <td>
          {{#if Order.PaymentMethods.[0].ImagePath}}
            <img src="{{Order.PaymentMethods.[0].ImagePath}}" alt="" class="payment-method" />
          {{/if}}
          {{Order.PaymentMethods.[0].Description}} ({{Order.PaymentMethods.[0].Alias}})
        </td>
      </tr>
      {{/if}}
    </tbody>
  </table>

  <hr />

  {%- include Emails/inc/delivery -%}

</div>

<div class="page-break"></div>
</body>
</html>

Esboço:

Atenção!

Pontos de atenção caso queira replicar o template de exemplo:

1. Logo da marca

2. Imagens dos produtos

  • O JSON pode trazer ImagePath (ex.: /Custom/Content/Products/...) ou ImageUrl.

  • Se for ImagePath, prefixe com o domínio da loja:

  • Evita imagens quebradas em ambientes diferentes.

3. Dados opcionais do cliente

  • Campos como Telefone, Celular, CPF podem vir nulos ou vazios.

  • Usar condicional para exibir apenas se existir:
    • {{#if Customer.Contact.Phone}}<p><strong>Telefone:</strong> {{Customer.Contact.Phone}}</p>{{/if}}

4. Datas

  • CreatedDate pode vir com hora (2025-09-30T14:23:11).
  • Para mostrar apenas a data:
    • {{Order.CreatedDate.substring 0 10}}
  • Avaliar se o fuso horário precisa ser ajustado.

5. Resumo do pagamento

  • O template só exibe se houver PaymentMethods.[0].

  • Em alguns cenários pode haver múltiplos meios de pagamento → usar each se necessário.

  • O campo ImagePath pode ser relativo → aplicar mesmo tratamento das imagens de produto.


  • Sem rótulos