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.

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.

Variáveis do Liquid compatíveis com todos os modelos de e-mail

Use as variáveis abaixo para personalizar e-mails da Shopify com o Liquid.

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

Variável	Descrição
all_products	Todos os produtos da loja.
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.
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 mostra o endereço da loja, o que dá acesso a estas propriedades: address1 address2 city país telefone province zip branding exibe o branding da loja, o que dá acesso a 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.

Variáveis do Liquid compatíveis com e-mails de checkout abandonado

Use as variáveis a seguir para personalizar mensagens sobre checkout abandonado do Shopify Email com o Liquid.

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.

Descrição das variáveis do Liquid compatíveis com o Shopify Email para visualização, carrinho e checkout abandonados

Variável	Descrição
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.
id (checkout ID)	ID exclusivo do checkout para uso interno.
shop	Nome da loja na Shopify.
name	Nome do checkout abandonado, também conhecido como número do checkout.
total_price	O preço total da encomenda (subtotal + custo de frete - desconto de frete + tributo).
shipping_price	O preço de frete. Exemplo: {{ shipping_price | money }}
shipping_address	O endereço de entrega.
billing_address	O endereço de faturamento.
line_items	Lista de todos os itens de linha no checkout abandonado.
unavailable_line_items	Lista de todos os itens de linha que não estão disponíveis no checkout abandonado.
note	Observação anexada ao checkout abandonado.
landing_site	Caminho do site que o cliente usou. É a primeira página que a pessoa acessou quando chegou à loja. Exemplo: /products/great-product?ref=my-tracking-token
landing_site_ref	Extrai um parâmetro de referência do site, que pode ser: ref, source, r. Caso landing_site seja /products/great-product?ref=my-tracking-token, então landing_site_ref será my-tracking-token. É possível realizar uma determinada ação caso o parâmetro de referência seja igual a um certo valor: {% if landing_site_ref == 'my-tracking-token' %} Minha ação... {% endif %}
referring_site	URL do referenciador que levou o cliente à sua loja. Exemplo: https://www.google.com/?s=great+products
created_at	Data e hora em que o cliente criou o checkout abandonado.
closed_at	Data e hora em que o checkout foi fechado.
customer_locale	Código de duas ou três letras do idioma para a localidade do cliente, seguido por um modificador de região opcional. Por exemplo, pt , en-CA
item_count	Uma soma de todas as quantidades dos itens.
unique_gateways	Lista de provedores de pagamento exclusivos disponível no checkout.
discount	Desconto aplicado ao carrinho ou item de linha no checkout abandonado.
discounts	Lista de descontos aplicados no checkout.
successfully_applied_discounts	Descontos aplicados no checkout.
discounts_amount	Valor em dinheiro de todos os descontos aplicados. Exemplo: +US$ 5,00
discounts_savings	Valor em dinheiro da economia gerada por todos os descontos. Exemplo: -US$ 5,00
buyer_accepts_marketing	Devolução true ou false depende de se o cliente aceitou o marketing durante o checkout abandonado.
subtotal_line_items	Itens de linha usados para calcular o subtotal de preço no checkout, excluindo itens de linha referentes a gorjetas.
requires_shipping	Devolução true se houver pelo menos um item no checkout que exija frete.
subtotal_price	Subtotal do preço dos itens de linha no checkout.
email	E-mail associado ao checkout abandonado.
shop_name	O nome da sua loja.
tax_lines	Tributos discriminados por tipo: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %}
tax_price	Tributos combinados de todos os itens no checkout.
attributes	Atributos anexados ao checkout abandonado. Exemplo: {{ attributes.gift-note }}
shipping_method	Informações sobre a primeira forma de frete disponível no checkout.
shipping_methods	Formas de frete disponíveis no checkout.
free	Devolução true se o preço total do checkout for zero.
free_shipping	Devolução true se o checkout não exigir frete ou se o preço do frete for zero.
different_billing_address	Devolução true ou false se o endereço de entrega for igual ao endereço de faturamento.
customer	Objeto de cliente que contém os atributos da saída do cliente.
gift_cards	Cartões-presente aplicados ao checkout.
gift_cards_amount	Valor do checkout que seria pago com cartões-presente.
transactions	Transações do checkout.
shareable_url	URL do primeiro produto nos itens de linha.
shareable_title	Título do produto no primeiro item de linha.
total_tip	Gorjeta total que o cliente adicionou ao checkout.
discount_applications	Descreve o motivo e a forma como um item recebeu desconto no checkout.
cart_level_discount_applications	Aplicações de desconto específicas para o carrinho.
currency	Moeda do checkout abandonado.
line_items_subtotal_price	Soma dos preços de todos os itens de linha do checkout após a aplicação de descontos.

Variáveis do Liquid para visualização abandonada e e-mails de carrinho abandonado

A variável abandoned_visit.* só será preenchida se um e-mail fizer parte de uma automação de marketing referente a um carrinho abandonado ou uma visualização de produto abandonada. Analise as propriedades a seguir, que podem ser acessadas com essa variável.

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

Variável

Descrição

abandoned_visit.*

A variável dá acesso a estas propriedades de um carrinho abandonado ou uma navegação abandonada: url exibe o URL da visualização ou do carrinho abandonados. 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 image_alt_text remaining_cart_products_count exibe a contagem dos itens de linha restantes caso haja mais que cinco deles no checkout abandonado.

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>