Adicionar uma seção com Liquid personalizado ao Shopify Email
A inclusão de uma seção com Liquid personalizado permite a inserção de código Liquid ou HTML nas mensagens do Shopify Email.
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.
A seção com 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 a seção do Liquid personalizado.
- O código inserido não pode exceder o tamanho de 50 kB.
- A criação da seção com Liquid personalizado só pode ser realizada em um desktop.
Variáveis do Liquid compatíveis com a seção do Liquid personalizado
Use as variáveis abaixo para personalizar as mensagens de e-mail da Shopify na seção com Liquid personalizado.
Variável | Descrição |
---|---|
abandoned_checkout |
Essa variável dá acesso às seguintes propriedades de um checkout abandonado:
A variável |
abandoned_visit |
A variável dá acesso a estas propriedades de um carrinho abandonado ou uma navegação abandonada:
A variável |
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.
|
Exemplo de código personalizado do Liquid
Depois de adicionar uma seção com Liquid personalizado ao modelo de e-mail, adicione o Liquid ou HTML 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>
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#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>