Criar um layout de e-mail

Um layout de e-mail é o próprio e-mail: o 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 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 pode ver isto.
• 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 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. Mais informações 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 marcadores «+» 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 do bloco

Elementos

Bloco	Definiçõ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 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 e um título. Consulte Anexos e imagens
Loop	Repete um bloco de Liquid + HTML numa variável de matriz - utilize esta opção 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 80-300 px, 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 0-40, alinhamento vertical, preenchimento e conteúdos separados nas colunas esquerda e direita

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 (laterais)	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 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 uma opção para alternar entre texto rico e HTML e uma opção separada 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 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.

Ligar-o a Shopify Flow

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

Cada layout dispõe de um cartão «Utilizar no Shopify Flow» que contém as variáveis exatas (JSON) a colar 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 <pick a Flow variable>.

Guia 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 variáveis {{ variables.x }} detetadas pela aplicação, 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.

Envie um e-mail de teste

Utilize a opção «Enviar e-mail de teste» no editor de layout. Esta opção apresenta o layout tal como será visualizado na realidade e envia-o através de um remetente à sua escolha, com o assunto precedido por [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.

Após a entrada em produção, verifique o Histórico - um envio em que um marcador de lugar não tenha gerado 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 utilizador 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 a partir da aplicação - o que é útil para transferir um design entre lojas.

Eliminar um layout

Pode sempre eliminar um layout. Se uma etapa de Shopify Flow ainda estiver associada a esse layout, o mesmo exibirá um ícone «Utilizado no Shopify Flow» e a mensagem de confirmação de eliminação indicará esse facto - mas isso não o impedirá de prosseguir.

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

Relacionado

• Transmissão de dados a partir de Shopify Flow - introduzir os valores.
• Variáveis e Líquido - a referência completa à variável.
• Anexos e imagens - ficheiros, imagens e limites de tamanho.
• Predefinições de cabeçalho e rodapé - imagem de marca reutilizável.
• E-mails de marketing e cancelamentos de subscrição - o que distingue um layout de marketing dos demais.
• Definições - cores da marca, tipos de letra personalizados e configurações predefinidas de e-mail para toda a loja.