Como instalar o recurso de volta ao estoque na Shopify

O que você vai aprender 

Saiba como instalar o recurso de reposição de estoque da plataforma Klaviyo para a Shopify, permitindo que seus clientes se inscrevam para receber alertas de reposição de estoque. A configuração da reposição de estoque envolve a criação de um fluxo na plataforma Klaviyo e a adição de um snippet de código personalizável à sua loja da Shopify. 

Antes de começar

Recursos

Observe que a Klaviyo não oferece assistência para codificação personalizada. Se você precisar de assistência para desenvolvedor, entre em contato com um dos parceiros da Klaviyo. 

Sobre o recurso de volta ao estoque da Klaviyo

O recurso de volta ao estoque da Klaviyo para Shopify tem dois componentes principais:

1. Fluxo de volta ao estoque
   Quando alguém se inscreve para receber alertas de volta ao estoque, um evento Subscribed to Back in Stock é registrado no perfil da Klaviyo. Este evento é utilizado para disparar o fluxo de volta ao estoque. Os compradores entram no fluxo quando se inscrevem em um produto e são contatados quando há reposição do item em que estão interessados.
2. Botão do site
   Você precisa adicionar um snippet ao tema da Shopify que exibe automaticamente o botão “Avise-me quando estiver disponível” quando os itens ficam fora de estoque. Assim que você instala o snippet, acontece o seguinte:
   • Quando um comprador busca um produto e não há produto no estoque, um botão “Avise-me quando estiver disponível” aparece diretamente ao lado ou abaixo do botão “Esgotado”.
   • Ao clicar no botão “Avise-me”, aparece um formulário que permite ao comprador inserir um e-mail para receber uma notificação quando o item voltar ao estoque.
   • Assim que o formulário é enviado, um evento Subscribed to Back in Stock é registrado no perfil do comprador dentro da plataforma Klaviyo.

A plataforma Klaviyo monitora seu estoque no nível de variante, o que significa que os compradores podem se inscrever para receber alertas sobre variantes específicas do produto. Por exemplo, se um cliente descobre que você não tem mais a camiseta rosa preferida dele no tamanho médio, ele pode se inscrever nessa variante específica e a plataforma Klaviyo garante que ele só vai receber a notificação quando você repuser esse tamanho e essa cor no estoque.

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 Viewed Product), seja por meio da incorporação do aplicativo da Klaviyo ou manualmente. 
• Certifique-se de que exista 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 não há estoque. Neste caso, confirme se, quando não há estoque, seu tema da Shopify exibe um botão Esgotado, para garantir que o código Klaviyo funcione.

Vídeo sobre o de volta ao estoque para Shopify

Instale o snippet

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

1. A partir do seu Administrador da Shopify, clique em Loja virtual > Temas.
2. Clique no menu suspenso Ações do seu tema e selecione Editar código.
3. Procure o arquivo theme.liquid e clique nele 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. Você precisa 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 de 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 aprender a personalizar o botão 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 as cores, as fontes, o 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 você fizer atualizações, certifique-se de atualizar o valor e não o rótulo em si.

Configurações do disparador

O disparador é o botão que é preenchido quando um item fica fora de estoque. Por padrão, o texto deste botão é: “Avise-me”, mas você pode editá-lo como quiser. O código padrão (dentro do snippet que você copiou) para o disparador está abaixo.

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 que é exibido dentro do botão que é preenchido quando um item fica fora de estoque.
• product_page_class
  Esta classe determina a aparência do botão; o valor padrão “button” garante que este botão corresponda a outros botões básicos de seu tema.
• product_page_text_align
  Alinhamento do texto dentro do botão de volta ao estoque (ou seja, centro, direita ou esquerda).
• product_page_margin
  Margem adicionada ao redor do botão, entre o texto e o botão.
• alternate_anchor
  Se o seu tema da Shopify usa um elemento que não seja um botão “Adicionar ao carrinho”, substitua este texto pelo 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

Se quiser selecionar quais produtos exibem o botão de volta ao estoque na página do produto, você pode incluir estes parâmetros abaixo. Certifique-se de incluir include_on_tags ou exclude_on_tags, mas não ambos.

Confira este exemplo da seção Klaviyo.init do snippet com a adição de include_on_tags:

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

• include_on_tags
  Esta tag garante que o botão de volta ao estoque seja exibido somente em itens que incluam 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
  Esta é o contrário da anterior. 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 receber uma notificação quando um item estiver de volta ao estoque.

Estas são as configurações padrão no snippet que você pode ajustar:

• headline
  Título que aparece na parte superior do pop-up. Por padrão, preencheremos dinamicamente o título como o nome do produto usando a variável {product_name} da Shopify.
• body_content
  Texto que aparece dentro do pop-up instruindo o cliente sobre o que fazer.
• email_field_label
  Texto do espaço reservado dentro do campo Email.
• button_label
  Texto no botão de envio deste formulário pop-up.
• subscription_success_label
  Mensagem que aparece quando alguém envia o formulário pop-up com sucesso.
• footer_content
  Texto opcional que aparece no rodapé, abaixo do botão de envio.
• close_label
  Texto do botão Fechar; o padrão é “Fechar”.
• background_color
  Cor do plano 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 do plano de fundo do botão de envio do formulário; o padrão é azul.
• error_background_color
  Cor de fundo de uma caixa de erro que é exibida quando há um erro no envio do formulário; o padrão é vermelho claro.
• error_text_color
  Cor do texto da mensagem de erro que é exibida quando há um erro no envio do formulário; o padrão é vermelho.
• success_background_color
  Cor de fundo da caixa de sucesso que é exibida depois que alguém envia o formulário com sucesso; o padrão é verde claro.
• success_text_color
  Cor do texto da mensagem de sucesso que é exibida depois que alguém envia o formulário com sucesso; o padrão é verde.
• font_family
  Nome da família de fonte em que o texto é formatado; Times New Roman é um exemplo de família de fonte.
• headers_font_family
  Nome da família de fonte em que o texto do cabeçalho é formatado; Helvetica é um exemplo de família de fonte.

Personalização do local do botão “Avise-me”

O snippet a seguir pode ser usado para alterar o local do botão “Avise-me”. Por padrão, o botão aparece do lado, abaixo ou substitui o botão atual Adicionar ao carrinho/Esgotado. Com este código, você pode colocar o botão abaixo da descrição, na parte inferior da página, sob a imagem etc. Para isso, coloque o snippet em seu arquivo product.liquid onde quer que o botão apareça e certifique-se de atualizar o texto do botão caso tenha feito alguma alteração diferente de “Avise-me quando estiver disponível“. 

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

Se você quiser

Opcional: solicite aos clientes que optem por participar do marketing

Quando uma pessoa se inscreve para receber um alerta de reposição de estoque, não significa que ela ache que se inscreveu em sua lista principal de newsletters.

Se os compradores pedirem para receber um alerta quando um item for reabastecido, mas começarem a receber seu conteúdo de marketing com regularidade, provavelmente vão cancelar a inscrição. Neste cenário, você perderá a possibilidade de transformar estes compradores em clientes fiéis, pois poderão optar por deixar de receber mensagens tão logo receberem e-mails indesejados.

Para capturar as pessoas que queiram optar por receber seus e-mails de marketing, adicione uma caixa de seleção como esta ao formulário De volta ao estoque:

Para implementar essa opção, você precisa incluir no snippet seu ID da Lista na seção “klaviyo.init” após o 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 pelo ID da lista da Klaviyo à qual você quer adicionar os assinantes. Normalmente, deve ser sua lista principal de newsletter.
3. Com esse acréscimo (consulte a Linha 5), o snippet fica assim:

   <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 que a caixa de seleção exibe, adicione o novo texto na seção “modal”. Por padrão, esta caixa de seleção exibe: "Adicione-me à sua lista de e-mails". Certifique-se de que este texto seja bem claro para que as pessoas que concordarem saibam 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 e exige que o usuário a selecione manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Posso usar a configuração da Shopify para “Continuar vendendo mesmo sem estoque” e o recurso “de volta ao estoque” da Klaviyo?

O fluxo de volta ao estoque da plataforma Klaviyo detecta quando há uma mudança nos níveis de estoque de zero para determinado valor definido pela sua regra de estoque mínimo. Quando você ativa a configuração da Shopify “Continuar vendendo mesmo sem estoque”, torna o produto disponível para compra apesar de não ter nenhum estoque listado, de modo que o botão “Avise-me” não será exibido. 

Neste cenário, o fluxo de volta ao estoque da plataforma Klaviyo não enviará nenhum e-mail para as pessoas que se inscreveram neste produto, pois o nível de estoque não foi alterado. Os e-mails de reposição de estoque são enviados aos clientes somente quando o nível de estoque do produto atinge sua regra de estoque mínimo definida. 

Além disso, quando a configuração “Continuar vendendo mesmo sem estoque” estiver ativada, o produto será marcado como disponível, de modo que o modal de volta ao estoque da Klaviyo não aparecerá no local para esse produto, pois ele estará disponível para compra independentemente dos níveis de estoque.

Dicas de solução de problemas

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

Configure seu fluxo

Em seguida, configure seu fluxo de volta ao estoque na Klaviyo, que é disparado sempre que alguém se inscreve para receber notificação de que um item voltou ao estoque. 

Teste a instalação do recurso de volta ao estoque

Para testar se a instalação do recurso de volta ao estoque está funcionando, faça o seguinte:

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. Adicione estoque suficiente para atender às regras de reposição de estoque nas configurações da sua conta. 
6. Verifique se você recebeu a mensagem de reposição de estoque que você criou.

Resultado

Você instalou o recurso De volta ao estoque da Klaviyo em sua loja da Shopify.

Recursos adicionais

• Como estilizar botões e formulários de volta ao estoque para temas gratuitos da Shopify.
• Como configurar o recurso de volta ao estoque por API