Blocos de conteúdo: produto, desconto, contagem decrescente, acompanhamento e muito mais

A versão 1.17 adiciona treze blocos de conteúdo e dois blocos de layout ao construtor visual. Todos os campos de texto nestes blocos aceitam Liquid, pelo que um título de produto ou um número de rastreio podem ser obtidos a partir do fluxo de trabalho através de {{ variables.xxx }}, e a área de trabalho apresenta cada bloco renderizado com as suas variáveis de teste.

Blocos constituídos por peças

A ficha do produto, a caixa de descontos, o testemunho, a assinatura, o vídeo e o bloco de acompanhamento do pedido são criados a partir dos blocos básicos que já conhece, tal como acontece com o bloco «Imagem + Texto». Abra um deles e o painel de configurações apresentará as suas partes: uma imagem, um título, um texto, um preço e um botão. Clique numa parte para a editar com todas as definições desse bloco (largura e alinhamento da imagem, nível do título, formatação de texto rico, estilo do botão e raio dos cantos); utilize o ícone do olho para ocultar uma parte de que não necessita. Abaixo das partes encontram-se as definições do próprio bloco, tais como o layout do cartão ou o estilo da moldura.

Produto

Uma ficha de produto. Elementos: imagem (carregada ou um link, como {{ variables.product_image }}), título, descrição (oculta até que a ative), preço com um preço de comparação opcional apresentado riscado e um botão. O link engloba a imagem e o título; o botão tem o seu próprio link. O layout coloca a imagem acima do texto ou ao lado deste, definindo a largura da imagem e o alinhamento vertical da linha. Utilize-o para destacar um produto num e-mail de pedido ou de reconquista de clientes.

Preço

Uma linha de preço por si só: o preço em negrito, um preço de comparação opcional riscado à sua frente, tamanho, cor e alinhamento. Trata-se da parte relativa ao preço da ficha do produto, disponível em qualquer lugar.

Grelha de produtos

Duas ou três fichas por linha a partir de uma lista nas suas variáveis, da mesma forma que funciona a tabela de itens de linha. Selecione a variável (por exemplo, variables.products) na opção «Lista», e, em seguida, atribua um nome à propriedade que contém cada campo: title, price, compare_at_price, image, url. Cada entrada transforma-se num cartão com um botão com o estilo e o raio de curvatura dos cantos que escolher; uma imagem ou ligação em falta é simplesmente omitida. Preencha a lista a partir de Shopify Flow com um passo «Executar código» ou com os itens de linha do pedido.

Código de desconto

Uma caixa de código com um título, uma descrição e um botão como elementos, dentro de uma moldura tracejada, contínua ou simples. Duas formas de a preencher:

• Um código já existente: introduza-o (ou uma variável). O botão redireciona para a sua loja com o código aplicado no momento do checkout, a menos que lhe atribua um link próprio.
• Crie um código único para cada e-mail: a aplicação cria um código de desconto de utilização única na sua loja quando o e-mail é enviado, denominado PREFIX-XXXXXX, com a percentagem ou o montante, a validade em dias, o subtotal mínimo e a regra de «uma vez por cliente» que definir. O código aparece no Histórico juntamente com o envio, e a opção «Reenviar» do e-mail apresenta o mesmo código. Um e-mail de marketing recebe um código por destinatário.

A criação de códigos requer a permissão «Descontos», que o bloco solicita no momento da instalação e que pode ser retirada na página «Permissões» (Autorizações: o que a aplicação pode ler na sua loja). A aplicação limita-se a criar códigos; nunca lê, altera nem elimina outros descontos. Um e-mail de teste apresenta um espaço reservado em vez de criar um código.

Contagem regressiva

Uma contagem decrescente em tempo real para uma data e hora. No e-mail, trata-se de uma imagem animada que a aplicação apresenta quando o e-mail é aberto, pelo que a contagem decrescente ocorre na caixa de entrada; um cliente que bloqueia imagens apresenta o texto ao lado da mesma. A opção «Termina às» aceita uma data com fuso horário (2026-12-24T23:59:00+01:00) ou uma variável. Quatro estilos: caixas, cartões que viram, minimalista e texto; três tamanhos; os seus próprios rótulos e cores; e um texto que substitui a contagem decrescente assim que o tempo tiver decorrido.

Acompanhamento de pedidos

Transportadora e número de rastreio, uma barra de progresso e duas partes: um botão «Rastrear» (que abre o link de rastreio, a menos que indique outro) e uma nota, como a estimativa de entrega, que permanece oculta até ser necessária. DELIVERED e outros) ou um número de etapa, e destaca as etapas até esse ponto. Os rótulos das etapas são definidos por si; podem ser de duas a seis.

Classificação por estrelas

Estrelas correspondentes a um número ({{ variables.rating }}), arredondadas para números inteiros, com as restantes a cinzento, acompanhadas de um texto e de um link opcional, por exemplo, para a sua página de avaliações. Acompanhe-as com um e-mail a solicitar uma avaliação.

Testemunho

Uma citação e uma linha de autor como partes do texto, além de uma fotografia opcional, sob a forma de cartão, com uma barra colorida de destaque ou sem qualquer elemento adicional.

Redes sociais

Uma fila de ícones de redes sociais (Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest e outras), com tamanho e espaçamento definidos. São os mesmos ícones utilizados no rodapé.

Vídeo

O e-mail não permite a reprodução de vídeos, pelo que este bloco apresenta a miniatura com um botão de reprodução, com ligação à página do vídeo, e uma legenda opcional abaixo. Botão de reprodução em tom escuro, claro ou com as cores da marca; altura e largura da miniatura. O Outlook para Windows não mostra a miniatura por trás do botão de reprodução; a ligação continua a funcionar.

Assinatura

Uma fotografia, um nome (um título) e os detalhes (um texto: cargo, empresa, telefone, e-mail, site), com a fotografia redonda ou quadrada, à esquerda ou na parte superior. As opções predefinidas utilizam {{ shop.name }} e {{ shop.email }}.

Tabela

Uma pequena tabela de dados para informações sobre pedidos ou especificações. Cada célula recebe uma variável; a primeira linha pode ser um cabeçalho e as linhas podem ser alternadas.

Ver no navegador

A habitual frase «ver este e-mail no seu navegador». A ligação abre uma versão web desse mesmo e-mail, gerada a partir do layout e dos dados da mensagem enviada, durante 30 dias. Um e-mail de teste contém uma ligação para o layout com as respetivas variáveis de teste.

Colunas

Duas, três ou quatro colunas iguais, cada uma com os seus próprios blocos: três fichas de produto lado a lado, ou ícones com uma linha de texto por baixo de cada um.

Mostrar se

Uma secção que só é apresentada quando uma condição relativa às suas variáveis é verdadeira. Digite a condição da forma como o Liquid a interpreta: variables.total > 100, language == "de", variables.tags contains "vip". A tela avalia-a com as suas variáveis de teste e oculta a secção quando esta não deve ser apresentada. Coloque os blocos no seu interior tal como faria numa coluna.

Relacionado

• Criar um layout de e-mail - o construtor e todos os outros blocos.
• Transmissão de dados a partir de Shopify Flow - introduzir os valores.
• Autorizações: o que a aplicação pode ler na sua loja - a autorização «Descontos».