Crie um layout de e-mail

Um layout de e-mail é o próprio e-mail: a linha de assunto, o design e quaisquer anexos. A ação Shopify Flow seleciona um layout e um remetente e, em seguida, envia o e-mail. Como o layout é independente do fluxo de trabalho, um único design pode ser utilizado para todos os clientes sem que o senhor precise mexer em HTML novamente.

A lista possui duas abas: “Transacional” e “Marketing”, cada uma mostrando quantos layouts contém. Ela é aberta na aba “Transacional”, e todos os layouts que o(a) senhor(a) criou antes da existência dos tipos de e-mail são transacionais. Suas configurações de pesquisa, ordenação e paginação são mantidas quando o senhor alterna entre as abas. Um layout de marketing exibe um ícone de “Marketing” ao lado do nome, e a opção “Criar layout de e-mail” na aba “Marketing” inicia o novo layout como um layout de marketing.

Criar um layout

Acesse “Layouts de e-mail” e clique em “Criar layout de e-mail”. Você deverá definir:

• Nome - como o senhor o identifica. Apenas o senhor vê isso.
• Assunto - suporte para {{ variables.xxx }} e {{ secrets.xxx }}.
• Texto de pré-visualização - opcional. A breve frase que a maioria das caixas de entrada exibe ao lado do assunto. Procure manter entre 40 e 100 caracteres; ela oferece o mesmo suporte às variáveis do assunto. Se você deixar em branco, o cliente de e-mail selecionará o primeiro trecho do seu e-mail.
• Descrição - opcional, para sua própria referência.
• Tipo de e-mail - Transacional, para e-mails que os clientes esperam receber, como atualizações sobre pedidos e remessas; eles são sempre enviados, mesmo aos clientes que cancelaram a assinatura das comunicações de marketing. Marketing para boletins informativos, promoções e e-mails de reconquista; cada destinatário recebe seu próprio e-mail com um link para cancelar a inscrição e os dados da sua empresa, conforme definido em Configurações, e os clientes que cancelaram a inscrição são ignorados. Ao contrário do editor, o tipo pode ser alterado posteriormente no editor de layout. Detalhes em E-mails de marketing e cancelamentos de inscrição.

Em seguida, escolha um editor:

Editor	Ideal para
Construtor visual	E-mails personalizados e com a identidade visual da empresa, criados a partir de blocos do tipo “arrastar e soltar”
Texto formatado / HTML	Notas transacionais simples ou um e-mail em HTML totalmente personalizado que o senhor cola no campo

O construtor visual

O construtor é uma tela dividida em dois painéis: as configurações à esquerda e uma pré-visualização da tela em tempo real à direita. Adicione blocos usando o botão “Adicionar seção” ou os marcadores “+” entre os blocos existentes.

O painel à esquerda possui quatro guias:

Guia	O que contém
Geral	Nome, Assunto, Texto de pré-visualização, Descrição
Identidade visual	Cores, tipografia e espaçamento do layout para todo o e-mail
Blocos	Configurações do bloco que o(a) senhor(a) selecionou na tela
Variáveis de teste	O trecho de código JSON do Shopify Flow, a referência às variáveis do sistema e valores de exemplo para visualização

Cada bloco na tela possui controles que permitem arrastá-lo, duplicá-lo, excluí-lo ou ocultá-lo sem excluí-lo.

Referência ao bloco

Elementos

Bloco	Configurações
Texto	Texto formatado, alinhamento, tamanho da fonte (12/14/16/18), cor
Título	Texto do título, tamanho (de H1 extragrande a H4 pequeno), alinhamento, cor
Imagem	Imagem (carregamento ou link), texto alternativo, largura 10-100%, alinhamento
Botão	Rótulo, URL, estilo (Primário / Secundário / Esboço), alinhamento, raio da borda 0-24 px
Separador	Cor, estilo (contínuo / tracejado / pontilhado), espessura 1-8
Espaçamento	Altura: 4-80px
Anexo	Seletor de arquivos, um link ou um metacampo referente ao pedido ou ao cliente da etapa, e um título. Consulte Anexos e imagens
Loop	Repete um bloco de Liquid + HTML sobre uma variável de matriz
HTML / Código	HTML bruto com Liquid, incluindo condições do tipo {% if %}
Código QR	Dados (URL ou texto, suporte para variáveis), tamanho de 80 a 300 px, alinhamento
Tabela de itens de linha	Os itens do pedido provenientes de uma variável de lista, com linhas de imagem, quantidade, preço e totais

Blocos de comércio e de conteúdo (novidade na versão 1.17; consulte Blocos de conteúdo: produto, desconto, contagem regressiva, rastreamento e muito mais para obter detalhes sobre cada um deles)

Bloco	O que ele faz
Produto	Uma ficha de produto: imagem, título, descrição, preço com preço de comparação e um botão. Cada campo recebe uma variável
Grelha de produtos	Duas ou três cartas por linha a partir de uma variável de lista, como a tabela de itens de linha
Código de desconto	Um campo de código com um botão que aplica o código na checkout. Pode ser um código digitado por você ou um código exclusivo de uso único criado em sua loja para cada e-mail
Contagem regressiva	Uma contagem regressiva em tempo real para uma data, exibida como uma imagem animada quando o e-mail é aberto. Caixas, cartões que se viram, estilo minimalista ou de texto
Acompanhamento de pedidos	Transportadora, número de rastreamento, um botão “Rastrear” e uma barra de progresso que acompanha o status da remessa
Classificação por estrelas	Estrelas a partir de um número, com um título e um link opcional para a sua página de avaliação
Depoimento	Uma citação com nome, cargo e foto, no formato de cartão, com uma barra de acento ou sem formatação
Links sociais	Uma fileira de ícones de rede
Vídeo	Uma miniatura com um botão de reprodução que leva ao vídeo
Assinatura	Nome, cargo, empresa, telefone, e-mail, site e uma foto
Tabela	Uma pequena tabela de dados, em que cada célula contém uma variável
Visualizar no navegador	A frase habitual “visualize este e-mail no seu navegador”
Preço	Uma linha de preço por si só: o preço, um preço de comparação opcional riscado, tamanho, cor e alinhamento

Layout

Bloco	Configurações
Imagem + Texto	Posição da imagem (esquerda/direita), largura da imagem de 20 a 70%, alinhamento vertical, espaçamento, cor de fundo, além de subcomponentes de imagem, texto e botão
Duas colunas	Divisão de colunas (50/50, 33/67, 67/33, 40/60, 60/40), espaço entre colunas de 0 a 40, alinhamento vertical, preenchimento e conteúdos separados nas colunas esquerda e direita
Colunas	Duas, três ou quatro colunas iguais, cada uma com seus próprios blocos
Mostrar se	Uma seção que só é enviada quando uma condição relacionada às variáveis é verdadeira; por exemplo, variables.total > 100 ou language == "de"

Identidade visual

A guia “Identidade visual” se aplica a todo o layout:

• Cores - primárias, secundárias, de texto, de fundo do corpo do texto, de fundo do conteúdo
• Tipografia - fonte dos títulos, fonte do corpo do texto, altura da linha
• Layout - os controles de espaçamento abaixo

Controle	O que isso muda	Faixa
Largura máxima	Qual o tamanho máximo que o conteúdo do e-mail pode atingir?	400-800 px
Acolchoamento de contêineres	Espaço ao redor de toda a área de conteúdo	0-40px
Estofamento do bloco (laterais)	Espaço entre o seu conteúdo e as bordas esquerda e direita	0-40px
Preenchimento de bloco (superior e inferior)	Espaço acima e abaixo do conteúdo de cada bloco	0-40px
Espaçamento entre blocos	Espaço vertical entre um bloco e o seguinte	0-40px

Mantenha o preenchimento dos blocos (superior e inferior) pequeno. O espaçamento entre blocos já separa os blocos; portanto, aumentar ambos resulta em grandes espaços vazios.

Se o(a) senhor(a) tiver definido as cores da marca em Configurações > Marca e fontes, todos os seletores de cor no construtor as exibirão como amostras abaixo do campo, e clicar em uma amostra aplicará essa cor. A amostra da cor atualmente selecionada no campo fica destacada. Consulte Configurações.

O menu suspenso de fontes oferece fontes do sistema (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), um conjunto de fontes do Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), além de qualquer fonte personalizada que o(a) senhor(a) tenha carregado em Configurações > Marca e fontes.

Cabeçalho e rodapé

O cabeçalho e o rodapé são áreas clicáveis na parte superior e inferior da tela. Cada uma delas pode utilizar uma predefinição salva, de modo que uma alteração na sua identidade visual atualize todos os layouts de uma só vez, ou a opção “Personalizado” (apenas para este layout) para uma alteração pontual. Consulte Predefinições de cabeçalho e rodapé.

Modo de texto rico / HTML

Nesse modo, o corpo do texto é um único editor com uma opção para alternar entre Rich Text e HTML e uma opção separada para visualização.

• O texto com formatação avançada oferece uma barra de ferramentas de formatação familiar.
• O HTML oferece uma área de texto simples - cole um e-mail já totalmente formatado, caso já tenha um.
• A opção “Inserir imagem” adiciona uma imagem hospedada, seja da sua biblioteca de mídia ou a partir de um link.

A visualização é somente para leitura e exibe as tags do Liquid tal como estão. Para ver os valores reais, envie um e-mail de teste.

Conectá-lo a umShopify Flow

Um layout representa apenas metade do trabalho - o arquivo Shopify Flow deve fornecer os valores para seus marcadores de posição.

Cada layout possui um cartão “Usar no Shopify Flow” que contém as variáveis exatas (JSON) a serem coladas na ação “Enviar e-mail transacional”, com todos os nomes das chaves já corretos. Copie-o, cole-o no Shopify Flow e substitua quaisquer marcadores de lugar do tipo <pick a Flow variable>.

Guia completo: Transmissão de dados de umShopify Flow.

Visualização com variáveis de teste

A guia “Variáveis de teste” lista todas as variáveis de teste ({{ variables.x }}) detectadas pelo aplicativo, para que o(a) senhor(a) possa inserir valores de exemplo e verificar se o design é renderizado corretamente.

Para inserir um array em um bloco Loop, insira-o como um array JSON nesta guia.

Envie um e-mail de teste

Utilize a opção “Enviar e-mail de teste” no editor de layout. Ela exibe o layout de forma real e o envia por meio de um remetente de sua escolha, com o assunto precedido por [TEST]. Essa é a única maneira de confirmar se o seu código Liquid é efetivamente executado, uma vez que a visualização na página não o avalia.

Após a entrada em operação, verifique o Histórico - um envio em que um marcador de lugar não produziu nenhum resultado é identificado como “Variáveis vazias”. Consulte Histórico e solução de problemas.

Reutilizar um projeto

• Mais → A opção “Salvar como modelo” armazena o design para que o senhor possa utilizá-lo novamente. Os designs salvos ficam na seção “Meus modelos”, que contém apenas os designs que o senhor mesmo salvou.
• Mais → A opção “Duplicar” copia o layout no local.
• Mais → A opção “Exportar” permite baixar o arquivo, e a opção “Importar” na página de lista aceita um arquivo .zip ou .json exportado anteriormente pelo aplicativo - o que é útil para transferir um design entre lojas.

Exclusão de um layout

É sempre possível excluir um layout. Se uma etapa do Shopify Flow ainda estiver vinculada a ele, o layout exibirá um selo “Usado no Shopify Flow” e a mensagem de confirmação de exclusão informará isso - mas isso não impedirá que o senhor o exclua.

Após a exclusão, qualquer etapa do Shopify Flow que ainda faça referência a ela apresentará a falha Email template not found, que aparecerá no Histórico. Para corrigir essas etapas, redirecione-as para um layout diferente.

Relacionado

• Blocos de conteúdo: produto, desconto, contagem regressiva, rastreamento e muito mais - produto, desconto, contagem regressiva, acompanhamento e os demais blocos de conteúdo.
• Transmissão de dados de umShopify Flow - inserir os valores.
• Variáveis e Líquido - a referência completa da variável.
• Anexos e imagens - arquivos, imagens e limites de tamanho.
• Predefinições de cabeçalho e rodapé - identidade visual reutilizável.
• E-mails de marketing e cancelamentos de inscrição - o que diferencia um layout de marketing.
• Configurações - cores da marca, fontes personalizadas e configurações padrão de e-mail para toda a loja.