Affichez l'image d'aperçu de la personnalisation teeinblue d'un client dans un email Omnisend en utilisant les propriétés de ligne d'article Shopify.
Comment ça marche
teeinblue enregistre les données de personnalisation sur la commande Shopify en tant que propriétés de ligne d'article.Omnisend reçoit les données brutes complètes de la commande avec les événements de commande passée et de commande payée de Shopify.
Vous pouvez utiliser une boucle Liquid dans un bloc HTML personnalisé pour trouver la propriété _customization_image et afficher l'image dans un email.
Cette configuration utilise les données d'événements Shopify natives d'Omnisend.Elle ne nécessite pas de code personnalisé en dehors de l'email, de middleware, d'un événement personnalisé, d'un service de relais API ou d'un module complémentaire payant séparé.
teeinblue ajoute quatre propriétés à l'article de ligne personnalisé :
_customization_id_tib_fulfilled_sku_customization_image_tib_design_link_1
💁♂️ Cet article se concentre sur _customization_image, qui est la propriété utilisée pour afficher l'aperçu de personnalisation du client.Vous pouvez également extraire les autres propriétés avec la même méthode de boucle et de correspondance.
Avant de commencer
Assurez-vous que :
Votre boutique Shopify est connectée à Omnisend.
teeinblue est installé.
Au moins un produit personnalisé est configuré dans teeinblue.
Vous pouvez passer une véritable commande test Shopify.
Votre compte Omnisend a accès aux workflows d'automatisation et aux blocs HTML personnalisés.
Cette intégration implique trois plateformes.Voici ce que chacune nécessite :
Plateforme | Exigence |
teeinblue | Tout forfait.Les propriétés de ligne d'article sont une fonctionnalité de base, disponible à tous les niveaux. |
Shopify | Tout forfait.Les propriétés de ligne d'article sont une fonctionnalité standard de Shopify, non liée à un niveau de boutique spécifique. |
Omnisend | Tout forfait, y compris gratuit.Les workflows d'automatisation, les blocs HTML personnalisés et les boucles Liquid sont disponibles sur tous les forfaits Omnisend. |
Cette configuration fonctionne avec n'importe quel forfait teeinblue et n'importe quel forfait Omnisend, y compris gratuit.
Utilisez toujours un standardBloc HTML personnalisé pour teeinblue. Ne pas utiliser unBloc de contenu dynamique. Bien que la fonctionnalité de contenu dynamique payante d'Omnisend prenne en charge le contenu conditionnel, elle ne prend pas en charge les boucles Liquid nécessaires pour itérer à traversevent.raw.line_items et leurs propriétés.
Processus de configuration
Remarque : Votre compte Omnisend doit être connecté à Shopify pour que l'intégration fonctionne.
Étape 1. Installez teeinblue sur votre boutique Shopify.
Étape 2. Créez un nouveau produit personnalisé ou activez la personnalisation pour un produit existant. Combinez une base de produit, comme un T-shirt ou une tasse, avec un modèle d'œuvre d'art, ou téléchargez votre propre design.
Étape 3. Testez que la connexion fonctionne.
Passez une commande test via le flux de paiement du produit personnalisé.Puis vérifiez l'activité du contact dans Omnisend.Vous devriez voir un événement de commande passée ou payée Shopify.
Une fois terminé, les données de personnalisation teeinblue sont incluses dans les commandes passées via le produit personnalisé.Aucune configuration de données supplémentaire n'est requise.Continuez avec la configuration du workflow et de l'email ci-dessous.
Choisissez votre configuration de workflow
Vous pouvez ajouter l'image à un workflow séparé ou l'inclure dans un email de confirmation de commande existant.
Configuration | Utilisez-le lorsque | Filtres de Déclencheur |
Workflow séparé | L'email ne doit être envoyé que pour les commandes personnalisées | Ajoutez les filtres |
Workflow de confirmation de commande existant | L'email doit gérer à la fois les commandes personnalisées et standard | Ne pas ajouter les filtres de personnalisation |
Utilisez un workflow séparé pour les commandes personnalisées
Choisissez cette configuration lorsque vous souhaitez que l'email soit envoyé uniquement pour les commandes contenant une image de personnalisation teeinblue.
Allez à Automatisation.
Sélectionnez Créer un workflow.
Choisissez Créer à partir de zéro.
Sélectionnez Commande passée ou Commande payée comme déclencheur.
Définissez l'origine de l'événement sur Shopify.
Ajoutez ces filtres de déclencheur :
Brut → Articles de ligne → Propriétés → Nom est
_customization_imageBrut → Articles de ligne → Propriétés → Valeur existe
Ajoutez une action Email.
Ouvrez l'Éditeur d'emails.
Ajoutez un bloc HTML personnalisé.
Collez le code de l'image de la section suivante.
Activez le workflow.
Les filtres permettent uniquement aux commandes avec une propriété d'image de personnalisation correspondante d'entrer dans ce workflow.La version de secours du code est optionnelle dans cette configuration.
Ajouter une image au workflow de confirmation de commande existant
Choisissez cette configuration lorsque le même email doit gérer chaque commande.
Ouvrez le workflow de confirmation de commande Shopify existant.
Utilisez le déclencheur Commande passée ou Commande payée existant.
Ne pas ajouter les filtres de déclencheur
_customization_image.Ajoutez le bloc image à l'email.
Utilisez la version de secours du code.
Enregistrez et activez le workflow.
Cette configuration gère différents types de commandes :
Les produits personnalisés affichent leurs images de personnalisation.
Les produits standard sont ignorés car ils n'ont pas de
_customization_image.Les commandes sans données de personnalisation affichent le message de secours.
Cela fonctionne également lorsqu'une commande contient à la fois des produits personnalisés et non personnalisés.
Afficher l'image de personnalisation
Ajoutez un bloc HTML personnalisé à l'email et collez ce code :
[% 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 %]
Utilisez un bloc HTML personnalisé standard.Vous n'avez pas besoin du bloc Disposition de contenu dynamique dédié.
🔋 Comment le code fonctionne :
Omnisend reçoit les propriétés des articles de ligne Shopify sous forme de tableau denom etpaires de valeurs.La boucle extérieure vérifie chaque produit dans la commande, et la boucle intérieure vérifie chaque propriété attachée à ce produit.Lorsque le code trouve_customization_image, il utilise la valeur correspondantecomme URL de l'image.
Parce que le code vérifie chaque article de ligne, le produit personnalisé n'a pas besoin d'apparaître en premier dans la commande.
Le sélecteur de balises de personnalisation standard n'expose pas ces propriétés d'articles de ligne personnalisés.Entrez la boucle Liquid directement dans le bloc HTML personnalisé.
Utilisez une image cliquable
Pour lier l'image à son URL source, utilisez cette version :
[% 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 %]
Ajoutez un message de secours
Utilisez cette version lorsque l'email peut être envoyé pour des commandes sans données de personnalisation :
[% 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 %]
Sans message de secours, le bloc ne rend aucun contenu lorsque la commande n'a pas d'image de personnalisation.
Afficher une autre propriété teeinblue
Vous pouvez afficher l'image et le lien du fichier de conception dans la même boucle :
[% 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 %]
Vous pouvez utiliser le même modèle pour trouver d'autres propriétés d'articles de ligne en changeant la valeur dans la condition :
prop.name == 'property_name'
Commandes multi-articles
La boucle imbriquée vérifie chaque ligne de l'ordre.Elle ne dépend pas de la position du produit dans le panier.
Ce comportement a été confirmé avec une commande réelle contenant :
Un produit teeinblue personnalisé avec toutes les quatre propriétés de personnalisation.
Un produit sans lien sans propriétés de personnalisation.
Le résultat était :
L'image du produit personnalisé s'est affichée correctement et une seule fois.
Le produit sans lien n'a affiché aucune image.
Il n'y avait pas de fuite de données entre les lignes.
Le produit personnalisé n'avait pas besoin d'être le premier dans la commande.
Important : Ne pas utiliser un index codé en dur tel queevent.raw.line_items[0].Le [0] la référence vérifie uniquement le premier élément de ligne.Si le produit personnalisé n'est pas le premier, l'image peut ne pas apparaître.
Combinez l'image avec le titre, le prix et la quantité
Le titre du produit, le prix, la quantité et l'image de personnalisation ont été confirmés ensemble dans un email livré réel, y compris avec une quantité supérieure à un sur un seul élément de ligne :
[% 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 %]
Portée vérifiée
Boucle d'image uniquement : vérifiée.
Commandes multi-articles : vérifiées.
Image avec titre et prix du produit : vérifiée.
Image avec titre, prix et quantité du produit : vérifiée.
Vérifiez l'intégration
Utilisez un paiement Shopify réel pour tester la configuration.
Passez une commande avec un produit teeinblue personnalisé.
Vérifiez l'historique des événements du contact dans Omnisend.
Confirmez que l'événement contient des données peuplées
line_items[].properties.Vérifiez l'email livré.
Confirmez que l'image se charge correctement.
Testez une commande avec plusieurs éléments de ligne.
Si vous utilisez un workflow de confirmation de commande partagé, testez une commande sans données de personnalisation.
L'aperçu dynamique et les emails livrés peuvent produire des résultats différents.Utilisez un email livré réel comme vérification finale.
Vous pouvez également créer un segment en utilisant cette condition pour confirmer que les données de l'événement sont arrivées : Brut Éléments de ligne Propriétés Nom est _customization_image
Dépannage
L'image n'apparaît pas
Vérifiez les éléments suivants :
La commande Shopify contient
_customization_image.L'URL de l'image dans
prop.valueest disponible.Le code est à l'intérieur d'un bloc HTML personnalisé.
Le workflow utilise un événement réel de Commande passée ou Commande payée.
L'email a été testé avec un produit personnalisé.
Le code n'utilise pas un index codé en dur
[0].Les filtres de déclenchement correspondent à la configuration du workflow.
Le produit personnalisé n'est pas le premier dans la commande
Vérifiez si l'email utilise une référence telle que :
event.raw.line_items[0]
Cela ne vérifie que le premier élément de ligne.Remplacez-le par la boucle imbriquée de cet article afin qu'Omnisend vérifie chaque élément de ligne.
Le workflow n'envoie pas
Vérifiez le limiteur de fréquence du workflow : Automatisation Workflow Paramètres Fréquence
Le limiteur peut ignorer les envois de test répétés au même contact.Cela peut ressembler à un échec de déclenchement.
Le contenu de l'email modifié par l'API disparaît
Si vous modifiez l'email via une API pendant que l'Éditeur d'emails est ouvert dans un autre onglet de navigateur, la sauvegarde automatique peut écraser vos modifications.
Fermez l'éditeur avant de faire des modifications basées sur l'API.Vérifiez à nouveau le contenu de l'email avant d'envoyer un test.
Un événement de commande synthétique ne fonctionne pas
Une demande API qui crée un événement de commande passée synthétique peut être acceptée sans erreur, mais échouer à traiter ou à s'attacher au contact.
Utilisez un paiement Shopify authentique pour générer un événement de commande utilisable.
FAQ
Ai-je besoin d'un événement personnalisé ?
Non. La configuration utilise l'événement de commande natif de Shopify reçu par Omnisend.
Ai-je besoin d'un middleware ou d'un service de relais ?
Non. Les données teeinblue sont déjà incluses dans les propriétés des lignes de commande de Shopify.
Devrais-je créer un workflow séparé ?
Créez un workflow séparé pour lorsque l'email doit être envoyé uniquement pour les commandes personnalisées.Ajoutez les filtres de déclencheur _customization_image pour ce workflow.
Puis-je ajouter l'image à un workflow de confirmation de commande existant ?
Oui. Ne pas ajouter les filtres de personnalisation si le workflow doit gérer toutes les commandes.Utilisez la version de secours du code pour les commandes sans données de personnalisation.
Le sélecteur de personnalisation standard prend-il en charge cette propriété ?
Non. Le sélecteur n'expose pas les propriétés de ligne personnalisées.Utilisez un bloc HTML personnalisé et entrez la boucle Liquid manuellement.
La boucle fonctionne-t-elle avec plusieurs lignes d'articles ?
Oui. La boucle vérifie chaque ligne d'article et ignore les produits sans _customization_image.
Le produit personnalisé doit-il être le premier dans le panier ?
Non. La boucle imbriquée ne dépend pas de la position dans le panier.Évitez d'utiliser un index codé en dur [0], qui ne vérifie que la première ligne d'article.
Puis-je utiliser un événement API synthétique pour les tests ?
Non. Utilisez un paiement Shopify authentique pour générer un événement de commande utilisable.
Vous n'avez pas trouvé la réponse à votre question ? Contactez notre équipe d'assistance via le chat dans l'application ou à [email protected] – nous sommes disponibles 24/7.