Cómo instalar la función de reposición de stock para Shopify

Qué aprenderás 

Descubre cómo instalar la función de reposición de stock para Shopify, para que los clientes puedan suscribirse a tus alertas de reposición de artículos. La configuración de esta función consiste en crear un flujo en Klaviyo y añadir un fragmento de código personalizable a tu tienda de Shopify. 

Antes de empezar

Ten en cuenta que Klaviyo no ofrece asistencia para personalizar el código. Si necesitas ayuda por parte de desarrolladores, puedes hablar con uno de los socios de Klaviyo. 

Acerca de la función de reposición de stock de Klaviyo

La función de reposición de stock de Klaviyo para Shopify tiene 2 componentes clave:

1. Flujo de reposición de stock
   Cuando alguien se suscribe a una alerta de reposición de stock, se hace un seguimiento al evento Suscrito a Reposición de Stock en su perfil de Klaviyo, y este es el evento que usarás para activar tu flujo de reposición de stock. Los compradores entrarán en el flujo cuando se suscriban a un producto y se les contactará cuando el artículo que les interese vuelva a estar disponible.
2. Botón del sitio web
   Tendrás que añadir un fragmento a tu tema de Shopify que muestre automáticamente el botón «Notificarme cuando esté disponible» cuando se agoten las existencias de un artículo. En cuanto instales el código, ocurrirá lo siguiente:
   • Cuando un comprador busque un producto y no queden existencias, le aparecerá el botón «Notificarme cuando esté disponible» directamente al lado o debajo del botón «Agotado».
   • Cuando un comprador haga clic en el botón «Notificarme», aparecerá un formulario donde podrá escribir su correo para que se le notifique cuando vuelva a estar disponible el artículo.
   • Tan pronto como se envíe el formulario, se hará seguimiento al evento Suscrito a Reposición de Stock en el perfil del comprador en Klaviyo.

Klaviyo supervisa tu inventario a nivel de variantes, lo que significa que los compradores pueden suscribirse para recibir alertas sobre diferentes variantes de un producto específico. Por ejemplo, si un cliente se encuentra con que se ha agotado su camiseta rosa favorita en talla mediana, puede suscribirse a esta variante específica y Klaviyo se asegurará de que solo se le notifique cuando hayas repuesto esta talla y color.

Antes de instalar el fragmento

Antes de instalar el fragmento siguiendo las instrucciones a continuación, haz lo siguiente:

• Comprueba que hayas activado el seguimiento del sitio de Klaviyo en tu tienda de Shopify (incluido el evento Producto Visto), ya sea mediante la aplicación de Klaviyo integrada o manualmente. 
• Asegúrate de tener el botón «Añadir al carrito» o un formulario de contacto en tu página de producto. Algunos temas de Shopify podrían eliminar el botón «Añadir al carrito» cuando no haya existencias. En ese caso, confirma que, cuando esto ocurra, tu tema de Shopify muestre el botón «Agotado» para asegurarte de que el código de Klaviyo funcione.

Vídeo de reposición de stock para Shopify

Instalación del fragmento

Añade el siguiente fragmento de código a tu archivo theme.liquid. Estas instrucciones se aplican tanto a los usuarios Shopify 2.0 como a aquellos que usen temas vintage. 

1. Desde el administrador de Shopify, haz clic en Online Store > Themes (Tienda en línea > Temas).
2. Selecciona el desplegable Actions (Acciones) del tema y haz clic en Edit Code (Editar código).
3. Busca el archivo theme.liquid y haz clic para abrirlo en el editor.
4. Copia el fragmento JavaScript a continuación y pégalo en tu archivo theme.liquid directamente encima de la etiqueta </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: {
        encabezado: "{product_name}",
        body_content: "Suscríbete y recibe 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: "¡Todo listo! Te avisaremos cuando vuelva a estar disponible",
        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. Tendrás que sustituir el texto PUBLIC_API_KEY del fragmento por tu clave de API pública de Klaviyo. Descubre cómo encontrar la clave de API pública de tu cuenta. Si utilizas varias cuentas de Klaviyo, asegúrate de usar la clave de la cuenta correcta. Copia y pega tu clave en el fragmento.
   
6. Puedes guardar tu archivo theme.liquid para usar la configuración predeterminada o descubrir cómo personalizar los ajustes y el botón de reposición de stock a continuación.

Personaliza el formulario y el botón

El botón y el formulario de Klaviyo «Notificarme» se pueden personalizar. Puedes cambiar los colores, la tipografía, el texto y otros elementos de acuerdo a tus preferencias de diseño.

A continuación, se explican los valores predeterminados que se incluyen en el código anterior. Si realizas actualizaciones, asegúrate de actualizar el valor y no la etiqueta misma.

Ajustes de activador

El activador es el botón que se genera cuando no hay existencias de un artículo. Este botón incluirá el texto «Notificarme» de forma predeterminada, pero puede modificarse con el mensaje que quieras. El código predeterminado (dentro del fragmento que copiaste) para el activador es el siguiente.

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
    }, 

Los parámetros son:

• product_page_text
  El texto que se muestra dentro del botón que se rellena cuando un artículo se agota.
• product_page_class
  Esta clase determinará el aspecto del botón. El valor predeterminado 'button' garantizará que este botón coincida con otros botones básicos de tu tema.
• product_page_text_align
  La alineación del texto dentro del botón de reposición de stock (p. ej., 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 tu tema de Shopify utiliza un elemento que no sea un botón «Añadir al carrito», sustituye este texto por el ID del elemento.
• replace_anchor
  Si se configura como false, verás tanto el botón «Agotado» como el botón «Notificarme». Cuando se configura como true, el botón «Notificarme» sustituye al botón «Agotado».

Ajustes de visibilidad del activador

Si quieres elegir con qué productos se muestra el botón de reposición de stock en la página de producto, puedes incluir los siguientes parámetros. Asegúrate de incluir include_on_tags o bien exclude_on_tags, pero no ambos.

A continuación, verás un ejemplo de la sección Klaviyo.init del fragmento con include_on_tags añadido:

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

• include_on_tags
  Esta etiqueta garantiza que el botón de reposición de stock muestre solo los artículos que incluyen etiquetas específicas. En el ejemplo anterior, solo los productos etiquetados como «Perro», «gato» o ambos tendrán un botón de reposición de stock.
• exclude_on_tags
  Es la opuesto de lo anterior. El uso de exclude_on_tags garantizará que el botón de reposición de stock se muestre en todos los productos excepto en los especificados.

Ajustes modales

La ventana modal es el formulario emergente que aparece cuando alguien pulsa el botón para que se le notifique que un artículo está otra vez disponible.

Estos son los ajustes predeterminados del fragmento que puedes ajustar:

• headline
  El encabezado que aparece en la parte superior de la ventana emergente. De forma predeterminada, rellenaremos dinámicamente el encabezado como el nombre del producto utilizando la variable {product_name} de Shopify.
• 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 de correo.
• button_label
  El texto dentro del botón de envío para este formulario emergente.
• subscription_success_label
  El mensaje que aparece cuando alguien envía correctamente el formulario emergente.
• footer_content
  Texto opcional que aparecerá en el pie de página, debajo del botón de envío.
• close_label
  El texto del botón de cierre. El predeterminado es «Cerrar».
• background_color
  El color de fondo del formulario emergente. El predeterminado es blanco.
• text_color
  El color del texto del formulario emergente. El predeterminado es negro.
• button_text_color
  El color del texto del botón en el formulario emergente. El predeterminado es blanco.
• button_background_color
  El color de fondo del botón de envío del formulario. El predeterminado es azul.
• error_background_color
  El color de fondo de un cuadro de error que se muestra cuando hay un error al enviar el formulario. El predeterminado 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. El predeterminado 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. El predeterminado 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. El predeterminado es verde.
• font_family
  El nombre de la familia de fuentes en la que está formateado tu texto. Times New Roman es un ejemplo de familia de fuentes.
• headers_font_family
  El nombre de la familia de fuentes del texto del encabezado; por ejemplo, Helvetica es una familia de fuentes.

Personalización de la ubicación del botón «Notificarme»

El siguiente fragmento se puede utilizar para cambiar la ubicación del botón «Notificarme». De forma predeterminada, el botón aparecerá al lado, debajo o sustituirá al botón actual «Añadir al carrito»/«Agotado». Con este código, puedes colocar el botón debajo de la descripción, en la parte inferior de la página, debajo de la imagen, etc. Para hacerlo, coloca el fragmento en tu archivo product.liquid, donde quieras que aparezca el botón, y asegúrate de actualizar el texto del mismo si lo has cambiado a algo que no sea «Notificarme cuando esté disponible». 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Notificarme cuando esté disponible</a>

Opcional: pedir a los clientes que se suscriban al contenido de marketing

Cuando alguien se suscribe a una alerta de reposición de stock, esto no implica que espera estar suscribiéndose a la lista de tu newsletter principal.

Si los compradores piden que se les avise cuando se reponga un artículo, pero luego empiezan a recibir regularmente tu contenido de marketing, es probable que se den de baja. En este caso, se pierde la posibilidad de convertir a estos compradores en clientes fidelizados porque podrían darse de baja pronto tras recibir correos electrónicos no deseados.

Para captar a aquellos que sí quieren suscribirse para recibir tus correos electrónicos de marketing, puedes añadir una casilla como esta a tu formulario de reposición de stock:

Para hacerlo, necesitarás incorporar tu ID de lista en la sección «klaviyo.init», después de tu ID de cuenta.

1. La sección «klaviyo.init» se verá del siguiente modo:

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

2. Sustituye YOUR_LIST_ID por el ID de la lista de Klaviyo a la que deseas añadir suscriptores. Normalmente, esta debería ser tu lista principal de la newsletter.
3. El fragmento modificado (consulta la línea 5) se verá del siguiente modo:

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

4. Si quieres personalizar lo que aparece en la casilla, puedes añadir el texto que quieras mostrar en la sección modal. De forma predeterminada, esta casilla dirá: «Suscribirme a la lista de correos». Lo ideal es asegurarse de que este texto sea lo más claro posible, de forma que los que se suscriban sepan que recibirán correos de marketing por tu parte.

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

5. Si quieres controlar si esta casilla se marca o se desmarca, puedes añadir «subscribe_checked» como parámetro a la sección modal. «True» marcará la casilla de forma predeterminada, mientras que «false» la dejará sin marcar y requerirá que el usuario la seleccione manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

Cómo usar la configuración de Shopify para seguir vendiendo cuando se agoten las existencias y el ajuste de reposición de stock de Klaviyo

El flujo de reposición de stock de Klaviyo detecta cuándo se produce un cambio en los niveles de inventario desde cero hasta una cantidad determinada que hayas establecido en la regla de inventario mínimo. Si activas el ajuste de Shopify «Continue selling when out of stock» (Continuar vendiendo cuando esté agotado), el producto se podrá comprar aunque esté agotado. Por lo tanto, no se mostrará el botón «Notificarme». 

En este caso, el flujo de reposición de stock de Klaviyo no enviará correos a aquellos que se hayan suscrito a este producto, dado que los niveles de inventario no han cambiado. Los correos de reposición de stock solo se envían una vez que el nivel de inventario del producto suba por encima del conjunto de reglas mínimas de tu inventario. 

Además, si está activa la configuración de Shopify para seguir vendiendo cuando se agoten las existencias, esto marcará el producto como disponible, de forma que la ventana modal de reposición de stock de Klaviyo no aparecerá en el sitio web para este producto cuando el producto esté disponible para su compra, independientemente de los niveles de inventario.

Consejos para solucionar problemas

La visibilidad del botón de reposición de stock variará en función del tema de Shopify concreto que utilice tu tienda. Si estás usando un tema personalizado, tal vez necesites personalizar el código del tema para garantizar que la función de reposición de stock funcione correctamente.

Configura tu flujo

A continuación, configura tu flujo de reposición de stock en Klaviyo, que se activará siempre que alguien se suscriba para ser notificado cuando un producto vuelva a estar disponible. 

Prueba la instalación de reposición de stock

Para garantizar que tu instalación de reposición de stock funcione, haz lo siguiente:

1. Configura un producto de prueba en la tienda.
2. Pon a cero el inventario del producto.
3. Comprueba si aparece el botón «Notificarme» en la página del producto.
4. Haz clic en el botón «Notificarme» y rellena el formulario.
5. Añade suficiente inventario para cumplir las reglas de reposición de stock de la configuración de la cuenta. 
6. Comprueba que hayas recibido el mensaje de reposición de stock que creaste.

Resultado

Ya has instalado la función de reposición de stock de Klaviyo en tu tienda de Shopify.

Recursos adicionales

• Cómo personalizar los botones y formularios de reposición de stock de los temas gratuitos de Shopify
• Cómo configurar la reposición de stock a través de la API