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 navegação abandonada 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. |
unsubscribe_link | Esta variável dá acesso a um bloco de link pré-formatado de cancelamento de inscrição. Caso você crie um e-mail com codificação personalizada, será necessário incluir a variável unsubscribe_link ou unsubscribe_url . |
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 . |
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.
|
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.
<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>