Muestra la imagen de vista previa de personalización de un cliente en un correo electrónico de Omnisend utilizando propiedades de línea de pedido de Shopify.
Cómo funciona
teeinblue guarda los datos de personalización en el pedido de Shopify como propiedades de línea de pedido.Omnisend recibe todos los datos de pedido en bruto con los eventos de pedido realizado y pedido pagado de Shopify.
Puedes usar un bucle Liquid en un bloque de HTML personalizado para encontrar la propiedad _customization_image y mostrar la imagen en un correo electrónico.
Esta configuración utiliza los datos de eventos nativos de Shopify de Omnisend.No requiere código personalizado fuera del correo electrónico, middleware, un evento personalizado, un servicio de retransmisión API o un complemento de pago separado.
teeinblue añade cuatro propiedades al artículo de línea personalizado:
_customization_id_tib_fulfilled_sku_customization_image_tib_design_link_1
4a1 Este artículo se centra en _customization_image, que es la propiedad utilizada para mostrar la vista previa de la Personalizacin del Cliente.También puedes extraer las otras propiedades con el mismo método de bucle y coincidencia.
Antes de empezar
Asegúrate de que:
Tu tienda de Shopify está conectada a Omnisend.
teeinblue está instalado.
Al menos un producto personalizado está configurado en teeinblue.
Puedes realizar un pedido de prueba real en Shopify.
Tu cuenta de Omnisend tiene acceso a Flujos de Automatización y bloques de HTML personalizado.
Esta integración involucra tres plataformas.Aquí está lo que cada uno requiere:
Plataforma | Requisito |
teeinblue | Cualquier plan.Las propiedades de línea de pedido son funcionalidad básica, disponibles en todos los niveles. |
Shopify | Cualquier plan.Las propiedades de línea de pedido son una característica estándar de Shopify, no vinculada a un nivel específico de tienda. |
Omnisend | Cualquier plan, incluyendo Gratis.Los Flujos de Automatización, bloques de HTML personalizado y bucles Liquid están disponibles en todos los planes de Omnisend. |
Esta configuración funciona con cualquier plan de teeinblue y cualquier plan de Omnisend, incluyendo Gratis.
Siempre usa un estándarHTML personalizado bloque para teeinblue. No uses unContenido dinámico bloque. Aunque la función de Contenido dinámico de pago de Omnisend admite contenido condicional, no admite los bucles Liquid necesarios para iterar a través deevent.raw.line_items y sus propiedades.
Proceso de Configuración
Nota: Tu cuenta de Omnisend debe estar conectada a Shopify para que la integración funcione.
Paso 1. Instala teeinblue en tu tienda de Shopify.
Paso 2. Crea un nuevo producto personalizado o habilita la personalización para un producto existente. Combina una base de producto, como una camiseta o una taza, con una plantilla de arte, o sube tu propio diseño.
Paso 3. Prueba que la conexión funcione.
Realiza un pedido de prueba a través del flujo de pago del producto personalizado.Luego verifica la actividad del contacto en Omnisend.Deberías ver un pedido realizado o pedido pagado de Shopify.
Una vez hecho, los datos de personalización de teeinblue se incluyen en los pedidos realizados a través del producto personalizado.No se requiere configuración de datos adicional.Continúa con la configuración del flujo y del correo electrónico a continuación.
Elige la configuración de tu flujo
Puedes añadir la imagen a un flujo separado o incluirla en un correo electrónico de confirmación de pedido existente.
Configuración | Úsalo cuando | Filtros de activación |
Flujo separado | El correo electrónico debe enviarse solo para pedidos personalizados | Añade los filtros |
Flujo de confirmación de pedido existente | El correo electrónico debe manejar tanto pedidos personalizados como estándar | No añadas los filtros de personalización |
Usa un Flujo Separado Para Pedidos Personalizados
Elige esta configuración cuando quieras que el correo electrónico se envíe solo para pedidos que contengan una imagen de personalización de teeinblue.
Ve a Automatización.
Selecciona Crear Flujo.
Elige Crear desde cero.
Selecciona Pedido realizado o Pedido pagado como el trigger.
Establece el origen del evento en Shopify.
Agrega estos filtros de trigger:
Raw ➡ Artículos de línea ➡ Propiedades ➡ Nombre es
_customization_imageRaw ➡ Artículos de línea ➡ Propiedades ➡ Valor existe
Agrega una acción de Correo electrónico.
Abre el Editor de correos electrónicos.
Agrega un bloque de HTML Personalizado.
Pega el fragmento de imagen de la siguiente sección.
Habilita el flujo.
Los filtros permiten que solo los pedidos con una propiedad de imagen de personalización coincidente entren en este flujo.La versión de respaldo del código es opcional en esta configuración.
Agregar Imagen al Flujo de Confirmación de Pedido Existente
Elige esta configuración cuando el mismo correo electrónico deba manejar cada pedido.
Abre el flujo de confirmación de pedido existente de Shopify.
Usa el trigger existente Pedido realizado o Pedido pagado.
No agregues los filtros de trigger
_customization_image.Agrega el bloque de imagen al correo electrónico.
Usa la versión de respaldo del código.
Guarda y habilita el flujo.
Esta configuración maneja diferentes tipos de pedidos:
Los productos personalizados muestran sus imágenes de personalización.
Los productos estándar se omiten porque no tienen
_customization_image.Los pedidos sin datos de personalización muestran el mensaje de respaldo.
Esto también funciona cuando un pedido contiene tanto productos personalizados como no personalizados.
Mostrar la Imagen de Personalización
Agrega un bloque de HTML Personalizado al correo electrónico y pega este código:
[% for li in event.raw.line_items %]
[% for prop in li.properties %]
[% if prop.name == '_customization_image' %]
<img src="[[ prop.value ]]" alt="Your customization">
[% endif %]
[% endfor %]
[% endfor %]
Usa un bloque de HTML Personalizado estándar.No necesitas el bloque dedicado de Diseño de Contenido Dinámico.
🔁 Cómo funciona el código:
Omnisend recibe las propiedades de línea de pedido de Shopify como un array denombre ypares de valores.El bucle externo verifica cada producto en el pedido, y el bucle interno verifica cada propiedad adjunta a ese producto.Cuando el código encuentra_customization_image, utiliza elvalor coincidente como la URL de la imagen.
Debido a que el código verifica cada artículo de línea, el producto personalizado no necesita aparecer primero en el pedido.
El selector de etiquetas de personalización estándar no expone estas propiedades de línea de pedido personalizadas.Ingresa el bucle Liquid directamente en el bloque HTML Personalizado.
Usa una Imagen Clicable
Para enlazar la imagen a su URL de origen, usa esta versión:
[% for li in event.raw.line_items %]
[% for prop in li.properties %]
[% if prop.name == '_customization_image' %]
<a href="[[ prop.value ]]" target="_blank" rel="noopener">
<img src="[[ prop.value ]]" alt="Your customization" style="max-width:220px;">
</a>
[% endif %]
[% endfor %]
[% endfor %]
Agrega un Mensaje de Respaldo
Usa esta versión cuando el correo electrónico se pueda enviar para pedidos sin datos de personalización:
[% assign found_image = "" %]
[% for li in event.raw.line_items %]
[% for prop in li.properties %]
[% if prop.name == '_customization_image' %]
[% assign found_image = prop.value %]
[% endif %]
[% endfor %]
[% endfor %]
[% if found_image != "" %]
<img src="[[ found_image ]]" alt="Your customization">
[% else %]
<p>Thanks for your order!</p>
[% endif %]
Sin un respaldo, el bloque no renderiza contenido cuando el pedido no tiene imagen de personalización.
Mostrar Otra Propiedad de teeinblue
Puedes mostrar la imagen y el enlace del archivo de diseño en el mismo bucle:
[% for li in event.raw.line_items %]
[% for prop in li.properties %]
[% if prop.name == '_customization_image' %]
<img src="[[ prop.value ]]" alt="Your customization">
[% endif %]
[% if prop.name == '_tib_design_link_1' %]
<p>
<a href="[[ prop.value ]]">Download your print-ready design</a>
</p>
[% endif %]
[% endfor %]
[% endfor %]
Puedes usar el mismo patrón para encontrar otras propiedades de línea de pedido cambiando el valor en la condición:
prop.name == 'property_name'
Pedidos de múltiples artículos
El bucle anidado verifica cada línea del pedido.No depende de la posición del producto en el carrito.
Este comportamiento fue confirmado con un pedido real que contiene:
Un producto teeinblue personalizado con las cuatro propiedades de personalización.
Un producto no relacionado sin propiedades de personalización.
El resultado fue:
La imagen del producto personalizado se mostró correctamente y solo una vez.
El producto no relacionado no mostró imagen.
No hubo fuga de datos entre los artículos.
El producto personalizado no necesitaba estar primero en el pedido.
Importante: No utilices un índice codificado comoevent.raw.line_items[0].El La referencia [0] solo verifica el primer artículo.Si el producto personalizado no es el primero, la imagen puede no aparecer.
Combina la imagen con el título, precio y cantidad
El título del producto, precio, cantidad e imagen de personalización han sido confirmados juntos en un correo electrónico real entregado, incluyendo con una cantidad mayor a uno en un solo artículo:
[% for li in event.raw.line_items %]
<p><strong>[[ li.title ]]</strong> – qty [[ li.quantity ]] × [[ li.price ]] [[ order.currency ]]</p>
[% for prop in li.properties %]
[% if prop.name == '_customization_image' %]
<img src="[[ prop.value ]]" alt="[[ li.title ]]">
[% endif %]
[% endfor %]
[% endfor %]
Alcance verificado
Bucle solo de imagen: verificado.
Pedidos de múltiples artículos: verificado.
Imagen con título y precio del producto: verificado.
Imagen con título, precio y cantidad del producto: verificado.
Verifica la integración
Utiliza un pago real de Shopify para probar la configuración.
Realiza un pedido con un producto teeinblue personalizado.
Verifica el historial de eventos del contacto en Omnisend.
Confirma que el evento contiene datos poblados en
line_items[].properties.Verifica el correo electrónico entregado.
Confirma que la imagen se carga correctamente.
Prueba un pedido con múltiples artículos.
Si utilizas un flujo de trabajo de confirmación de pedido compartido, prueba un pedido sin datos de personalización.
La vista previa dinámica y los correos electrónicos entregados pueden producir resultados diferentes.Utiliza un correo electrónico real entregado como la verificación final.
También puedes crear un segmento usando esta condición para confirmar que los datos del evento llegaron: Raw Line Items Properties Name es _customization_image
Solución de problemas
La imagen no aparece
Verifica lo siguiente:
El pedido de Shopify contiene
_customization_image.La URL de la imagen en
prop.valueestá disponible.El código está dentro de un bloque de HTML personalizado.
El flujo de trabajo utiliza un evento real de Pedido realizado o Pedido pagado.
El correo electrónico fue probado con un producto personalizado.
El código no utiliza un índice codificado
[0].Los filtros de activación coinciden con la configuración del flujo de trabajo.
El producto personalizado no es el primero en el pedido
Verifica si el correo electrónico utiliza una referencia como:
event.raw.line_items[0]
Esto solo verifica el primer artículo.Reemplázalo con el bucle anidado de este artículo para que Omnisend verifique cada artículo.
El flujo de trabajo no envía
Verifica el limitador de frecuencia del flujo de trabajo: Flujo de Automatización Configuración Frecuencia
El limitador puede omitir envíos de prueba repetidos al mismo contacto.Esto puede parecer un fallo de activación.
El contenido del correo electrónico editado por API desaparece
Si editas el correo electrónico a través de una API mientras el Editor de correos electrónicos está abierto en otra pestaña del navegador, el guardado automático puede sobrescribir tus cambios.
Cierra el editor antes de hacer ediciones basadas en API.Verifica nuevamente el contenido del correo electrónico antes de enviar una prueba.
Un evento de pedido sintético no funciona
Una solicitud de API que crea un evento sintético de pedido realizado puede ser aceptada sin un error, pero aún así fallar en procesar o adjuntar al contacto.
Utiliza un pago genuino de Shopify para generar un evento de pedido utilizable.
FAQ
¿Necesito un evento personalizado?
No. La configuración utiliza el evento de pedido nativo de Shopify recibido por Omnisend.
¿Necesito middleware o un servicio de retransmisión?
No. Los datos de teeinblue ya están incluidos en las propiedades de línea del pedido de Shopify.
¿Debería crear un flujo de trabajo separado?
Crea un flujo de trabajo separado para cuando el correo electrónico deba enviarse solo para pedidos personalizados.Agrega los filtros de disparador _customization_image para ese flujo de trabajo.
¿Puedo agregar la imagen a un flujo de trabajo de confirmación de pedido existente?
Sí. No agregues los filtros de personalización si el flujo de trabajo debe manejar todos los pedidos.Utiliza la versión de respaldo del código para pedidos sin datos de personalización.
¿El selector de personalización estándar admite esta propiedad?
No. El selector no expone propiedades de línea personalizadas.Utiliza un bloque HTML personalizado e ingresa el bucle Liquid manualmente.
¿Funciona el bucle con múltiples líneas de artículos?
Sí. El bucle verifica cada línea de artículo y omite productos sin _customization_image.
¿El producto personalizado necesita estar primero en el carrito?
No. El bucle anidado no depende de la posición del carrito.Evita usar un índice [0] codificado, que verifica solo el primer artículo de línea.
¿Puedo usar un evento de API sintético para pruebas?
No. Utiliza un pago genuino de Shopify para generar un evento de pedido utilizable.
¿No encontraste la respuesta a tu pregunta? Contacta a nuestro equipo de soporte a través del chat en la aplicación o en [email protected] – estamos disponibles 24/7.