Adicionar Liquid personalizado às campanhas do Shopify Email

Faça sua empresa crescer

Se você precisar de ajuda na hora de criar código personalizado para as mensagens do Shopify Email, contrate um Parceiro da Shopify.

Para usar um código personalizado nas mensagens do Shopify Email, adicione uma seção personalizada com Liquid ou crie um e-mail com código personalizado. Com essas opções, é possível inserir um HTML ou Liquid personalizado.

Acesso antecipado

Os e-mails com código personalizado estão em acesso antecipado e disponíveis apenas para algumas lojas.

O Liquid é a linguagem de programação simples e fácil de usar da Shopify, a mesma aplicada no desenvolvimento dos temas disponíveis na Loja de temas.

O Liquid personalizado serve para você exibir recursos customizados, como imagens lado a lado, botões e tamanhos diferenciados para imagens e seções.

Considerações

Leia com atenção as considerações abaixo antes de adicionar o Liquid personalizado às mensagens do Shopify Email:

• As variáveis incluídas no código precisam ser compatíveis com o Liquid personalizado.
• A criação da seção com Liquid personalizado só pode ser realizada em um desktop.
• A unsubscribe_link é obrigatória nos e-mails personalizados do Liquid. Se você ativar o rastreamento de abertura, a variável open_tracking também será obrigatória. Saiba mais sobre como adicionar variáveis obrigatórias ao e-mail.
• O código a ser inserido tem os seguintes limites:
  • Máximo de 50 kB para seções do Liquid personalizado
  • Máximo de 500 kB para e-mails com código personalizado do Liquid

Variáveis do Liquid compatíveis com o Liquid personalizado

Use as variáveis abaixo para personalizar as mensagens do Shopify Email com o Liquid.

Descrição das variáveis do Liquid compatíveis com o Shopify Email

Variável	Descrição
unsubscribe_link	A variável dá acesso ao link de cancelamento de inscrição. Essa variável é necessária se você criar um e-mail com código personalizado.
open_tracking	A variável dá acesso ao bloco pré-formatado de rastreamento de abertura. Essa variável é necessária se você criar um e-mail com código personalizado e tiver ativado o rastreamento de abertura.
abandoned_checkout	Essa variável dá acesso às seguintes propriedades de um checkout abandonado: url exibe a URL do checkout abandonado. line_items exibe os cinco primeiros itens de linha do checkout abandonado. Além disso, um objeto line_items contém estas propriedades sobre cada produto: image_url product_title variant_title quantity remaining_products_count exibe a contagem dos itens de linha restantes caso haja mais que cinco deles no checkout abandonado. A variável abandoned_checkout só é preenchida se um e-mail fizer parte de uma automação de marketing para checkout abandonado. Caso contrário, a variável será null.
abandoned_visit	A variável dá acesso a estas propriedades de um carrinho abandonado ou uma navegação abandonada: url exibe a URL do checkout abandonado. products_added_to_cart exibe os cinco primeiros itens de linha de produtos adicionados ao carrinho na visita abandonada. Além disso, um objeto products_added_to_cart contém estas propriedades sobre cada produto: title image_url variant_title quantity products_viewed exibe os cinco primeiros produtos vistos durante a visita abandonada. Além disso, um objeto products_viewed contém estas propriedades sobre cada produto: title descrição image_url url remaining_cart_products_count exibe a contagem dos itens de linha restantes caso haja mais que cinco deles no checkout abandonado. A variável abandoned_visit só é preenchida se um e-mail fizer parte de uma automação de marketing para carrinho abandonado ou para navegação em produto abandonada. Caso contrário, a variável será null.
data.customer.*	A variável dá acesso a estas propriedades de dados do cliente: first_name last_name e-mail city state país Essas propriedades não podem ser usadas nos filtros do Liquid ou nas condições do Liquid.
email.*	A variável dá acesso a estas propriedades de e-mail: subject exibe a linha de assunto do e-mail. preview_text exibe o texto de pré-visualização do e-mail.
shop.*	A variável dá acesso a estas propriedades da loja: name exibe o nome da loja. domain exibe o domínio primário da loja. url exibe o URL da loja. shopify_domain exibe o domínio Shopify da loja. address exibe o endereço da loja, que expõe estas propriedades associadas: address1 address2 city país telefone province zip branding exibe o branding da loja, que inclui estas propriedades: accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo, que é processada diretamente como uma tag img.

Usar variáveis obrigatórias

Quando você cria um e-mail personalizado do Liquid, a variável unsubscribe_link é obrigatória. Se você ativar o rastreamento de abertura, a variável open_tracking também será obrigatória.

Embora essas variáveis possam ser inseridas em qualquer lugar no código do e-mail, o lugar mais comum é a seção de rodapé, como neste exemplo:

<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

Exemplo de código personalizado do Liquid

É possível inserir o HTML ou Liquid personalizado no editor de código. Confira abaixo um exemplo de como adicionar o código Liquid para exibir o nome da loja, um botão personalizado e uma imagem de tamanho personalizado em uma mensagem de e-mail.

<style>
  body {
    text-align: center;
  }

  p#welcome {
    margin: 0;
    padding: 3rem;
    color: white;
    font-weight: 700;
    font-size: 26px;
    font-family: 'Futura';
  }

  div#image_wrapper img {
    max-width: 70%;
    border-radius: 60px;
    box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
  }

  div#button_wrapper {
    padding: 1rem;
  }

  div#button_wrapper a {
    padding: 1rem 2rem;
    border-radius: 24px;
    display: inline-block;
    background: linear-gradient(120deg, #F6A179, #865CFF);
    box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
    font-weight: 700;
    font-size: 16px;
    font-family: 'Futura';
    color: white;
  }

  div#footer {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Futura';
    padding: 2rem;
  }

  div#button_wrapper:hover a {
    box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
  }

  div#custom_section {
    background: linear-gradient(120deg, #FF9F73, #FFC7AD);
    padding:0 0 2rem 0;
    border-radius: 4rem;
  }
</style>
<div id="custom_section">
  <p id="welcome">
    Hello from {{shop.name}}<strong></strong>!
  </p>
  <div id="image_wrapper">
    <img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
  </div>
  <div id="button_wrapper">
    <a href="">Shop now</a>
  </div>
  <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>