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

Hola: 12 minutos de lectura
|
Actualizado 17 feb 2025, 7:55 EST
Qué aprenderás 

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

Antes de empezar

La instalación de la función de reposición de stock solo es compatible con ciertos temas gratuitos de Shopify, y no con tiendas de Shopify que utilicen temas personalizados. En estos momentos, la asistencia de Klaviyo no puede ayudar con la implementación de esta función para las tiendas que utilizan temas personalizados. Para comprobar qué tema de Shopify estás usando, tienes a tu disposición el detector de temas de Shopify

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

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.

Si aún no lo has hecho, antes de seguir leyendo este artículo consulta nuestra guía sobre la introducción a Shopify para saber cómo realizar la integración.

Antes de instalar el fragmento

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

Vídeo de reposición de stock para Shopify

Tutorial en el que se muestra cómo añadir el fragmento de reposición de stock de Klaviyo a tu tienda Shopify
Instalación del fragmento

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>
  1. 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.
    Pestaña de claves de API en la configuración de la cuenta
  2. 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

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.

Si deseas replicar el estilo de tu tema de Shopify, descubre cómo personalizar fragmentos de código de reposición de stock para temas de Shopify gratuitos.

Ajustes de activador

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

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.

Las etiquetas distinguen entre mayúsculas y minúsculas. Si utilizas parámetros de etiqueta, escribe la etiqueta exactamente como aparece en Shopify.

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

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.
Ventana modal emergente de reposición de stock antes de su personalización, con {product_name} en la parte superior y «Notificarme cuando esté disponible» con fondo azul

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»

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

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:

Ventana modal de reposición de stock con la casilla para suscribirse a la lista de correos marcada

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

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

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.

Qué hacer si usas el tema Retina

Qué hacer si usas el tema Retina

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

Qué hacer si usas un tema que oculta un producto si todas las variantes están agotadas

Qué hacer si usas un tema que oculta un producto si todas las variantes están agotadas

Si tu tema de Shopify oculta un producto cuando todas las variantes están agotadas, tendrás que identificar esta área del código en tu archivo product.liquid y editarla para mostrar todos los productos, independientemente del nivel de existencias.

Configura tu flujo

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

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

Resultado

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

Recursos adicionales

Recursos adicionales

¿Te ha resultado útil este artículo?
Utiliza este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar con el servicio de asistencia.

Descubre más de Klaviyo

Comunidad
Conecta con compañeros, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Formación en directo
Únete a una sesión en directo con expertos de Klaviyo para conocer las prácticas recomendadas, cómo configurar funciones clave y mucho más.
Asistencia

Accede al servicio de asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia por chat/virtual
La disponibilidad varía según la ubicación y el tipo de plan