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 guias, “Transacional” e “Marketing”, cada uma mostrando quantos layouts contém. Ela abre na guia “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, classificação e paginação são mantidas quando o senhor alterna entre as guias. Um layout de marketing apresenta um ícone de “Marketing” ao lado do nome, e a opção “Criar layout de e-mail” na guia “Marketing” inicia o novo layout como um layout de marketing.

Criar um layout

Acesse “Modelos de e-mail” e clique em “Criar modelo 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 deixá-la 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/a senhora cola no campo

O construtor visual

O construtor é uma tela dividida em dois painéis: as configurações à esquerda e uma visualização em tempo real da tela à 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 para 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 e um título. Consulte Anexos e imagens
Loop	Repete um bloco de Liquid + HTML sobre uma variável de matriz - utilize isso para itens de linha
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

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

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 margens 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 em 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 um botão para alternar entre Texto rico e HTML e um botão separado para alternar a visualização.

• O modo de texto rico 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” permite adicionar 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 os 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 posição 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 da forma como ele realmente será apresentado 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 com a indicação “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 mesmo local.
• Mais → A opção “Exportar” permite baixar o arquivo, e a opção “Importar” na página de lista aceita um arquivo do tipo .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 confirmação de exclusão informará isso - mas isso não o impedirá de prosseguir.

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

• Transmissão de dados de umShopify Flow - fornecer 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.