Como instalar o Back In Stock para BigCommerce

O que você vai aprender

Saiba como instalar o recurso Back in Stock do Klaviyo em sua loja BigCommerce. Esse recurso tem dois componentes principais: um fluxo e um botão em seu site. 

1. Fluxo de volta ao estoque: Quando alguém assina um alerta de reabastecimento, um evento "Subscribed to Back in Stock" será rastreado em seu perfil da Klaviyo. Esse é o evento que o senhor usará para acionar o Back in Stock Flow. Os compradores entrarão no fluxo quando assinarem um alerta de reabastecimento e aguardarão em um "Back in Stock Delay" até que o item de seu interesse seja reabastecido.
2. Botão do site: O senhor precisará adicionar um snippet ao seu tema do BigCommerce que mostrará automaticamente um botão "Notify Me When Available" quando os itens ficarem fora de estoque. Quando os compradores clicarem nesse botão, eles preencherão um formulário e se inscreverão para receber um alerta de reabastecimento.

Antes de começar

Este guia se concentrará na instalação do snippet Back in Stock da Klaviyo em seu gerenciador de scripts do BigCommerce para que os compradores possam se inscrever para receber alertas de reabastecimento. Antes de começar, o senhor deverá ter um fluxo de Back in Stock já config urado em sua conta para capturar esses assinantes e automatizar o processo de alerta de back in stock.

Observe que o botão Back in Stock não é compatível com o modal Quick View acessado a partir de uma página Collections. O botão deve ser colocado somente na página do produto.

Como o snippet funciona?

Assim que o senhor instalar o snippet fornecido abaixo, ocorrerá o seguinte:

• Quando um comprador navega em um produto e o produto está fora de estoque, um botão "Notify Me When Available" aparecerá diretamente no lugar do botão "Sold Out" que normalmente seria exibido.
• Quando alguém clicar no botão "Notify Me...", será exibido um formulário que permitirá que o comprador se inscreva para ser notificado quando o item for reabastecido.
• Assim que o formulário for enviado, um evento "Subscribed to Back In Stock" será rastreado no perfil do comprador dentro da Klaviyo.
• Em seguida, o fluxo Back in Stock que o senhor já configurou alertará os compradores quando o item que eles assinaram estiver novamente em estoque.

A Klaviyo monitora seu estoque na conta da Klaviyo e atualiza os produtos a cada 3 horas e as variantes a cada hora. Devido a esse atraso, pode haver casos em que os produtos que saíram de estoque em sua loja ainda não estejam refletidos na Klaviyo. Também pode haver casos em que um produto que voltou ao estoque em sua loja não tenha sido refletido na Klaviyo.

O Klaviyo também monitora seu inventário em um nível de variante. Isso significa que os compradores podem se inscrever para receber alertas sobre variantes específicas de produtos. Por exemplo, se um cliente descobrir que você não tem mais a camiseta rosa preferida dele no tamanho médio, ele poderá se inscrever nessa variante específica e a Klaviyo garantirá que ele só será notificado quando você reabastecer esse tamanho e essa cor.

Instale o snippet

Para instalar o snippet Klaviyo back in stock, o senhor o adicionará a um novo script no Script Manager.

1. No administrador do BigCommerce, navegue até Storefront > Script Manager.
2. Clique em Create a Script. Use as seguintes configurações:
   • Nome do script: Klaviyo de volta ao estoque
   • Localização na página: Rodapé
   • Selecione as páginas onde o script será adicionado: Store Pages
   • Tipo de script: Script
3. Em seguida, atualize o script abaixo com sua chave de API pública do Klaviyo e cole o script atualizado na caixa de script.
   • O senhor pode copiar sua chave de API pública de 6 caracteres do Klaviyo. Para encontrá-la, clique no nome da sua conta no canto inferior esquerdo e, em seguida, navegue até Settings (Configurações) > API keys (Chaves de API). No script, sua API pública deve substituir o texto que lê PUBLIC_API_KEY.
     

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
        var klaviyo = klaviyo || [];   
        klaviyo.init({   
             account: 'PUBLIC_API_KEY',    
             platform: 'bigcommerce'  
        });  
        klaviyo.enable("backinstock",{    
        acionamento: {  
             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: "Registre-se para receber uma notificação quando este item estiver novamente em estoque.",   
             email_field_label: "Email", 
             button_label: "Notifique-me quando disponível", 
             subscription_success_label: "O senhor está dentro! Avisaremos os senhores quando ele estiver de volta.",  
             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: "#4787ed",
             close_button_color: "#ccc", 
             error_background_color: "#fcd6d7", 
             error_text_color: "#C72E2F",
             success_background_color: "#d3efcd",
             success_text_color: "#1B9500" 
             } 
        });
   </script>

4. Clique em Salvar. O senhor adicionou o botão "Klaviyo back in stock" à sua loja.
   

Personalize seu formulário e botão

O botão e o formulário do Klaviyo "Notify Me When Available" são altamente configuráveis. O senhor 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 estão listados e explicados a seguir. Se o senhor fizer atualizações, certifique-se de atualizar o valor e não o rótulo em si.

Configurações do acionador

O acionador é o botão que é preenchido quando um item fica fora de estoque. Por padrão, esse botão dirá: "Notify me when available", mas pode ser configurado para dizer o que o senhor quiser. O código padrão para o acionador é:

acionamento: {
    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
    }, 

• product_page_text
  O texto que é exibido dentro do botão que é preenchido quando um item fica fora de estoque.
• product_page_class
  Essa classe "" determinará a aparência do botão; o valor padrão 'button' garantirá que esse botão corresponda a outros botões básicos do seu tema.
• product_page_text_align
  O alinhamento do texto dentro do botão de volta ao estoque (por exemplo, o centro, direita ou esquerda).
• product_page_margin
  A margem adicionada ao redor do botão, entre o texto e o botão.
• alternate_anchor
  Se o seu tema usar um elemento que não seja um botão "Add to Cart", substitua esse texto pelo ID do elemento.
• replace_anchor
  Quando essa opção for definida como false, o senhor verá os botões "Sold Out" e "Notify Me When Available". Quando essa opção for definida como true, o botão "Notify Me When Available" substituirá o botão "Sold Out".

Configurações modais

O modal é a caixa de mensagem que aparece quando alguém clica no botão para ser notificado quando um item é reabastecido. Essas são as configurações padrão que o senhor pode ajustar:

• headline
  O título que aparece na parte superior do popup; por padrão, preencheremos dinamicamente o título como o nome do produto usando a variável {product_name} do BigCommerce.
• body_content
  O texto que aparece dentro do pop-up instruindo o cliente sobre o que fazer. 
• email_field_label
  O texto do espaço reservado dentro do campo Email.
• button_label
  O texto no botão "submit" desse formulário pop-up.
• subscription_success_label
  A mensagem "success" que aparece em verde quando alguém envia o formulário pop-up com sucesso.
• footer_content
  (opcional) Texto que aparecerá no rodapé, abaixo do botão de envio close_label: "Fechar".
• background_color
  A cor de fundo do formulário pop-up; o padrão é branco.
• text_color
  A cor do texto do formulário pop-up; o padrão é preto.
• button_text_color
  A cor do texto do botão no formulário pop-up; o padrão é branco.
• button_background_color
  A cor de fundo do botão de envio do formulário; o padrão é azul.
• error_background_color
  A 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
  A 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
  A cor de fundo da caixa de sucesso que é exibida depois que alguém envia o formulário com êxito; o padrão é verde claro.
• success_text_color
  A cor do texto da mensagem de sucesso que é exibida depois que alguém envia o formulário com êxito; o padrão é verde.

Solicitar que os clientes aceitem o marketing

Quando alguém se inscreve para receber um alerta de volta ao estoque, isso não significa necessariamente que ele espera ser inscrito em sua lista principal de boletins informativos.

Se os compradores pedirem para serem alertados quando um item for reabastecido, mas começarem a receber conteúdo de marketing regular do senhor, é provável que eles cancelem a assinatura. Nesse cenário, o senhor perde a possibilidade de transformar esses compradores em clientes fiéis porque eles optam por sair logo após receberem e-mails que nunca indicaram que queriam.

Para capturar as pessoas que desejam optar por receber e-mails de marketing do senhor, é possível adicionar uma caixa de seleção como esta ao formulário Back in Stock Form:

Para implementar isso, o senhor precisará fazer um acréscimo primário ao seu snippet, adicionando o ID da lista em "klaviyo.init" após o ID da conta.

1. A seção "klaviyo.init" terá a seguinte aparência:

   klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
   });
   

2. Substitua YOUR_LIST_ID pelo com o ID de seis caracteres da Lista do Klaviyo à qual o senhor deseja que esses assinantes sejam adicionados. Normalmente, essa deve ser sua lista principal de boletins informativos.
3. O snippet com essa adição (consulte a linha 5) terá a seguinte aparência:

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
       });
       klaviyo.enable('backinstock',{ 
          acionamento: {
            ...
          },
          modal: {
            ...
          }
       });
   </script>
   

4. Se quiser personalizar o que a caixa de seleção diz, é possível adicionar o texto que deseja exibir na seção "modal".

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

   Por padrão, essa caixa de seleção dirá: ". Adicione-me à sua lista de e-mails." Certifique-se de que esse texto seja bem claro para que as pessoas que optarem por participar saibam que começarão a receber seus e-mails de marketing.

5. Se quiser controlar se essa caixa está marcada ou desmarcada, o senhor pode adicionar "subscribe_checked" como um parâmetro à seção "modal". True marcará a caixa por padrão, enquanto false a deixará desmarcada e exigirá que o usuário a selecione manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Resultado

O senhor instalou o recurso Back in Stock do Klaviyo na sua loja BigCommerce. 

Recursos adicionais

• Primeiros passos com o BigCommerce
• Como criar um evento Added to Cart para o BigCommerce