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.

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ávelDescriçã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ávelDescriçã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ávelDescriçã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>
    Não encontrou as respostas que está procurando? Estamos sempre à disposição para ajudar você.