La aplicación Connectif Checkout Extension es una aplicación para personalizar la pantalla de pago en Shopify, que sirve para mostrar en la página de checkout un componente personalizado con recomendaciones de productos enviadas desde Connectif.
En este artículo, se explica cómo configurar la extensión Connectif Checkout en tu eCommerce para poder añadir el componente de recomendación de productos.
Para configurar este componente, deberás tener una cuenta de Shopify Plus. Además, para que el eCommerce pueda recibir eventos de productos recomendados, deberás crear y configurar los workflows necesarios con el nodo “Compartir datos”.
1. Propiedades
- En las integraciones con Shopify existe una extensión de interfaz de usuario compatible con Shopify Plus que te permite configurar en tu tienda Shopify bloques personalizados para cada contacto en la página de checkout.
- Este bloque mostrará los productos personalizados y permitirá añadir directamente los productos al carrito, siempre y cuando en tu integración con Shopify tengas configurado el registro de los productos en Connectif mediante ID.
- Si están configurados para registrarse mediante SKU, el bloque mostrará un botón para "Ver" el producto, pero no para añadirlo al carrito.
Si necesitas más información sobre la configuración del registro de productos en Connectif en tu integración con Shopify, revisa este artículo.
- Para poder mostrar el bloque de productos, deberás configurar el workflow encargado de ello en Connectif, por medio del nodo "Compartir Datos" (ver punto 2.2.).
- Si no se configura el workflow, en tu tienda de Shopify podrás ver una previsualización del bloque, pero este no se mostrará a tus contactos.
- Además, aunque esta información no se muestre, el nodo "Compartir datos" generará la actividad en el perfil del contacto y en tu Tienda de Connectif.
2. Cómo se usa en Connectif
2.1. Configurar la extensión de Checkout en Shopify
Asegúrate de tener activa la integración con Shopify en tu Tienda de Connectif antes de configurar este componente. Además, si quieres que los contactos puedan añadir los productos a su carrito desde la página de checkout, deberás tener configurado el registro de productos mediante ID.
1. Dirígete a tu cuenta de Shopify, ve a Pantalla de pago y haz clic en Personalizar. También puedes acceder a través de "Tienda online > Temas > Personalizar tema" y seleccionando la página de pago.
2. En el menú lateral, dirígete a Aplicaciones.
3. Busca "Connectif Checkout Extension" y añádela.
4. Una vez completada la instalación, podrás añadir el elemento del componente personalizado. Para ello, en el menú lateral, dirígete a Secciones.
5. Haz clic en Añadir bloque de aplicación en el lugar donde desees añadir el bloque y, en el desplegable selecciona Connectif Checkout Extension.
5. Configura los parámetros del componente. Los cambios se irán mostrando en tiempo real en la previsualización.
- Identificador: para indicar el ID del nodo "Compartir datos" del que se extraerá la información para mostrar productos. Este debe ser el mismo que configures en dicho nodo, si no, no funcionará.
- Número de productos: para configurar la cantidad de productos que mostrará el bloque.
- Ratio de aspecto de la imagen: para seleccionar la proporción de la imagen que se mostrará en el bloque.
- Image fit: para seleccionar cómo se mostrará la imagen dentro del contenedor.
- Mostrar descripción de producto: para escoger entre mostrarla u ocultarla.
- Estilo del botón: para elegir el estilo del botón, según lo que tengas configurado para tu checkout en Shopify.
2.1.1. Desactivar la opción WebPixel
Si tienes activa la extensión en de Checkout de Shopify, puedes desactivar el evento page visit del Web Pixel, para evitar que se dupliquen los eventos de Page Visit en Connectif.
Si activas la extensión de Checkout, te recomendamos desactivar la extensión WebPixel para evitar duplicidades en la recogida de datos sobre las visitas a la página de checkout.
1. En tu cuenta de Shopify, dirígete a la "Aplicaciones y canales de ventas" y accede a la Configuración de tu integración con Connectif.
2. En la sección Web Pixel, marca la casilla Deshabilitar evento page visit en el checkout.
Esta opción solo estará disponible si tienes una cuenta de Shopify Plus, para que puedas desactivarla en caso de activar la extensión de checkout.
3. Haz clic en Guardar ajustes.
2.2. Cómo mostrar el componente personalizado a tus contactos
Para que el componente se muestre a tus contactos con los productos personalizados, además de añadir el bloque de la aplicación en la configuración de tu página de pago en Shopify, deberás contar con un workflow encargado de ello.
Podrás añadir varios bloques personalizados a tu página de checkout, siempre y cuando cada uno de ellos se vincule a un nodo "Compartir datos", siguiendo el procedimiento que se muestra en este ejemplo.
1. En tu Tienda de Connectif, dirígete a Workflows y crea un nuevo Workflow Personalizado.
2. En la interfaz del nodo "Inicio" determina la audiencia a la que quieres mostrar este contenido cuando visiten la página de checkout. En nuestro ejemplo, hemos determinado que la estrategia se active para Toda mi lista, y para Todos los contactos existentes y los nuevos.
3. Añade a tu workflow un nodo "Al visitar página web" y conéctalo al nodo "Inicio".
4. En su interfaz, escoge la opción Cualquier página que comience por, e introduce la URL de tu página de checkout. En Limitaciones, desactiva la opción Desactivar tras dispararse. De este modo, cualquier contacto que visite la página de checkout entrará el workflow, tantas veces como visite la página de checkout.
Asegúrate de activar en la estrategia solo aquellas páginas donde vas a tener el contenedor el nodo "Compartir Datos".
5. Añade un nodo "Obtener productos" y conéctalo al nodo "Al visitar página web".
6. En su interfaz , selecciona de los casos de uso disponibles aquel o aquellos que más convengan a tu estrategia y configúralo.
Si necesitas más información sobre cómo configurar el nodo "Obtener productos", revisa este artículo.
7. Añade un nodo "Compartir datos" y conéctalo al nodo "Obtener productos".
8. En la interfaz del nodo, asigna un Identificador que poder utilizar después para recuperar los datos del nodo y guárdalo para poder vincularlo en Shopify. Configura también el Nodo de Origen y escoge los datos que quieres compartir con Shopify.
Si necesitas más información sobre cómo configurar el nodo "Compartir Datos", revisa este artículo.
9. Guarda y activa tu workflow.
10. Regresa a tu cuenta de Shopify, a la configuración del componente que hayas añadido a tu página de pago. En el apartado Identificador, introduce el ID que has asignado al nodo "Compartir Datos". De este modo, ese bloque obtendrá la información del nodo "Compartir Datos" y la utilizará para personalizar el bloque de productos del checkout.
¡Enhorabuena!
Has llegado al final de la lección.
¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Guia para integrar con Shopify, para aprender paso a paso cómo integrar tu Tienda de Connectif con este CMS.
- Nodo "Compartir Datos", para entender el funcionamiento de este nodo.
- Nodo "Obtener Productos", para aprender cómo configurarlo y obtener los productos deseados en cada caso.
- Productos automáticamente relacionados, para entender cómo funciona el mecanismo de relación automática de productos de Connectif.