Cómo configurar un formulario de reposición de stock

Descubre cómo configurar y personalizar un formulario de registro de reposición de stock para tu tienda en línea. Con el editor de formularios de Klaviyo, puedes personalizar tanto el botón “Avísame” que aparece cuando un producto en tu sitio está agotado como el formulario que tus clientes usan para registrarse y recibir notificaciones de reposición de stock por correo electrónico, mensajería de texto y WhatsApp.

Antes de empezar

Los formularios de reposición de stock solo están disponibles para tiendas con integraciones de Shopify o BigCommerce habilitadas en Klaviyo. Si usas una plataforma diferente, consulta nuestra guía de instalación del flujo de reposición de stock.

Antes de publicar el formulario, asegúrate de que el seguimiento en el sitio de Klaviyo (Klaviyo.js) esté instalado en tu tienda para que Klaviyo pueda mostrar el botón y el formulario.

En este artículo, aprenderás cómo:

• Elimina cualquier código existente de reposición de stock de Klaviyo de tu tienda de Shopify o BigCommerce (si corresponde)
• Habilita y personaliza el botón y el formulario de registro de reposición de stock

Cómo funciona el formulario de reposición de stock en tu escaparate

Después de publicar un formulario de reposición de stock, Klaviyo muestra automáticamente un botón personalizable de “Notifícame” en las páginas de producto cuando la variante seleccionada está agotada y el producto coincide con la configuración de segmentación. Puedes personalizar este botón en el editor de formularios, junto con el formulario. El botón aparece y desaparece automáticamente según el inventario del producto.

Cuando un comprador hace clic en el botón “Notifícame”, aparece tu formulario, lo que le permite elegir cómo quiere que se le notifique cuando el producto vuelva a estar disponible, según cómo hayas configurado el formulario:

• Correo electrónico: Si incluyes un campo de correo electrónico, los compradores pueden ingresar su dirección de correo electrónico para recibir una alerta de reposición por correo electrónico. También puedes agregar una casilla de verificación opcional para que los compradores se suscriban a recibir correos electrónicos promocionales de marketing.
• Mensajería de texto y WhatsApp: Si incluyes un campo de número de teléfono, los compradores pueden suscribirse para recibir alertas de reposición por mensaje de texto, WhatsApp o ambos, según los canales que selecciones para ese campo. Los compradores deben proporcionar su consentimiento explícito para recibir mensajes promocionales a través de los canales seleccionados. Este consentimiento es obligatorio y no puede ser opcional, y el texto de divulgación debe estar presente.

Después de que un comprador envía el formulario, Klaviyo registra un evento Suscribirse a reposición de stock en su perfil. Para enviar alertas de reposición, configura un flujo de reposición de stock activado por esta métrica, con una espera de Reposición de stock antes de tus mensajes de notificación. Los compradores esperan durante este retraso hasta que el producto cumpla con la configuración de inventario de reposición de stock y de notificaciones. Configura los mensajes de notificación como Activo para enviarlos automáticamente.

Ten en cuenta que las pruebas A/B y los métodos no tradicionales de suscripción a SMS y WhatsApp (p. ej., Smart Opt-in y tap-to-text) no son compatibles con los formularios de reposición de stock.

Quitar el fragmento de código existente de reposición de stock

Si anteriormente instalaste el fragmento de código de reposición de stock de Klaviyo, primero debes quitarlo para evitar botones o formularios duplicados.

Expande la sección de la plataforma de tu tienda para ver cómo quitar el código. Si no estás seguro de qué script o código debes quitar, contacta a tu desarrollador o consulta tus notas de instalación originales.

<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: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     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>

Crear un formulario de reposición de stock

1. En la navegación principal de Klaviyo, selecciona la pestaña formulario de registro.
2. Haz clic en Crear formulario.
3. En la barra de búsqueda, escribe “reposición de stock” y selecciona una plantilla de reposición de stock prediseñada para personalizarla.
   

• Para comenzar desde un formulario en blanco en lugar de una plantilla, haz clic en Crear formulario en blanco. Si aparece el selector de canal, selecciona Web. Elige reposición de stock (solo elemento emergente) como el tipo de formulario.

4. Ingresa un nombre para el formulario y elige las listas para los registros promocionales recopilados a través de sus campos de correo electrónico y número de teléfono. Para un formulario en blanco, selecciona Correo electrónico, Mensaje de texto o ambas opciones, y elige una lista para cada opción seleccionada. Configurarás WhatsApp en el campo de número de teléfono en el editor.
5. Haz clic en Crear formulario si seleccionaste una plantilla o en Guardar y diseñar si empezaste desde un formulario en blanco, para abrir el editor.

6. Selecciona el paso del botón de visualización del producto en la barra de menú. Ten en cuenta que este siempre debe ser el primer paso del formulario y no se puede eliminar.
7. En el menú de edición de la izquierda, elige dónde debe aparecer el botón en tus páginas de producto:
   • Reemplazar el botón Agregar al carrito: el botón "Notificarme" reemplazará el botón "Agregar al carrito" para los artículos que estén agotados.
   • Apilado: el botón "Avísame" aparecerá debajo del botón "Agregar al carrito" (cuando se muestre como "Agotado").
     

1. Usa las opciones de Texto, estilo del botón, borde y sombra paralela para actualizar la etiqueta y el estilo del botón "Notifícame".
2. Selecciona el primer paso de suscripción, como Suscripción por email, y abre Estilos para ajustar colores, fuentes y diseño para que el formulario coincida con tu marca.

3. Revisa cada paso de suscripción restante y el paso de Éxito al seleccionarlo en la barra de menú. Haz clic en los bloques de texto o de entrada individuales para editar el contenido y la configuración según sea necesario.

1. Si el formulario incluye un campo de número de teléfono, selecciónalo y configura Canal como Mensaje de texto, WhatsApp o WhatsApp y mensaje de texto. Completa la configuración de los canales seleccionados antes de publicar y revisa el texto de divulgación de esos canales.
2. Solo Shopify (opcional): Para controlar dónde aparece el botón "Notifícame", ve a Orientación y comportamiento > Orientación y usa etiquetas de Shopify para incluir o excluir productos específicos en los que debe aparecer el botón.
   

3. Cuando estés satisfecho con tu formulario, haz clic en Publicar o programar y luego haz clic en Publicar ahora para activarlo. Una vez que el formulario esté activo, el botón para mostrar productos aparecerá para las variantes agotadas que coincidan con la configuración de segmentación.
4. Después de publicar, confirma que tienes un flujo de reposición de stock para enviar notificaciones. Si no lo has descartado antes, aparece un mensaje para ayudarte a configurarlo.

• Si ya tienes un flujo de reposición de stock activado por Suscribirse a reposición de stock, no necesitas crear otro. Confirma que incluya una espera de reposición de stock y que sus mensajes de notificación estén Activos para que se envíen automáticamente. Si aparece la indicación, haz clic en Descartar.
• Si no tienes un flujo de reposición de stock, haz clic en Salir y crear flujo cuando aparezca el mensaje y, luego, sigue Cómo crear un flujo de reposición de stock. Si no aparece el mensaje, sigue la misma guía para crear el flujo.

Analíticas para formularios de reposición de stock

Después de publicar el formulario, ve a formularios de registro, abre el menú de 3 puntos junto al formulario de reposición de stock y selecciona Análisis.

Puedes monitorear las métricas del formulario de reposición de stock en su página de analíticas, incluidas Envíos de reposición de stock y Suscripciones de marketing. La tasa de envío es el número de envíos de formularios de reposición de stock dividido entre las vistas del formulario. El consentimiento de marketing se mide por separado.

Esta página también incluye gráficos de los datos del formulario por paso y por tipo de recopilación de datos:

• Interacción: esto se refiere a las suscripciones de reposición de stock (p. ej., cuando un comprador se registra para recibir alertas de reposición por correo electrónico).
• Consentimiento de marketing: Esto se refiere a cuando las personas compradoras dan su consentimiento para recibir mensajes promocionales, ya sea al marcar la casilla de consentimiento para recibir emails de marketing o al enviar un número de teléfono con el consentimiento promocional requerido para mensajería de texto, WhatsApp o ambos.

Solución de problemas de reposición de stock

Si la experiencia de reposición de stock no funciona como se espera, revisa los siguientes problemas comunes.

El botón "Notificarme" no aparece o no está en la ubicación correcta

Si el botón "Notifícame" no aparece en la página del producto o quieres configurarlo para que aparezca en otra ubicación personalizada, puedes controlar manualmente su posición con la clase CSS klaviyo-bis-trigger.

<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>

Agrega el elemento de ejemplo en la ubicación donde quieres el botón “Avísame”, o agrega la clase klaviyo-bis-trigger a un elemento existente ahí. Con Reemplazar el botón de agregar al carrito, Klaviyo oculta ese elemento y muestra el botón en su lugar. Con Apilado, Klaviyo muestra el botón después de ese elemento. Esto puede ayudar con un tema personalizado o no estándar, pero no siempre resolverá un problema de botón faltante. Si tienes problemas para configurar una ubicación de botón personalizada, consulta a tu desarrollador.

Compatibilidad con la configuración de Shopify "Continuar vendiendo cuando no hay existencias"

La función de reposición de stock de Klaviyo no funciona con la configuración de Shopify "Continuar vendiendo cuando no haya existencias". Si esta configuración está habilitada, el producto siempre aparece disponible, incluso con inventario cero. Como resultado:

• El botón “Notifícame” y el formulario de reposición de stock no aparecerán.
• No se enviará ningún correo electrónico de reposición de stock, ya que Klaviyo no puede detectar cuándo se repone el inventario para activar el flujo.

Para usar las funciones de reposición de stock de Klaviyo, asegúrate de que “Continue selling when out of stock” esté desactivado para esos productos.

¿Estás utilizando el tema Retina?

El tema Retina (de Out of the Sandbox) viene con un formulario "Notificarme" integrado en la página del producto. Tendrás que desactivar el botón predeterminado que viene con tu tema para que funcione el código de Klaviyo.

¿Está utilizando un tema que oculta un producto si todas las variantes están agotadas?

Si tu tema de Shopify oculta un producto cuando todas sus variantes están agotadas, tendrás que identificar esa parte del código en tu archivo product.liquid y editarla para que se muestren todos los productos, sin importar su nivel de stock.

Recursos adicionales