Cómo añadir un formulario integrado de Klaviyo a tu sitio de BigCommerce

Qué aprenderás

Aprende a añadir un formulario incrustado de Klaviyo a tu sitio de BigCommerce, lo que requiere crear el formulario en Klaviyo y, luego, pegar su código de inserción en los archivos de tu sitio donde quieras que aparezca (p. ej., el pie de página).

Esta guía muestra cómo sustituir el formulario de registro predeterminado de BigCommerce por un formulario incrustado de Klaviyo.

Antes de empezar

Antes de crear un formulario incrustado en Klaviyo, primero debes integrar con BigCommerce y, después, habilitar la funcionalidad de formularios de registro (también llamada "seguimiento in situ"). Si marcaste el ajuste Añadir automáticamente JavaScript in situ de Klaviyo al integrar con BigCommerce, ya está todo listo.

Si no:

1. En Klaviyo, selecciona la pestaña Integraciones.

2. Haz clic en BigCommerce.
3. Marca la opción Añadir automáticamente el javascript onsite de Klaviyo.
4. Pulsa Guardar.

El ejemplo de este artículo utiliza el tema predeterminado Cornerstone de BigCommerce. Ten en cuenta que tu tema puede ser diferente, junto con los nombres de algunos archivos o las ubicaciones de fragmentos de código.

Añadir el código de integración del formulario a tu sitio web

Primero, crea y publica un formulario integrado en Klaviyo. En esta sección se tratarán los siguientes pasos para pegar el código de inserción de tu formulario en tu sitio de BigCommerce para que se muestre y sincronice los datos correctamente.

1. Si aún no lo has hecho, copia el código de inserción de tu formulario insertado. Puedes acceder al código de inserción del formulario abriendo el formulario en el editor y haciendo clic en la sección Segmentación y comportamiento.
   

2. Ve a tu sitio web y localiza el formulario de registro predeterminado de BigCommerce. Si utilizas un tema de Cornerstone, está en el pie de página del sitio.
   

• Si no ves un formulario predeterminado en tu sitio web:
  • Abre tu panel de BigCommerce.
  • Ve a Marketing > marketing por email
  • Marca la casilla denominada Permitir suscripciones al boletín. Esto te permite recopilar el consentimiento de email de los visitantes en tu sitio web y también añade un cuadro de registro de email predeterminado en tu sitio de BigCommerce. Si esta casilla ya está marcada y aun así no ves un formulario predeterminado, es posible que tu tema no incluya uno.

3. Abre tu panel de BigCommerce y, a continuación, ve a Storefront > Themes.
4. En la sección Tema actual, haz clic en el menú desplegable Avanzado y selecciona Editar archivos del tema.
   

• Si usas un tema predeterminado, no podrás seleccionar esta opción. En su lugar:
  
  • Haz clic en Hacer una copia, ponle un nombre y luego selecciona Guardar una copia.
  • Una vez que se haya añadido a la sección Themes, selecciona los 3 puntos y, a continuación, elige Editar archivos de tema. Ten en cuenta que las ediciones que hagas solo se aplicarán al tema que estés editando, y tendrás que aplicar el tema a tu sitio web para ver los cambios reflejados.

5. En la barra lateral izquierda, abre el archivo correspondiente a donde aparecía el formulario predeterminado en tu sitio. Si el formulario predeterminado estaba ubicado en el pie de página, como en el ejemplo, ve a plantilla > components > common y haz clic en el archivo footer.html.
6. Utiliza el atajo de búsqueda (Command+F en Mac o Control+F en Windows) para buscar la palabra «newsletter» dentro del archivo de pie de página.
   

7. En el código que aparece debajo, busca la referencia al formulario. En el ejemplo, se hace referencia al formulario en una ruta de archivo diferente: {{> components/common/subscription-form}}.
   

8. En la barra lateral izquierda, sigue la ruta del archivo a la que se hace referencia en el código (en este ejemplo, selecciona components > common > subscription-form). Aquí verás los componentes reales del formulario predeterminado.
   • Como el encabezado y el idioma del formulario predeterminado coinciden con los estilos del resto de nuestro sitio, solo vamos a sustituir el campo de entrada del formulario. En el código fuente, puedes ver que el campo de entrada del formulario predeterminado está incluido en el elemento <form>.
9. Resalta todo lo que haya entre las etiquetas <form> de apertura y cierre y, a continuación, pega el código de inserción que copiaste de Klaviyo para sustituir el texto resaltado.
   

10. Haz clic en Guardar y aplicar archivo para aplicar estos cambios a tu sitio web.
    • Si el botón solo dice Guardar archivo, entonces el archivo que acabas de editar aún no es tu Tema actual. Tendrás que hacer clic en Guardar archivo y, luego, desplazarte hacia arriba y seleccionar Editar archivos del tema > Guardar > Usar como tema activo en la esquina superior derecha para aplicar el tema a tu sitio web.

Una vez que hayas pegado el código de inserción, lo hayas guardado y hayas aplicado los cambios en BigCommerce, vuelve a tu sitio web y actualiza la página. Tu formulario incrustado de Klaviyo se mostrará en tu sitio y empezará a añadir nuevos suscriptores a la lista de Klaviyo vinculada al formulario.

Si no ves tu formulario, consulta solucionar problemas de formularios insertados.

Próximos pasos

A continuación, crea un flujo de serie de bienvenida para causar un impacto inmediato en tus nuevos suscriptores.

Recursos adicionales