Adicionar uma seção com Liquid personalizado ao Shopify Email

Faça sua empresa crescer

Se você precisar de ajuda na hora de criar código personalizado para as mensagens do Shopify Email, contrate um Especialista da Shopify.

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.

Descrição das variáveis do Liquid compatíveis com o Shopify Email

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: product_title variant_title quantity remaining_products_count exibe a contagem dos itens de linha restantes caso haja mais que cinco deles no checkout abandonado. 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.
abandoned_visit	A variável dá acesso a estas propriedades de um carrinho abandonado ou uma navegação abandonada: url exibe a URL do checkout abandonado. 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 remaining_cart_products_count exibe a contagem dos itens de linha restantes caso haja mais que cinco deles no checkout abandonado. A variável abandoned_visit só é preenchida se um e-mail fizer parte de uma automação de marketing para carrinho abandonado ou para navegação em produto abandonada. Caso contrário, a variável será null.
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. address exibe o endereço da loja, que expõe estas propriedades associadas: address1 address2 city país telefone province zip branding exibe o branding da loja, que inclui estas propriedades: accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo, que é processada diretamente como uma tag img.

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>