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 ou unsubscribe_url são obrigatórias em 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 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:

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.
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.store_credit_account.balance \| money_with_currency}}`
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. `address` mostra o endereço da loja, o que dá acesso a estas propriedades: `address1` `address2` `city` `país` `telefone` `province` `zip`
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.

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: `componentes` `image_url` `product_title` `variant_title` `quantity` `line_items.components` exibe os componentes do checkout abandonado. Além disso, cada objeto `bundle_components` contém as seguintes propriedades sobre cada componente: `image_url` `quantity` `product_title` `variant_title` `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 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>