Zeigen Sie das Personalisierungs Vorschau-Bild eines Kunden in einer Omnisend-E-Mail unter Verwendung der Shopify-Artikel-Eigenschaften an.

So funktioniert's

teeinblue speichert Personalisierungsdaten auf der Shopify-Bestellung als Artikel-Eigenschaften.Omnisend erhält die vollständigen Rohbestelldaten mit den Shopify-Ereignissen "Bestellung aufgegeben" und "Bestellung bezahlt".

Sie können eine Liquid-Schleife in einem Custom HTML Block verwenden, um die _customization_image Eigenschaft zu finden und das Bild in einer E-Mail anzuzeigen.

Dieses Setup verwendet die nativen Shopify-Ereignisdaten von Omnisend.Es erfordert keinen benutzerdefinierten Code außerhalb der E-Mail, Middleware, ein benutzerdefiniertes Ereignis, einen API-Relay-Dienst oder ein separates kostenpflichtiges Add-On.

teeinblue fügt den angepassten Artikel vier Eigenschaften hinzu:

_customization_id
_tib_fulfilled_sku
_customization_image
_tib_design_link_1

💁‍♂️ Dieser Artikel konzentriert sich auf _customization_image, das ist die Eigenschaft, die verwendet wird, um die Personalisierungsansicht des Kunden anzuzeigen.Sie können auch die anderen Eigenschaften mit derselben Schleifen- und Übereinstimmungsmethode extrahieren.

Bevor Sie beginnen

Stellen Sie sicher, dass:

Ihr Shopify-Webshop mit Omnisend verbunden ist.
teeinblue installiert ist.
Mindestens ein personalisiertes Produkt in teeinblue konfiguriert ist.
Sie können eine echte Shopify-Testbestellung aufgeben.
Ihr Omnisend-Konto hat Zugriff auf Automatisierungs-Workflows und benutzerdefinierte HTML-Blöcke.

Diese Integration umfasst drei Plattformen.Hier ist, was jede benötigt:

Plattform	Anforderung
teeinblue	Jeder Tarif.Artikel-Eigenschaften sind eine Kernfunktionalität, die in jeder Stufe verfügbar ist.
Shopify	Jeder Tarif.Artikel-Eigenschaften sind ein Standard-Feature von Shopify, das nicht an eine bestimmte Webshop-Stufe gebunden ist.
Omnisend	Jeder Tarif, einschließlich kostenlos.Automatisierungs-Workflows, benutzerdefinierte HTML-Blöcke und Liquid-Schleifen sind in allen Omnisend-Tarifen verfügbar.

Dieses Setup funktioniert mit jedem teeinblue-Tarif und jedem Omnisend-Tarif, einschließlich kostenlos.

Verwenden Sie immer einen StandardCustom HTML Block für teeinblue. Verwenden Sie keinenDynamischen Inhalt Block. Obwohl die kostenpflichtige Funktion für dynamischen Inhalt von Omnisend bedingten Inhalt unterstützt, unterstützt sie nicht die Liquid-Schleifen, die erforderlich sind, um durchevent.raw.line_items und deren Eigenschaften zu iterieren.

Einrichtungsprozess

Hinweis: Ihr Omnisend-Konto muss mit Shopify verbunden sein, damit die Integration funktioniert.

Schritt 1. Installieren Sie teeinblue in Ihrem Shopify-Webshop.

Schritt 2. Erstellen Sie ein neues personalisiertes Produkt oder aktivieren Sie die Personalisierung für ein bestehendes Produkt. Kombinieren Sie eine Produktbasis, wie ein T-Shirt oder eine Tasse, mit einer Kunstvorlage oder laden Sie Ihr eigenes Design hoch.

Schritt 3. Testen Sie, ob die Verbindung funktioniert.

Geben Sie eine Testbestellung über den Checkout-Prozess des personalisierten Produkts auf.Überprüfen Sie dann die Aktivitäten des Kontakts in Omnisend.Sie sollten ein Shopify Bestellung aufgegeben oder Bestellung bezahlt Ereignis sehen.

Sobald dies erledigt ist, sind die Personalisierungsdaten von teeinblue in Bestellungen enthalten, die über das personalisierte Produkt aufgegeben wurden.Es sind keine zusätzlichen Datenkonfigurationen erforderlich.Fahren Sie mit dem Workflow und der E-Mail-Konfiguration unten fort.

Wählen Sie Ihre Workflow-Konfiguration

Sie können das Bild in einen separaten Workflow einfügen oder es in einer bestehenden Bestellbestätigungs-E-Mail einfügen.

Setup	Verwenden Sie es, wenn	Trigger-Filter
Getrennter Workflow	Die E-Mail sollte nur für angepasste Bestellungen gesendet werden.	Fügen Sie die `_customization_image` Filter hinzu.
Vorhandener Bestellbestätigungs-Workflow	Die E-Mail sollte sowohl angepasste als auch Standardbestellungen bearbeiten.	Fügen Sie die Anpassungsfilter nicht hinzu.

Verwenden Sie Der Workflow für kundenspezifische Bestellungen

Wählen Sie dieses Setup, wenn Sie möchten, dass die E-Mail nur für Bestellungen gesendet wird, die ein teeinblue-Bild zur Die Personalisierung enthalten.

Gehe zu Die Automatisierung.
Wählen Sie Der Workflow erstellen.
Wählen Sie Neu erstellen.
Wählen Sie Die Bestellung aufgegeben oder Die Bestellung bezahlt als Der Trigger aus.
Setzen Sie den Ereignisursprung auf Shopify.
Fügen Sie diese Der Trigger-Filter hinzu:
- Roh → Positionen → Eigenschaften Name ist_customization_image
- Roh Positionen Eigenschaften Wert existiert
Fügen Sie eine Die E-Mail-Aktion hinzu.
Öffnen Sie den Der E-Mail-Builder.
Fügen Sie einen Benutzerdefinierten HTML-Block hinzu.
Fügen Sie den Bildausschnitt aus dem nächsten Abschnitt ein.
Aktivieren Sie den Workflow.

Die Filter erlauben nur Bestellungen mit einer passenden Anpassungsbild-Eigenschaft, um in diesen Workflow einzutreten.Die Fallback-Version des Codes ist in diesem Setup optional.

Bild zur bestehenden Bestellbestätigungs-Workflow hinzufügen.

Wählen Sie dieses Setup, wenn dieselbe E-Mail jede Bestellung bearbeiten soll.

Öffnen Sie den bestehenden Shopify-Bestellbestätigungs-Workflow.
Verwenden Sie den bestehenden Bestellung aufgegeben oder Bestellung bezahlt Trigger.
Fügen Sie die _customization_image Trigger-Filter nicht hinzu.
Fügen Sie den Bildblock zur E-Mail hinzu.
Verwenden Sie die Fallback-Version des Codes.
Speichern und aktivieren Sie den Workflow.

Diese Einrichtung behandelt verschiedene Bestelltypen:

Kundenspezifische Produkte zeigen ihre Personalisierungsbilder an.
Standardprodukte werden übersprungen, da sie kein _customization_image haben.
Bestellungen ohne Personalisierungsdaten zeigen die Fallback-Nachricht an.

Dies funktioniert auch, wenn eine Bestellung sowohl kundenspezifische als auch nicht kundenspezifische Produkte enthält.

Zeigen Sie das Personalisierungsbild an.

Fügen Sie einen benutzerdefinierten HTML-Block zur E-Mail hinzu und fügen Sie diesen Code ein:

[% 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 %]

Verwenden Sie einen standardmäßigen benutzerdefinierten HTML-Block.Sie benötigen den speziellen Dynamic Content Layout-Block nicht.

4a1 Wie der Code funktioniert:
Omnisend empfängt Shopify-Artikelmerkmale als ein Array vonName undWertpaaren.Die äußere Schleife überprüft jedes Produkt in der Bestellung, und die innere Schleife überprüft jedes Merkmal, das diesem Produkt zugeordnet ist.Wenn der Code_customization_image findet, verwendet er den passendenWert als die Bild-URL.

Da der Code jedes Artikel überprüft, muss das angepasste Produkt nicht zuerst in der Bestellung erscheinen.

Die Standard-Markierungsauswahl zeigt diese benutzerdefinierten Zeilenartikel-Eigenschaften nicht an.Geben Sie die Liquid-Schleife direkt im benutzerdefinierten HTML-Block ein.

Verwenden Sie ein klickbares Bild

Um das Bild mit seiner Quell-URL zu verlinken, verwenden Sie diese 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 %]

Fügen Sie eine Fallback-Nachricht hinzu

Verwenden Sie diese Version, wenn die E-Mail für Bestellungen ohne Personalisierungsdaten gesendet werden kann:

[% 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 %]

Ohne Fallback zeigt der Block keinen Inhalt an, wenn die Bestellung kein Anpassungsbild hat.

Ein anderes teeinblue-Eigenschaft anzeigen

Sie können das Bild und den Link zur Design-Datei in derselben Schleife anzeigen:

[% 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 %]

Sie können dasselbe Muster verwenden, um andere Zeilenartikel-Eigenschaften zu finden, indem Sie den Wert in der Bedingung ändern:

prop.name == 'property_name'

Mehrere Artikelbestellungen

Die verschachtelte Schleife überprüft jeden Artikel in der Bestellung.Es hängt nicht von der Position des Produkts im Warenkorb ab.

Dieses Verhalten wurde mit einer echten Bestellung bestätigt, die folgendes enthält:

Ein angepasstes teeinblue Produkt mit allen vier Personalisierungs-Eigenschaften.
Ein nicht verwandtes Produkt ohne Personalisierungseigenschaften.

Das Ergebnis war:

Das Bild des angepassten Produkts wurde korrekt und nur einmal gerendert.
Das nicht verwandte Produkt zeigte kein Bild.
Es gab keine Datenleckage zwischen den Artikelpositionen.
Das angepasste Produkt musste nicht zuerst in der Bestellung sein.

Wichtig: Verwenden Sie keinen fest codierten Index wieevent.raw.line_items[0].Die [0] Referenz überprüft nur den ersten Artikel.Wenn das angepasste Produkt nicht zuerst ist, wird das Bild möglicherweise nicht angezeigt.

Kombinieren Sie das Bild mit Titel, Preis und Menge

Der Produkttitel, Preis, Menge und das Personalisierungsbild wurden zusammen in einer echten gelieferten E-Mail bestätigt, einschließlich einer Menge größer als eins auf einer einzelnen Artikelposition:

[% 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 %]

Überprüfter Umfang

Bild-nur Schleife: überprüft.
Mehrere Artikelbestellungen: überprüft.
Bild mit Produkttitel und Preis: überprüft.
Bild mit Produkttitel, Preis und Menge: überprüft.

Überprüfen Sie die Integration

Verwenden Sie einen echten Shopify-Checkout, um die Einrichtung zu testen.

Bestellen Sie ein angepasstes teeinblue Produkt.
Überprüfen Sie die Ereignishistorie des Kontakts in Omnisend.
Bestätigen Sie, dass das Ereignis mit ausgefüllten line_items[].properties Daten enthält.
Überprüfen Sie die gelieferte E-Mail.
Bestätigen Sie, dass das Bild korrekt geladen wird.
Testen Sie eine Bestellung mit mehreren Artikelpositionen.
Wenn Sie einen gemeinsamen Bestellbestätigungs-Workflow verwenden, testen Sie eine Bestellung ohne Personalisierungsdaten.

Dynamische Vorschau und gelieferte E-Mails können unterschiedliche Ergebnisse liefern.Verwenden Sie eine echte gelieferte E-Mail als endgültige Überprüfung.

Sie können auch ein Segment mit dieser Bedingung erstellen, um zu bestätigen, dass die Ereignisdaten angekommen sind: Raw Line Items Properties Name ist _customization_image

Fehlerbehebung

Das Bild erscheint nicht

Überprüfen Sie Folgendes:

Die Shopify-Bestellung enthält _customization_image.
Die Bild-URL in prop.value ist verfügbar.
Der Code befindet sich in einem Benutzerdefinierten HTML Block.
Der Workflow verwendet ein echtes Shopify Bestellung aufgegeben oder Bestellung bezahlt Ereignis.
Die E-Mail wurde mit einem angepassten Produkt getestet.
Der Code verwendet keinen fest codierten [0] Index.
Die Triggerfilter stimmen mit der Workflow-Einrichtung überein.

Das angepasste Produkt ist nicht zuerst in der Bestellung

Überprüfen Sie, ob die E-Mail eine Referenz wie folgt verwendet:

event.raw.line_items[0]

Dies überprüft nur den ersten Artikel.Ersetzen Sie es durch die verschachtelte Schleife aus diesem Artikel, damit Omnisend jeden Artikel überprüft.

Der Workflow sendet nicht

Überprüfen Sie den Frequenzbegrenzer des Workflows: Automatisierungs-Workflow Einstellungen Frequenz

Der Begrenzer kann wiederholte Testsendungen an denselben Kontakt überspringen.Dies kann wie ein Triggerfehler aussehen.

API-bearbeiteter E-Mail-Inhalt verschwindet

Wenn Sie die E-Mail über eine API bearbeiten, während der E-Mail-Builder in einem anderen Browser-Tab geöffnet ist, kann die automatische Speicherung Ihre Änderungen überschreiben.

Schließen Sie den Editor, bevor Sie API-basierte Änderungen vornehmen.Überprüfen Sie den E-Mail-Inhalt erneut, bevor Sie einen Test senden.

Ein synthetisches Bestellereignis funktioniert nicht

Eine API-Anfrage, die ein synthetisches bestellte Bestellung Ereignis erstellt, kann ohne Fehler akzeptiert werden, aber dennoch nicht verarbeitet oder an den Kontakt angehängt werden.

Verwenden Sie einen echten Shopify-Checkout, um ein verwendbares Bestellereignis zu generieren.

Häufig gestellte Fragen

Brauche ich ein benutzerdefiniertes Ereignis?

Nein. Die Einrichtung verwendet das native Shopify-Bestellereignis, das von Omnisend empfangen wird.

Brauche ich Middleware oder einen Relay-Dienst?

Nein. Die teeinblue-Daten sind bereits in den Eigenschaften der Bestellposition von Shopify enthalten.

Sollte ich einen separaten Workflow erstellen?

Erstellen Sie einen separaten Workflow, wenn die E-Mail nur für angepasste Bestellungen gesendet werden soll.Fügen Sie die _customization_image-Triggerfilter für diesen Workflow hinzu.

Kann ich das Bild zu einem bestehenden Bestellbestätigungs-Workflow hinzufügen?

Ja. Fügen Sie die Anpassungsfilter nicht hinzu, wenn der Workflow alle Bestellungen bearbeiten soll.Verwenden Sie die Fallback-Version des Codes für Bestellungen ohne Personalisierungsdaten.

Unterstützt der Standard-Personalisierungswähler diese Eigenschaft?

Nein. Der Wähler gibt keine benutzerdefinierten Eigenschaften der Bestellpositionen preis.Verwenden Sie einen benutzerdefinierten HTML-Block und geben Sie die Liquid-Schleife manuell ein.

Funktioniert die Schleife mit mehreren Bestellpositionen?

Ja. Die Schleife überprüft jede Bestellposition und überspringt Produkte ohne _customization_image.

Muss das angepasste Produkt zuerst im Warenkorb sein?

Nein. Die geschachtelte Schleife hängt nicht von der Position im Warenkorb ab.Vermeiden Sie die Verwendung eines fest codierten [0]-Index, der nur die erste Bestellposition überprüft.

Kann ich ein synthetisches API-Ereignis zum Testen verwenden?

Nein. Verwenden Sie einen echten Shopify-Checkout, um ein verwendbares Bestellereignis zu generieren.

Haben Sie die Antwort auf Ihre Frage nicht gefunden? Wenden Sie sich über den In-App-Chat oder unter an unser Support-Team [email protected] – wir sind 24/7 verfügbar.

Verwandte Artikel

Integrieren Sie teeinblue mit Omnisend.