Criar 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 o e-mail. Uma vez que o layout é independente do fluxo de trabalho, um único design pode ser utilizado para todos os clientes sem que tenha de voltar a mexer em HTML.

A lista tem dois separadores, Transacional e Marketing, cada um dos quais indica o número de modelos que contém. A lista abre-se no separador Transacional, e todos os modelos que criou antes da existência dos tipos de e-mail são transacionais. A sua pesquisa, ordenação e paginação são mantidas quando muda de separador. Um layout de marketing apresenta um ícone de Marketing junto ao seu nome, e a opção Criar layout de e-mail no separador «Marketing» inicia o novo layout como um layout de marketing.

Criar um layout

Aceda à secção Modelos de e-mail e clique em Criar modelo de e-mail. Deverá definir:

• Nome - a forma como o identifica. Só o senhor/a senhora vê isto.
• Assunto - oferece suporte a {{ variables.xxx }} e {{ secrets.xxx }}.
• Texto de pré-visualização - opcional. A breve linha que a maioria das caixas de entrada apresenta ao lado do assunto. Procure manter entre 40 e 100 caracteres; oferece o mesmo suporte às variáveis do assunto. Se o deixar em branco, o cliente de e-mail selecionará, em vez disso, o primeiro texto do seu e-mail.
• Descrição - opcional, para sua própria referência.
• Tipo de e-mail - Transacional, para os e-mails que os clientes esperam receber, como atualizações sobre pedidos e envios; estes são sempre enviados, mesmo aos clientes que cancelaram a subscrição das comunicações de marketing. Marketing para newsletters, promoções e e-mails de reconquista; cada destinatário recebe o seu próprio e-mail com um link para cancelar a subscrição e os dados da sua empresa, conforme definido nas Definições, e os clientes que cancelaram a subscriçã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 subscrição.

Em seguida, escolha um editor:

Editor	Ideal para
Construtor visual	E-mails personalizados e com a identidade da marca, criados a partir de blocos de arrastar e largar
Texto formatado / HTML	Notas transacionais simples ou um e-mail em HTML totalmente personalizado que pode colar

O construtor visual

O construtor é um ecrã com dois painéis: as definições à esquerda e uma pré-visualização em tempo real da tela à direita. Adicione blocos através do botão Adicionar secção ou dos símbolos + entre os blocos existentes.

O painel da esquerda tem quatro separadores:

Separador	O que contém
Geral	Nome, Assunto, Texto de pré-visualização, Descrição
Imagem de marca	Cores, tipografia e espaçamento do layout para todo o e-mail
Blocos	Definições para o bloco que tiver selecionado na tela
Variáveis de teste	O fragmento de código JSON do Shopify Flow, a referência às variáveis do sistema e valores de exemplo para pré-visualização

Cada bloco na tela dispõe de controlos que permitem arrastá-lo, duplicá-lo, eliminá-lo ou ocultá-lo sem o eliminar.

Referência ao bloco

Elementos

Bloco	Definiçõ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 ligação), 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 ficheiros, um link ou um metacampo relativo ao pedido ou ao cliente da etapa, e um título. Consulte Anexos e imagens
Loop	Repete um bloco de Liquid + HTML ao longo de 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 80-300 px, alinhamento
Tabela de itens de linha	Os artigos do pedido, provenientes de uma variável de lista, com linhas relativas à 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 decrescente, acompanhamento e muito mais para obter informações detalhadas sobre cada um)

Bloco	O que 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 aceita uma variável
Grelha de produtos	Duas ou três fichas por linha a partir de uma variável de lista, como a tabela de itens de linha
Código de desconto	Uma caixa de código com um botão que aplica o código no momento do checkout. Pode ser um código que introduza ou um código único de utilização única criado na sua loja para cada e-mail
Contagem regressiva	Uma contagem decrescente em tempo real para uma data, apresentada 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 rastreio, um botão «Rastrear» e uma barra de progresso que varia consoante o estado da remessa
Classificação por estrelas	Estrelas a partir de um número, com uma legenda e um link opcional para a sua página de avaliação
Testemunho	Uma citação com nome, cargo e fotografia, em formato de cartão, com uma barra de acento ou sem formatação
Redes sociais	Uma fila de ícones de rede
Vídeo	Uma miniatura com um botão de reprodução que remete para o vídeo
Assinatura	Nome, cargo, empresa, telefone, e-mail, site e uma fotografia
Tabela	Uma pequena tabela de dados, em que cada célula contém uma variável
Ver no navegador	A habitual frase «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, o tamanho, a cor e o alinhamento

Disposição

Bloco	Definições
Imagem + Texto	Posição da imagem (esquerda/direita), largura da imagem 20-70 %, alinhamento vertical, espaçamento, cor de fundo, bem como 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 os seus próprios blocos
Mostrar se	Uma secção que só é enviada quando uma condição relativa às variáveis é verdadeira, por exemplo, variables.total > 100 ou language == "de"

Imagem de marca

O separador Branding aplica-se a todo o layout:

• Cores - primárias, secundárias, do texto, do fundo do corpo do texto, do fundo do conteúdo
• Tipografia - tipo de letra dos títulos, tipo de letra do corpo do texto, altura da linha
• Disposição - os controlos de espaçamento abaixo

Controlo	O que muda	Gama
Largura máxima	Até que ponto o conteúdo do e-mail pode aumentar	400-800 px
Acolchoamento de contentores	Espaço em torno de toda a área de conteúdo	0-40px
Estofamento do bloco (lados)	Espaço entre o seu conteúdo e as margens esquerda e direita	0-40px
Preenchimento do bloco (parte 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) reduzido. O espaçamento entre blocos já separa os blocos, pelo que aumentar ambos os valores cria grandes espaços.

Se tiver definido nomes para as cores da marca em Definições > Marca e tipos de letra, todos os seletores de cor no construtor apresentam-nas como amostras por baixo do campo, e ao clicar numa amostra aplica-se essa cor. A amostra da cor atualmente selecionada no campo fica destacada. Consulte Definições.

O menu suspenso de tipos de letra disponibiliza os tipos de letra do sistema (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), um conjunto de tipos de letra do Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), bem como qualquer tipo de letra personalizado que tenha carregado em Definições > Marca e tipos de letra.

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 guardada, para 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

Neste modo, o corpo do texto é constituído por um único editor com um botão para alternar entre texto formatado e HTML e um botão separado para pré-visualização.

• O modo de texto rico disponibiliza-lhe uma barra de ferramentas de formatação que lhe será familiar.
• O HTML disponibiliza-lhe uma área de texto simples - cole aqui um e-mail já totalmente formatado, caso já o tenha.
• A opção Inserir imagem permite adicionar uma imagem alojada, quer a partir da sua biblioteca multimédia, quer a partir de um link.

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

Integrá-lo com o Shopify Flow

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

Cada layout possui um cartão «Utilizar no Shopify Flow» que contém as variáveis exatas (JSON) a colar na ação Send Transactional Email, com todos os nomes-chave já corretos. Copie-o, cole-o no Shopify Flow e substitua quaisquer marcadores de lugar do tipo <pick a Flow variable>.

Pode selecionar o layout para cada etapa do Shopify Flow na página de configuração da ação, que apresenta uma pré-visualização da mesma preenchida com as suas variáveis de teste. Nomes claros e variáveis de teste realistas facilitam a identificação do layout adequado nessa página.

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

Pré-visualização com variáveis de teste

O separador Variáveis de teste apresenta todas as {{ variables.x }} que a aplicação detetou, para que possa introduzir valores de exemplo e verificar se o design é apresentado corretamente.

Para introduzir um array num bloco Loop, introduza-o como um array JSON neste separador.

Enviar um e-mail de teste

Utilize a opção Enviar e-mail de teste no editor de layout. Esta função apresenta o layout tal como será visualizado na realidade e envia-o através de um remetente à sua escolha, com o assunto precedido pelo prefixo [TEST]. Esta é a única forma de confirmar se o seu código Liquid é efetivamente executado, uma vez que a pré-visualização na página não o avalia.

Depois de colocar o site em produção, verifique o Histórico - um envio em que um marcador de lugar não produziu qualquer resultado é identificado com a indicação Variáveis vazias. Consulte Histórico e resolução de problemas.

Reutilizar um desenho

• Mais → A opção Guardar como modelo guarda o design para que possa voltar a utilizá-lo. Os designs guardados encontram-se na secção Os meus modelos, que contém apenas os designs que o próprio guardou.
• Mais → A opção Duplicar copia o layout no local.
• Mais → A opção Exportar permite descarregar o ficheiro, e a opção Importar na página da lista aceita um ficheiro .zip ou .json previamente exportado da aplicação - o que é útil para transferir um design entre lojas.

Eliminar um layout

Pode sempre eliminar um layout. Se uma etapa do Shopify Flow ainda estiver associada a esse layout, este exibirá um emblema Utilizado em Shopify Flow e a mensagem de confirmação de eliminação indicará esse facto - mas isso não o impede de prosseguir.

Após a eliminação, qualquer etapa do Shopify Flow que ainda faça referência a esse modelo apresenta a mensagem de erro Email template not found, que aparece no Histórico. Para corrigir essas etapas, indique-lhes um layout diferente.

Relacionado

• Blocos de conteúdo: produto, desconto, contagem decrescente, acompanhamento e muito mais - produto, desconto, contagem decrescente, acompanhamento e os restantes blocos de conteúdo.
• Transmissão de dados a partir de Shopify Flow - fornecimento dos valores.
• Variáveis e Líquido - a referência completa às variáveis.
• Anexos e imagens - ficheiros, imagens e limites de tamanho.
• Predefinições de cabeçalho e rodapé - identidade visual reutilizável.
• E-mails de marketing e cancelamentos de subscrição - o que distingue um layout de marketing.
• Definições - cores da marca, tipos de letra personalizados e predefinições de e-mail para toda a loja.