Adicionar Liquid personalizado às campanhas do Shopify Email

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.

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>

    Tudo pronto para começar a vender com a Shopify?

    Experimente de graça