Cómo instalar Back In Stock para BigCommerce

Qué aprenderás

Aprenda a instalar la función Back in Stock de Klaviyo en su tienda BigCommerce. Esta función tiene dos componentes clave: un flujo y un botón en su página web. 

1. Flujo de vuelta a existencias: Cuando alguien se suscribe a una alerta de reabastecimiento, se registrará en su perfil de Klaviyo un evento "Suscribed to Back in Stock". Este es el evento que utilizará para desencadenar su flujo de vuelta a existencias. Los compradores entrarán en el flujo cuando se suscriban a una alerta de reabastecimiento y esperarán en "Retraso de reabastecimiento" hasta que se reponga su artículo de interés.
2. Botón del sitio web: Tendrá que añadir un fragmento a su tema de BigCommerce que muestre automáticamente un botón "Notifíqueme cuando esté disponible" cuando los artículos se agoten. Cuando los compradores hagan clic en este botón, rellenarán un formulario y se suscribirán a una alerta de reabastecimiento.

Antes de empezar

Esta guía se centrará en la instalación del fragmento Back in Stock de Klaviyo en su gestor de scripts de BigCommerce para que los compradores puedan suscribirse a las alertas de reabastecimiento. Antes de empezar, le convendrá tener ya configurado en su cuenta un flujo de existencias remanentes tanto para captar a estos suscriptores como para automatizar el proceso de alerta de existencias remanentes.

Tenga en cuenta que nuestro botón Volver a existencias no es compatible con el modal de Vista rápida al que se accede desde una página de Colecciones. El botón sólo debe colocarse en la página del producto.

¿Cómo funciona el fragmento?

En cuanto instale el fragmento proporcionado a continuación, ocurrirá lo siguiente:

• Cuando un comprador busque un producto y éste esté agotado, aparecerá un botón "Notifíqueme cuando esté disponible" directamente donde normalmente aparecería el botón "Agotado".
• Cuando alguien haga clic en el botón "Notifíqueme...", aparecerá un formulario que permitirá al comprador inscribirse para recibir una notificación cuando se reponga el artículo.
• En cuanto se envíe el formulario, se realizará un seguimiento del evento "Subscribed to Back In Stock" en el perfil de ese comprador dentro de Klaviyo.
• A continuación, el flujo Volver a existencias que ya ha configurado avisará a los compradores cuando el artículo al que se han suscrito vuelva a estar disponible.

Klaviyo realiza un seguimiento de su inventario dentro de su cuenta de Klaviyo y actualiza los productos cada 3 horas, y las variantes cada hora. Debido a este retraso, puede haber casos en los que los productos que se han agotado en su tienda aún no se reflejen en Klaviyo. También puede darse el caso de que un producto que ha vuelto a estar en stock en su tienda no se haya reflejado en Klaviyo.

Klaviyo también supervisa su inventario a nivel de variantes. Esto significa que los compradores pueden suscribirse para recibir alertas sobre variantes específicas de productos. Por ejemplo, si un cliente descubre que se ha agotado su camiseta rosa favorita en una talla mediana, puede suscribirse a esta variante específica y Klaviyo se asegurará de que sólo reciba una notificación cuando haya reabastecido esta talla y color.

Instale el fragmento

Para instalar el snippet Klaviyo back in stock, deberá añadirlo a un nuevo script en su Gestor de Scripts.

1. Desde su Admin de BigCommerce, navegue a Storefront > Script Manager.
2. Haga clic en Crear un guión. Utilice los siguientes ajustes:
   • Nombre del guión: Klaviyo de nuevo en stock
   • Ubicación en la página: Pie de página
   • Seleccione las páginas donde se añadirá el script: Páginas de la tienda
   • Tipo de guión: Guión
   • Categoría de guión: Funcional
3. A continuación, actualice el script de abajo con su clave de API pública de Klaviyo, y pegue el script actualizado en el cuadro de script.
   • Puede copiar su clave API pública de 6 caracteres de Klaviyo. Para encontrarla, haga clic en el nombre de su cuenta en la esquina inferior izquierda y, a continuación, vaya a Configuración > Claves API. En el script, su API pública debe sustituir el texto que lee 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",{    
        disparar: {  
             product_page_text: "Notify Me When Available", 
             product_page_class: "button",  
             product_page_text_align: "center", 
             product_page_margin: "0px", 
             replace_anchor: false 
        },  
        modal: { 
             titular: "{product_name}", 
             body_content: "Regístrese para recibir una notificación cuando este artículo vuelva a estar disponible.",   
             email_field_label: "Correo electrónico", 
             button_label: "Notificarme cuando esté disponible", 
             subscription_success_label: "¡Está dentro! Le avisaremos cuando esté de vuelta.",  
             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. Pulse Guardar. Ha añadido el botón Klaviyo de nuevo en stock a su tienda.
   

Personalice su formulario y su botón

El botón y el formulario de Klaviyo "Notifíqueme cuando esté disponible" son altamente configurables. Puede cambiar los colores, las fuentes, el texto y otros elementos según sus preferencias de diseño.

A continuación se enumeran y explican los valores por defecto incluidos en el fragmento anterior. Si realiza actualizaciones, asegúrese de actualizar el valor y no la propia etiqueta.

Ajustes de disparo

El disparador es el botón que aparece cuando un artículo se agota. Este botón dirá, "Notifíqueme cuando esté disponible" por defecto, pero puede configurarse para que diga lo que usted desee. El código por defecto para el disparador es:

disparar: {
    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
  El texto que se muestra dentro del botón que aparece cuando un artículo se agota.
• product_page_class
  Esta "clase" determinará el aspecto del botón; el valor por defecto 'botón ' garantizará que este botón coincida con otros botones básicos de su tema.
• product_page_text_align
  La alineación del texto dentro del botón de devolución de existencias (por ejemplo. centro, derecha o izquierda).
• product_page_margin
  El margen añadido alrededor del botón, entre el texto y el botón.
• alternate_anchor
  Si su tema utiliza un elemento que no sea un botón "Añadir a la cesta", sustituya este texto por el ID del elemento.
• replace_anchor
  Cuando se establece en false, verá tanto un botón "Agotado" como un botón "Notificarme cuando esté disponible". Cuando se ajusta a verdadero, el botón "Notificarme cuando esté disponible" sustituirá al botón "Agotado".

Ajustes modales

El modal es el cuadro de mensaje que aparece cuando alguien pulsa el botón para que se le notifique la reposición de un artículo. Estos son los ajustes por defecto que puede ajustar:

• headline
  El titular que aparece en la parte superior de la ventana emergente; por defecto, rellenaremos dinámicamente el titular como el nombre del producto utilizando la variable {product_name} de BigCommerce.
• body_content
  El texto que aparece dentro de la ventana emergente indicando al cliente lo que debe hacer. 
• email_field_label
  El texto del marcador de posición dentro del campo Correo electrónico.
• button_label
  El texto dentro del botón "submit" para este formulario emergente.
• subscription_success_label
  El mensaje "success" que aparece en verde cuando alguien envía correctamente el formulario emergente.
• footer_content
  (opcional) Texto que aparecerá en el pie de página, debajo del botón de envío close_label: "Cerrar".
• background_color
  El color de fondo del formulario emergente; por defecto es blanco.
• text_color
  El color del texto del formulario emergente; por defecto es negro.
• button_text_color
  El color del texto del botón en el formulario emergente; por defecto es blanco.
• button_background_color
  El color de fondo del botón de envío del formulario; por defecto es azul.
• error_background_color
  El color de fondo de una caja de error que se muestra cuando hay un error al enviar el formulario; por defecto es rojo pálido.
• error_text_color
  El color del texto del mensaje de error que se muestra cuando hay un error al enviar el formulario; por defecto es rojo.
• success_background_color
  El color de fondo del cuadro de éxito que se muestra después de que alguien envíe el formulario correctamente; por defecto es verde pálido.
• success_text_color
  El color del texto del mensaje de éxito que se muestra después de que alguien envíe el formulario correctamente; por defecto es verde.

Pedir a los clientes que opten por el marketing

Cuando alguien se suscribe a una alerta de existencias, no significa necesariamente que espere ser suscrito a su lista principal de boletines.

Si los compradores piden que se les avise cuando se reponga un artículo, pero luego empiezan a recibir regularmente contenidos de marketing suyos, es probable que se den de baja. En este caso, se pierde la posibilidad de convertir a estos compradores en clientes fieles porque se dan de baja antes de tiempo tras recibir correos electrónicos que nunca indicaron que querían.

Para captar a aquellos que sí quieren optar por recibir correos electrónicos de marketing suyos, puede añadir una casilla como ésta a su formulario de devolución de existencias:

Para implementar esto, necesitará hacer una adición primaria a su snippet añadiendo su ID de Lista en el "klaviyo.init" después de su ID de cuenta.

1. La sección "klaviyo.init" tendrá este aspecto:

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

2. Sustituya YOUR_LIST_ID por el con el ID de seis caracteres de la lista de Klaviyo a la que desea que se añadan estos suscriptores. Normalmente, ésta debería ser su lista principal de boletines.
3. El fragmento con este añadido (véase la línea 5) tendrá el siguiente aspecto:

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

4. Si desea personalizar lo que dice la casilla de verificación, puede añadir el texto que desea mostrar en la sección "modal".

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

   Por defecto, esta casilla dirá: "Añádame a su lista de correo electrónico." Deberá asegurarse de que este texto sea muy claro para que los que se inscriban sepan que empezarán a recibir correos electrónicos de marketing suyos.

5. Si desea controlar si esta casilla está marcada o no, puede añadir "subscribe_checked" como parámetro a la sección "modal". True marcará la casilla por defecto, mientras que false la dejará sin marcar y requerirá que el usuario la seleccione manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Resultado

Ya ha instalado la función de devolución de existencias de Klaviyo en su tienda BigCommerce. 

Recursos adicionales

• Primeros pasos con BigCommerce
• Cómo crear un evento Añadido al carrito para BigCommerce