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 do Shopify Flow seleciona um layout e um remetente e, em seguida, envia a mensagem. 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. Sua pesquisa, classificação e paginação são mantidas quando o senhor alterna entre as abas. Um layout de marketing apresenta 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 - oferece suporte a {{ 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; ele oferece o mesmo suporte às variáveis do assunto. Se você deixá-lo 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

Bloquear	Configurações
Texto	Texto formatado, alinhamento, tamanho da fonte (12/14/16/18), cor
Título	Texto do título, tamanho (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-24px
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 condicionais {% 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 para 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)

Bloquear	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
Rastreamento 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

Bloquear	Configurações
Imagem + Texto	Posição da imagem (esquerda/direita), largura da imagem 20-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 altera	Faixa
Largura máxima	Até que ponto o conteúdo do e-mail pode aumentar	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 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 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.

Integrá-lo ao Shopify Flow

Um layout representa apenas metade do trabalho - o Shopify Flow precisa fornecer os valores para seus placeholders.

Cada layout possui um cartão “Usar no Shopify Flow” que contém as variáveis exatas (JSON) a serem coladas na ação Send Transactional Email, com todos os nomes-chave já corretos. Copie-o, cole-o no Shopify Flow e substitua quaisquer espaços reservados do tipo <pick a Flow variable>.

O senhor escolhe o layout para cada etapa do Shopify Flow na página de configuração da ação, que exibe uma pré-visualização preenchida com suas variáveis de teste. Nomes claros e variáveis de teste realistas facilitam a identificação do layout correto nessa página.

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

Visualização com variáveis de teste

A guia Variáveis de teste lista todas as {{ variables.x }} detectadas pelo aplicativo, para que o(a) senhor(a) possa inserir valores de exemplo e verificar se o design é exibido 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 Liquid é realmente executado, uma vez que a visualização na página não o avalia.

Após a publicação, verifique o Histórico - um envio em que um placeholder não produziu nenhum resultado é marcado 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 do 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 em 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 ele apresentará a falha Email template not found, que aparecerá no Histórico. Para corrigir essas etapas, indique um layout diferente para elas.

Relacionado

• Blocos de conteúdo: produto, desconto, contagem regressiva, rastreamento e muito mais - produto, desconto, contagem regressiva, rastreamento e os demais blocos de conteúdo.
• Transmissão de dados de umShopify Flow - fornecimento dos valores.
• Variáveis e Líquido - a referência completa às variáveis.
• 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.