Personalizar as campanhas do Shopify Email usando o Liquid
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.
Use o Liquid personalizado para melhorar suas mensagens do Shopify Email criando um e-mail com código personalizado ou adicionando uma seção personalizada do Liquid a um modelo. Essas opções permitem inserir o Liquid ou o HTML personalizado.
O Liquid personalizado serve para você exibir recursos customizados, como imagens lado a lado, botões e tamanhos diferenciados para imagens e seções.
Nesta página
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.
- As variáveis
unsubscribe_link
ouunsubscribe_url
são obrigatórias em e-mails personalizados do Liquid. Se você ativar o rastreamento de abertura, a variávelopen_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 compatíveis para personalizar as mensagens do Shopify Email com o Liquid. Você pode revisar as listas de variáveis Liquid suportadas para os seguintes tipos de modelos:
- Todos os modelos de e-mail
- Modelos de e-mail de checkout abandonado
- Modelos de e-mail de navegador abandonado e carrinho abandonado
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.
Variável | Descrição |
---|---|
all_products | Todos os produtos da loja. |
customer.accepts_marketing | Retorna true se o cliente aceitar comunicações de marketing, caso contrário retorna false . |
customer.addresses | Retorna todos os endereços associados ao cliente. |
customer.addresses_count | Retorna o número de endereços associados ao cliente. |
customer.b2b? | Retorna true se o cliente for B2B, caso contrário, retorna false . |
customer.current_location | Retorna o local da empresa atualmente selecionado para o cliente. |
customer.default_address | Retorna o endereço padrão do cliente. |
customer.email | Retorna o endereço de e-mail do cliente. |
customer.first_name | Retorna o primeiro nome do cliente. |
customer.has_account | Retorna true se o e-mail do cliente estiver associado a uma conta de cliente, caso contrário, retorna false . |
customer.has_avatar? | Retorna true se o cliente tiver um avatar associado à conta, caso contrário, retorna false . |
customer.id | Retorna o ID do cliente. |
customer.last_name | Retorna o sobrenome do cliente. |
customer.last_order | Retorna o último pedido feito pelo cliente, não incluindo pedidos de teste. |
customer.name | Retorna o nome completo do cliente. |
customer.orders | Retorna todos os pedidos feitos pelo cliente. |
customer.orders_count | Retorna o número total de pedidos feitos pelo cliente. |
customer.payment_methods | Retorna as formas de pagamento salvas do cliente. |
customer.phone | Retorna o número de telefone do cliente. O número de telefone é preenchido somente se o cliente o inseriu no checkout, ativou as notificações SMS ou se você o adicionou manualmente à conta do cliente. |
customer.store_credit_account.balance |
Retorna o saldo de crédito na loja para o cliente, na moeda associada ao contexto relevante. Por exemplo:
|
customer.tags | Retorna as tags associadas ao cliente. |
customer.tax_exempt | Retorna true se o cliente estiver isento de tributos, caso contrário retorna false . |
customer.total_spent | Retorna o valor total gasto pelo cliente em todos os pedidos da sua loja. |
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. |
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. |
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.
|
unsubscribe_url | Esta variável dá acesso ao URL não formatado de cancelamento de inscrição e pode ser personalizada. Caso você crie um e-mail com codificação personalizada, será necessário incluir a variável unsubscribe_url ou unsubscribe_link . Elas sempre apontarão para o domínio principal da loja virtual e não poderão ser alteradas para apontar para outro destino.
|
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.
Variável | Descrição |
---|---|
abandoned_checkout.* |
Essa variável dá acesso às seguintes propriedades de um 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_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: |
landing_site_ref |
Extrai um parâmetro de referência do site, que pode ser: Caso {% if landing_site_ref == 'my-tracking-token' %} Minha ação... {% endif %} |
referring_site |
URL do referenciador que levou o cliente à sua loja. Exemplo: |
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 trueou falsedepende 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 truese houver pelo menos um item no checkout que exija frete. |
subtotal_price | Subtotal do preço dos itens de linha no checkout. |
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: |
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 truese o checkout não exigir frete ou se o preço do frete for zero. |
different_billing_address | Devolução trueou falsese 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.
Variável | Descrição |
---|---|
abandoned_visit.* |
A variável dá acesso a estas propriedades de um carrinho abandonado ou uma navegação abandonada:
|
Usar variáveis obrigatórias
Quando você cria um e-mail personalizado do Liquid, a variável unsubscribe_link
ou unsubscribe_url
é 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }} Newsletter</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
<tr>
<td align="center" style="padding: 20px;">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<!-- Header -->
<tr>
<td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
<p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 30px 20px;">
<!-- Greeting Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
<p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
{% if customer.email %}
<p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
{% endif %}
</td>
</tr>
</table>
<!-- Reading Journey Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
<p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
{% if customer.last_order %}
<p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
{% endif %}
</td>
</tr>
</table>
<!-- Recommended Books Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="50%" style="padding-right: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
alt="Product 1"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 1"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
<td width="50%" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
alt="Product 2"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 2"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Book Club Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
<h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
<p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
<a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
<p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
<p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
<p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
<a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>