Como instalar o recurso de reposição de estoque na Shopify

O que você vai aprender 

Saiba como instalar o recurso de reposição de estoque da Shopify para que seus clientes possam receber alertas de produtos que voltaram ao estoque. A configuração envolve criar um fluxo na Klaviyo e incluir um snippet de código personalizável à sua loja Shopify. 

Antes de começar

Atenção: a Klaviyo não oferece assistência de programação personalizada. Se precisar desse tipo de ajuda, entre em contato com um dos parceiros da Klaviyo. 

Sobre o recurso de reposição de estoque da Klaviyo

O recurso de reposição de estoque da Klaviyo para a Shopify tem 2 componentes principais:

1. Fluxo de reposição de estoque
   Quando alguém se inscreve para receber alertas de reposição de estoque, um evento Inscreveu-se em Reposição de Estoque é registrado no perfil da Klaviyo. Esse evento é usado para disparar o fluxo de reposição de estoque. Os compradores entram no fluxo quando se inscrevem e são contatados quando há reposição do item em que estão interessados.
2. Botão do site
   É preciso adicionar um snippet ao tema da Shopify para exibir automaticamente o botão “Avise-me quando estiver disponível” quando um item estiver esgotado. Veja o que acontece quando você instala o snippet:
   • Quando um comprador busca um produto que está esgotado, o botão “Avise-me quando estiver disponível” aparece ao lado ou abaixo do botão “Esgotado”.
   • Quando clicado, o botão exibe um formulário para que o comprador insira um e-mail e seja notificado quando o item voltar ao estoque.
   • Assim que o formulário é enviado, um evento Inscreveu-se em Reposição de Estoque é associado ao perfil na Klaviyo.

A Klaviyo monitora seu estoque no nível de variante, ou seja, os compradores podem se inscrever para receber alertas sobre variantes específicas do produto. Por exemplo, se um cliente quer uma camiseta rosa no tamanho médio que está esgotada, ele pode se inscrever nessa variante específica. Assim, a Klaviyo garante que ele só receba a notificação quando o item nesse tamanho e cor for reposto.

Antes de instalar o snippet

Antes de instalar o snippet com as instruções abaixo, faça o seguinte:

• Verifique se você ativou o rastreamento no site da Klaviyo em sua loja Shopify (incluindo Produto Visualizado), seja por meio da incorporação do aplicativo da Klaviyo ou manualmente. 
• Verifique se há um botão "Adicionar ao carrinho" ou um formulário de contato na página do seu produto. Alguns temas da Shopify removem o botão "Adicionar ao carrinho" quando um produto está esgotado. Neste caso, confirme se seu tema exibe um botão “Esgotado” para que o código da Klaviyo funcione.

Vídeo sobre a reposição de estoque na Shopify

Instale o snippet

Adicione o snippet de código abaixo ao seu arquivo theme.liquid. Estas instruções se aplicam a usuários que usam a Shopify 2.0 ou temas vintage. 

1. Em seu Administrador da Shopify, clique em Online Store > Themes.
2. Clique no menu suspenso Actions do seu tema e selecione Edit Code.
3. Clique no arquivo theme.liquid para abri-lo no editor.
4. Copie o snippet de JavaScript abaixo e cole-o em seu arquivo theme.liquid diretamente acima da tag </body>. 

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
         account: "PUBLIC_API_KEY",
         platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
       trigger: {
         product_page_text: "Notify Me When Available",
         product_page_class: "button",
         product_page_text_align: "center",
         product_page_margin: "0px",
         replace_anchor: false
       },
       modal: {
        headline: "{product_name}",
        body_content: "Cadastre-se para receber uma notificação quando este item estiver de volta ao estoque.",
        email_field_label: "Email",
        button_label: "Avise-me quando estiver disponível",
        subscription_success_label: "Tudo certo! Avisaremos quando estiver disponível.",
        footer_content: '',
        additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
        drop_background_color: "#000",
        background_color: "#fff",
        text_color: "#222",
        button_text_color: "#fff",
        button_background_color: "#439fdb",
        close_button_color: "#ccc",
        error_background_color: "#fcd6d7",
        error_text_color: "#C72E2F",
        success_background_color: "#d3efcd",
        success_text_color: "#1B9500"
       }
     });
   </script>

5. É preciso substituir o texto PUBLIC_API_KEY no snippet pela sua chave de API pública da Klaviyo. Saiba como encontrar a chave de API pública da sua conta. Se você usa várias contas Klaviyo, verifique se está usando a chave da conta correta. Copie e cole sua chave no snippet.
   
6. Você pode parar por aqui e salvar o arquivo theme.liquid para usar a configuração padrão ou pode personalizar o botão de reposição de estoque e as configurações abaixo.

Personalize o formulário e o botão

O botão e o formulário “Avise-me” da Klaviyo são altamente configuráveis. Você pode alterar cores, fontes, texto e outros elementos de acordo com suas preferências de design.

Os valores padrão incluídos no snippet acima são explicados a seguir. Se fizer mudanças, atualize o valor e não o rótulo em si.

Configurações do disparador

O disparador é o botão que aparece quando um item está esgotado. Por padrão, o texto desse botão é “Avise-me”, mas você pode editá-lo como quiser. Veja abaixo o código padrão (dentro do snippet que você copiou) do disparador:

trigger: {
    product_page_text: "Notify Me When Available",
    product_page_class: "button",
    product_page_text_align: "center",
    product_page_margin: "0px",
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

Os parâmetros são:

• product_page_text
  Texto exibido no botão que aparece quando um item fica fora de estoque.
• product_page_class
  Determina a aparência do botão. O valor padrão “button” garante que ele combine com os outros botões básicos do seu tema.
• product_page_text_align
  Alinhamento do texto dentro do botão de reposição de estoque (centro, direita ou esquerda).
• product_page_margin
  Margem adicionada entre o texto e o botão.
• alternate_anchor
  Se seu tema da Shopify usa um elemento diferente do botão “Adicionar ao carrinho”, substitua esse texto pela ID do elemento.
• replace_anchor
  Quando esta opção é definida como false, você vê um botão “Esgotado” e um “Avise-me”. Quando é definida como true, o botão “Avise-me” substitui o botão “Esgotado”.

Configurações de visibilidade do disparador

Para selecionar quais produtos exibem o botão de reposição de estoque, inclua os parâmetros abaixo. Inclua as tags include_on_tags ou exclude_on_tags, mas não ambas.

Exemplo da seção Klaviyo.init do snippet com a inclusão de include_on_tags:

klaviyo.init({
    account: "PUBLIC_API_KEY",
    platform: "shopify",
    include_on_tags: "dog, cat"
});

• include_on_tags
  O botão de reposição de estoque é exibido somente em itens que incluem as tags especificadas. No exemplo acima, somente os produtos marcados com "dog", "cat" ou ambos terão um botão de reposição de estoque.
• exclude_on_tags
  Tem um comportamento oposto ao da tag acima. O uso de exclude_on_tags garante que o botão de reposição de estoque seja exibido em todos os produtos, exceto os especificados.

Configurações modais

O modal é o formulário pop-up que aparece quando alguém clica no botão para ser notificado quando um item voltar ao estoque.

Veja as configurações padrão do snippet que podem ser ajustadas:

• headline
  Título que aparece na parte superior do pop-up. Por padrão, é preenchido dinamicamente com o nome do produto usando a variável {product_name} da Shopify.
• body_content
  Texto do pop-up indicando o que o cliente deve fazer.
• email_field_label
  Texto provisório do campo de e-mail.
• button_label
  Texto do botão de envio do formulário pop-up.
• subscription_success_label
  Mensagem exibida quando o formulário é enviado com sucesso.
• footer_content
  Texto opcional que aparece no rodapé, abaixo do botão de envio.
• close_label
  Texto do botão para fechar; o padrão é “Fechar”.
• background_color
  Cor de fundo do formulário pop-up; o padrão é branco.
• text_color
  Cor do texto do formulário pop-up; o padrão é preto.
• button_text_color
  Cor do texto do botão no formulário pop-up; o padrão é branco.
• button_background_color
  Cor de fundo do botão de envio do formulário; o padrão é azul.
• error_background_color
  Cor de fundo da caixa de erro exibida quando há um problema no envio do formulário; o padrão é vermelho claro.
• error_text_color
  Cor do texto da mensagem de erro exibida quando há um erro no envio do formulário; o padrão é vermelho.
• success_background_color
  Cor de fundo da caixa exibida quando alguém envia o formulário com sucesso; o padrão é verde claro.
• success_text_color
  Cor do texto da mensagem de sucesso exibida quando alguém envia o formulário com sucesso; o padrão é verde.
• font_family
  Nome da família de fontes em que o texto é formatado; por exemplo, Times New Roman.
• headers_font_family
  Nome da família de fontes em que o texto do cabeçalho é formatado; por exemplo, Helvetica.

Personalize a posição do botão “Avise-me”

O snippet a seguir pode ser usado para mudar a posição do botão “Avise-me”. Por padrão, ele aparece do lado, abaixo ou substitui os botões "Adicionar ao carrinho" ou "Esgotado". Com esse código, você pode colocar o botão abaixo da descrição, na parte inferior da página, abaixo da imagem etc. No arquivo product.liquid, coloque o snippet onde quiser que o botão apareça e atualize-o caso tenha mudado o texto “Avise-me quando estiver disponível“. 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Avise-me quando estiver disponível</a>

Opcional: peça permissão para enviar mensagens de marketing

Quando alguém se inscreve para receber um alerta de reposição de estoque, não significa que se inscreveu em sua lista principal de newsletters.

Se os clientes que pediram para receber um alerta quando um item for reabastecido começarem a receber seu conteúdo de marketing com regularidade, provavelmente vão cancelar a inscrição. Neste cenário, você perde a chance de transformá-los em clientes fiéis, já que eles podem cancelar o recebimento de mensagens assim que receberem um e-mail indesejado.

Para capturar as pessoas que querem receber seus e-mails de marketing, adicione uma caixa de seleção como essa ao formulário de reposição de estoque:

Para implementar essa opção, inclua sua ID de lista na seção “klaviyo.init” após a ID da conta.

1. A seção “klaviyo.init” fica assim:

   klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
   });

2. Substitua YOUR_LIST_ID pela ID da lista da Klaviyo à qual deseja adicionar os assinantes. Normalmente, é sua lista principal de newsletter.
3. O snippet fica assim (veja a linha 5):

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
          trigger: {
            ...
          },
          modal: {
            ...
          }
       });
   </script>

4. Se quiser personalizar o conteúdo da caixa de seleção, inclua o novo texto na seção “modal”. Por padrão, o texto dessa caixa é “Adicione-me à sua lista de e-mails”. Esse texto deve ser bem claro para que as pessoas entendam que vão começar a receber seus e-mails de marketing.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

5. Para controlar se essa caixa está marcada ou desmarcada, adicione “subscribe_checked” como parâmetro à seção “modal”. “True” marca a caixa por padrão, e “false” deixa a caixa desmarcada para que o usuário selecione-a manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Posso usar a configuração da Shopify para continuar vendendo mesmo sem estoque junto com o recurso de reposição de estoque da Klaviyo?

O fluxo de reposição de estoque da Klaviyo detecta quando há uma mudança no nível de estoque de zero até um valor definido pela sua regra de estoque mínimo. Ativar a configuração da Shopify “Continue selling when out of stock” torna um produto disponível para compra apesar de estar fora de estoque, ou seja, o botão “Avise-me” não aparece. 

Neste cenário, o fluxo de reposição de estoque da Klaviyo não envia nenhum e-mail para as pessoas que se inscrevem nesses produtos, pois o nível de estoque não foi alterado. Os e-mails de reposição de estoque só são enviados quando o nível de estoque do produto atinge sua regra de estoque mínimo. 

Além disso, quando a configuração “Continue selling when out of stock” está habilitada, o produto é considerado disponível, ou seja, a janela modal de estoque da Klaviyo não aparece porque o produto está disponível independentemente do estoque.

Dicas para solucionar problemas

A aparência do botão de reposição de estoque varia de acordo com o tema específico da Shopify da sua loja. Se estiver usando um tema personalizado, pode ser necessário personalizar o código do tema para que o recurso de reposição de estoque funcione corretamente.

Configure seu fluxo

Em seguida, configure seu fluxo de reposição de estoque na Klaviyo. Ele é disparado quando alguém se inscreve para ser avisado quando um item voltar ao estoque. 

Teste a instalação do recurso de reposição de estoque

Siga as etapas abaixo para testar se a instalação do recurso está funcionando:

1. Configure um produto de teste em sua loja.
2. Defina o estoque desse produto como zero.
3. Verifique a página do produto para ver se o botão “Avise-me” aparece.
4. Clique no botão “Avise-me” e preencha o formulário.
5. Nas configurações da sua conta, adicione estoque suficiente para atender às regras de reposição. 
6. Confira se você recebe sua mensagem de reposição de estoque.

Resultado

Você instalou o recurso de reposição de estoque da Klaviyo na sua loja da Shopify.

Recursos adicionais

• Como estilizar botões e formulários de reposição de estoque para temas gratuitos da Shopify
• Como configurar o recurso de reposição de estoque por API