Cómo instalar reposición para Shopify

Qué aprenderás

Descubrirás cómo instalar la función reposición para Shopify, de forma 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

Recursos

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 Klaviyo

La función de Reposición de Klaviyo para Shopify tiene dos componentes clave:

1. Flujo de reposición
   Cuando alguien se suscribe a una alerta de reposición, se hará seguimiento a un evento de suscrito a reposición en su perfil de Klaviyo, y este es el que usarás para activar tu flujo de reposición. 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 en existencias.
2. Botón del sitio web
   Tendrás que añadir un fragmento a tu tema de Shopify que muestre automáticamente un botón de "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 busca un producto y no quedan existencias, les aparecerá el botón "Notificarme cuando esté disponible" directamente al lado o debajo del botón "Agotado".
   • Cuando hagas clic en el botón "Notificarme", aparecerá un formulario que permite que el comprador introduzca su correo para que se le notifique cuando vuelva a haber existencias del artículo.
   • Tan pronto como se envíe el formulario, se hará seguimiento a un evento de Suscrito a reposición en el perfil del comprador en Klaviyo.

Klaviyo supervisa tu inventario a nivel de variantes, es decir, 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 notificará cuando hayas repuesto talla y color.

Antes de instalar el fragmento

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

• Comprueba que has activado el seguimiento de tu web en Klaviyo en tu tienda de Shopify (incluido Producto visualizado), ya sea con la aplicación de Klaviyo incrustada o manualmente.
• Asegúrate de que tienes un 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 no haya existencias, tu tema de Shopify muestra un botón de Agotado, para saber que el código de Klaviyo funcionará.

Vídeo de Reposición 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 aquellos que usen temas anteriores. 

1. Desde el administrador de Shopify, haz clic en Online Store > Themes (Tienda en línea > Temas).
2. Selecciona el desplegable Acciones del tema y haz clic en 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: {
        titular: "{product_name}",
        body_content: "Suscríbete para que te avisemos cuando volvamos a reponer este artículo",
        email_field_label: "Correo electrónico",
        button_label: "Notificarme cuando esté disponible",
        subscription_success_label: "¡Todo listo! Te avisaremos cuando lo volvamos a tener",
        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 a encontrar la clave 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 parar aquí y guardar tu archivo theme.liquid para usar la configuración predeterminada, o saber cómo personalizar tu botón de reposición y ajustes a continuación.

Personaliza el formulario y el botón

El botón y el formulario de Klaviyo "Notificarme" tienen mucha capacidad de personalización. 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 por defecto que se incluyen en el código de arriba. Si aplicas actualizaciones, asegúrate de actualizar el valor y no la propia etiqueta.

Ajustes de activación

El activador es el botón que se genera cuando no hay existencias de un artículo. Este botón incluirá el texto: "Notificarme" por defecto, pero puede modificarse con el mensaje que quieras. El código predeterminado (dentro del snippet 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 (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 "Add to Cart", sustituye este texto por el ID del elemento.
• reemplazar_anclaje
  Si se configura como false, verás tanto un botón de "Agotado" como un botón "Notificarme". Cuando se configura como true, el botón "Notificarme" sustituirá al botón "Agotado".

Ajustes de visibilidad del activador

Si quieres elegir con qué productos se muestra el botón reposición 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 ambas.

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"
});

• incluir_en_etiquetas
  Esta etiqueta garantiza que el botón de reposición muestra solo los artículos que incluyen etiquetas específicas. En el ejemplo anterior, solo los productos etiquetados con "perro," "gato" o ambos tendrán un botón de reposición.
• exclude_on_tags
  Es la inversa de la anterior. El uso de exclude_on_tags garantizará que el botón reposición se muestre en todos los productos excepto en los especificados.

Ajustes modales

El modal es el formulario emergente que aparece cuando alguien pulsa el botón para que se le notifique que un artículo vuelve a estar disponible.

Estos son los ajustes por defecto del fragmento que puedes 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 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 Email.
• etiqueta_botón
  El texto dentro del botón de envío para este formulario emergente.
• etiqueta_suscripción_éxito
  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.
• etiqueta_cerrar
  El texto del botón de cierre; por defecto es "Cerrar".
• color_fondo
  El color de fondo del formulario emergente; por defecto es blanco.
• color_texto
  El color del texto del formulario emergente; por defecto es negro.
• color_texto_botón
  El color del texto del botón en el formulario emergente; por defecto es blanco.
• color_de_fondo_del_botón
  El color de fondo del botón de envío del formulario; por defecto 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; por defecto es rojo pálido.
• color_texto_error
  El color del texto del mensaje de error que se muestra cuando hay un error al enviar el formulario; por defecto es rojo.
• color_de_fondo_de_éxito
  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.
• color_texto_éxito
  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.
• familia_de_tipos
  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 tipográfica en la que está formateado el texto de la cabecera; Helvetica es un ejemplo de familia tipográfica.

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". Por defecto, el botón aparecerá al lado, debajo o sustituirá al actual botón 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>

Si quieres

Opcional: pedir a los clientes que se suscriban a tus acciones de marketing

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

Si los compradores piden que se les avise cuando se reponga un artículo, pero luego empiezan a recibir regularmente contenidos de marketing tuyos, 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:

Para implementarlo, necesitarás incorporar algo a tu snippet añadiendo tu ID de Lista en la sección "klaviyo.init" después de tu ID de cuenta.

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

   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 desea añadir suscriptores. Normalmente, esta debería ser tu lista principal de la newsletter.
3. El fragmento modificado (consulta la línea 5) tendrá el siguiente aspecto:

   <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". Por defecto, esta casilla dirá: "Suscribirme a la newsletter". Lo ideal es asegurarse de que este texto es 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 por defecto, mientras que false la dejará sin marcar y requerirá que el usuario la seleccione manualmente.

   modal: {
       subscribe_checked: true
           ...
       }

¿Puedo utilizar el ajuste "continuar vendiendo cuando se agoten existencias" de Shopify y el ajuste de reposición de Klaviyo?

El flujo de reposición de Klaviyo funciona detectando cuando hay un cambio en los niveles de inventario desde cero a un nivel determinado configurado en tu regla de inventario mínima. Si activas el ajuste de Shopify "Seguir vendiendo cuando se agoten existencias", esto hace que el producto esté disponible para su compra, aunque no tengas existencias en la lista de inventario, por lo que el botón "Notificarme" no aparecerá. 

En este caso, el flujo de reposición 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 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á activo el ajuste "Seguir vendiendo cuando no hay existencias, esto marcará el producto como disponible, de forma que la ventana modal de reposición de Klaviyo no aparecerá en la web para este producto cuando el producto esté disponible para su compra, independientemente de los niveles de inventario.

Consejos para solucionar problemas

La apariencia del botón de reposición variará en función del tema de Shopify concreto que utilice tu tienda. Si estás usando un tema personalizado, puedes necesitar personalizar el código de tema para garantizar que la función reposición funciona correctamente.

Configura tu flujo

A continuación, configura tu flujo de reposición en Klaviyo, que se activará siempre que alguien se suscribe para ser notificado cuando vuelva a haber existencias de un producto. 

Prueba la instalación de reposición

Para probar que tu instalación de reposición funciona, haz lo siguiente:

1. Configura un test de producto en tu tienda
2. Pon a cero el inventario del producto
3. Comprueba la página de producto para ver si el botón "Notificarme" aparece
4. Pulsa el botón "Notificarme" y rellena el formulario
5. Añade suficiente inventario para cumplir las reglas de reposición en la configuración de tu cuenta 
6. Comprueba que has recibido el mensaje de reposición que recibiste

Resultado

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

Recursos adicionales

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