Visualizza un'immagine di anteprima della personalizzazione teeinblue di un cliente in un'email di Omnisend utilizzando le proprietà degli articoli dell'ordine di Shopify.
Come funziona
teeinblue salva i dati di personalizzazione sull'ordine di Shopify come proprietà degli articoli.Omnisend riceve i dati grezzi completi dell'ordine con gli eventi dell'ordine effettuato e dell'ordine pagato di Shopify.
Puoi usare un ciclo Liquid in un blocco HTML personalizzato per trovare la proprietà _customization_image e visualizzare l'immagine in un'email.
Questa configurazione utilizza i dati degli eventi nativi di Shopify di Omnisend.Non richiede codice personalizzato al di fuori dell'email, middleware, un evento personalizzato, un servizio di relay API o un componente aggiuntivo a pagamento separato.
teeinblue aggiunge quattro proprietà all'articolo personalizzato:
_customization_id_tib_fulfilled_sku_customization_image_tib_design_link_1
Questo articolo si concentra sulla _customization_image, che è la proprietà utilizzata per visualizzare l'anteprima della personalizzazione del cliente.Puoi anche estrarre le altre proprietà con lo stesso metodo di ciclo e corrispondenza.
Prima di iniziare
Assicurati che:
Il tuo negozio Shopify è collegato a Omnisend.
teeinblue è installato.
Almeno un prodotto personalizzato è configurato in teeinblue.
Puoi effettuare un vero ordine di prova su Shopify.
Il tuo account Omnisend ha accesso ai Flussi automatizzati e ai blocchi HTML personalizzati.
Questa integrazione coinvolge tre piattaforme.Ecco cosa richiede ciascuna:
Piattaforma | Requisito |
teeinblue | Qualsiasi piano.Le proprietà degli articoli sono funzionalità fondamentali, disponibili in ogni livello. |
Shopify | Qualsiasi piano.Le proprietà degli articoli sono una funzionalità standard di Shopify, non legata a un livello specifico del negozio. |
Omnisend | Qualsiasi piano, incluso il piano gratuito.I Flussi automatizzati, i blocchi HTML personalizzati e i cicli Liquid sono disponibili in tutti i piani di Omnisend. |
Questa configurazione funziona con qualsiasi piano teeinblue e qualsiasi piano Omnisend, incluso il piano gratuito.
Usa sempre un standardblocco HTML personalizzato per teeinblue. Non utilizzare unblocco di contenuto dinamico. Sebbene la funzione di contenuto dinamico a pagamento di Omnisend supporti contenuti condizionali, non supporta i cicli Liquid necessari per iterare attraversoevent.raw.line_items e le loro proprietà.
Processo di Configurazione
Nota: Il tuo account Omnisend deve essere collegato a Shopify affinché l'integrazione funzioni.
Passo 1. Installa teeinblue nel tuo negozio Shopify.
Passo 2. Crea un nuovo prodotto personalizzato o abilita la personalizzazione per un prodotto esistente. Combina una base di prodotto, come una maglietta o una tazza, con un modello di opera d'arte, oppure carica il tuo design.
Passo 3. Testa che la connessione funzioni.
Effettua un ordine di prova attraverso il flusso di checkout del prodotto personalizzato.Quindi controlla l'attività del contatto in Omnisend.Dovresti vedere un evento Ordine effettuato o Ordine pagato di Shopify.
Una volta completato, i dati di personalizzazione di teeinblue sono inclusi negli ordini effettuati attraverso il prodotto personalizzato.Non è necessaria alcuna configurazione aggiuntiva dei dati.Continua con la configurazione del flusso e dell'email qui sotto.
Scegli la configurazione del tuo flusso
Puoi aggiungere l'immagine a un flusso separato o includerla in un'email di conferma d'ordine esistente.
Configurazione | Usalo quando | Filtri di attivazione |
Flusso separato | L'email dovrebbe essere inviata solo per ordini personalizzati | Aggiungi i filtri |
Flusso di conferma d'ordine esistente | L'email dovrebbe gestire sia ordini personalizzati che standard | Non aggiungere i filtri di personalizzazione |
Utilizza un Flusso Separato per Ordini Personalizzati
Scegli questa configurazione quando desideri che l'Email venga inviata solo per gli ordini contenenti un'immagine di personalizzazione teeinblue.
Vai a Flusso automatizzato.
Seleziona Crea Flusso.
Scegli Crea da zero.
Seleziona Ordine effettuato o Ordine pagato come Trigger.
Imposta l'origine dell'evento su Shopify.
Aggiungi questi filtri Trigger:
Crudo → Elementi di linea → Proprietà Nome è
_customization_imageGrezzo Elementi di linea Proprietà Valore esiste
Aggiungi un'azione Email.
Apri l'Editor email.
Aggiungi un blocco HTML personalizzato.
Incolla il frammento dell'immagine dalla sezione successiva.
Abilita il flusso.
I filtri consentono solo agli ordini con una proprietà immagine di personalizzazione corrispondente di entrare in questo flusso.La versione di fallback del codice è opzionale in questa configurazione.
Aggiungi immagine al flusso di conferma d'ordine esistente.
Scegli questa configurazione quando la stessa email deve gestire ogni ordine.
Apri il flusso di conferma d'ordine Shopify esistente.
Usa il trigger Ordine effettuato o Ordine pagato esistente.
Non aggiungere i filtri del trigger
_customization_image.Aggiungi il blocco immagine all'email.
Usa la versione di fallback del codice.
Salva e abilita il Flusso.
Questa configurazione gestisce diversi tipi di ordine:
I prodotti personalizzati mostrano le loro immagini di Personalizzazione.
I prodotti standard vengono saltati perché non hanno
_customization_image.Gli ordini senza dati di personalizzazione mostrano il messaggio di fallback.
Questo funziona anche quando un ordine contiene sia prodotti personalizzati che non personalizzati.
Mostra l'immagine di Personalizzazione
Aggiungi un Custom HTML block all'Email e incolla questo codice:
[% 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 blocco standard Custom HTML.Non hai bisogno del blocco Layout Contenuto Dinamico dedicato.
4a1 Come funziona il codice:
Omnisend riceve le proprietà degli articoli di Shopify come un array dinome ecoppie di valori.Il ciclo esterno controlla ogni prodotto nell'ordine, e il ciclo interno controlla ogni proprietà allegata a quel prodotto.Quando il codice trova_customization_image, utilizza il corrispondentevalore come URL dell'immagine.
Poiché il codice controlla ogni articolo, il prodotto personalizzato non deve apparire per primo nell'ordine.
Il selettore di tag di personalizzazione standard non espone queste proprietà personalizzate degli articoli.Inserisci il ciclo Liquid direttamente nel blocco HTML personalizzato.
Usa un'immagine cliccabile
Per collegare l'immagine al suo URL di origine, usa questa versione:
[% 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 %]
Aggiungi un messaggio di fallback
Usa questa versione quando l'email può essere inviata per ordini senza dati di personalizzazione:
[% 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 %]
Senza un fallback, il blocco non visualizza contenuti quando l'ordine non ha un'immagine di personalizzazione.
Visualizza un'altra proprietà teeinblue
Puoi visualizzare l'immagine e il link al file di design nello stesso ciclo:
[% 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 %]
Puoi usare lo stesso schema per trovare altre proprietà degli articoli cambiando il valore nella condizione:
prop.name == 'property_name'
Ordini Multi-Item
Il ciclo annidato controlla ogni articolo nell'ordine.Non dipende dalla posizione del prodotto nel carrello.
Questo comportamento è stato confermato con un ordine reale contenente:
Un prodotto teeinblue personalizzato con tutte e quattro le proprietà di personalizzazione.
Un prodotto non correlato senza proprietà di personalizzazione.
Il risultato è stato:
L'immagine del prodotto personalizzato è stata visualizzata correttamente e solo una volta.
Il prodotto non correlato non ha mostrato alcuna immagine.
Non c'è stata alcuna perdita di dati tra gli articoli.
Il prodotto personalizzato non doveva essere il primo nell'ordine.
Importante: Non utilizzare un indice hardcoded comeevent.raw.line_items[0].Il [0] il riferimento controlla solo il primo articolo.Se il prodotto personalizzato non è il primo, l'immagine potrebbe non apparire.
Combina l'immagine con il titolo, il prezzo e la quantità
Il titolo del prodotto, il prezzo, la quantità e l'immagine di personalizzazione sono stati confermati insieme in un'email reale consegnata, inclusa una quantità maggiore di uno su un singolo articolo:
[% 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 %]
Ambito verificato
Ciclo solo immagine: verificato.
Ordini multi-articolo: verificato.
Immagine con titolo e prezzo del prodotto: verificato.
Immagine con titolo del prodotto, prezzo e quantità: verificato.
Verifica l'Integrazione
Utilizza un checkout Shopify reale per testare la configurazione.
Effettua un ordine con un prodotto teeinblue personalizzato.
Controlla la cronologia eventi del Contatto in Omnisend.
Conferma che l'evento contenga dati popolati
line_items[].properties.Controlla l'email consegnata.
Conferma che l'immagine si carichi correttamente.
Testa un ordine con più articoli.
Se utilizzi un flusso di conferma d'ordine condiviso, testa un ordine senza dati di personalizzazione.
L'anteprima dinamica e le email consegnate possono produrre risultati diversi.Utilizza un'email reale consegnata come verifica finale.
Puoi anche creare un segmento utilizzando questa condizione per confermare che i dati dell'evento siano arrivati: Raw → Line Items → Properties → Name è _customization_image
Risoluzione dei problemi
L'immagine non appare
Controlla quanto segue:
L'ordine Shopify contiene
_customization_image.L'URL dell'immagine in
prop.valueè disponibile.Il codice è all'interno di un blocco HTML personalizzato.
Il flusso utilizza un evento reale di Ordine effettuato o Ordine pagato di Shopify.
L'email è stata testata con un prodotto personalizzato.
Il codice non utilizza un indice hardcoded
[0].I filtri del trigger corrispondono alla configurazione del flusso.
Il prodotto personalizzato non è il primo nell'ordine
Controlla se l'email utilizza un riferimento come:
event.raw.line_items[0]
Questo controlla solo il primo articolo.Sostituiscilo con il ciclo annidato di questo articolo in modo che Omnisend controlli ogni articolo.
Il flusso non invia
Controlla il limitatore di frequenza del flusso: Flusso automatizzato → Impostazioni → Frequenza
Il limitatore può saltare invii di test ripetuti allo stesso Contatto.Questo può sembrare un errore del trigger.
Il contenuto dell'email modificato tramite API scompare
Se modifichi l'email tramite un'API mentre l'Editor email è aperto in un'altra scheda del browser, il salvataggio automatico può sovrascrivere le tue modifiche.
Chiudi l'editor prima di apportare modifiche basate su API.Controlla nuovamente il contenuto dell'email prima di inviare un test.
Un evento d'ordine sintetico non funziona
Una richiesta API che crea un evento sintetico ordine effettuato può essere accettata senza errore, ma può comunque non elaborarsi o non essere allegata al Contatto.
Utilizza un checkout Shopify genuino per generare un evento d'ordine utilizzabile.
Domande frequenti
Ho bisogno di un evento personalizzato?
No. La configurazione utilizza l'evento ordine nativo di Shopify ricevuto da Omnisend.
Ho bisogno di un middleware o di un servizio di relay?
No. I dati teeinblue sono già inclusi nelle proprietà degli articoli dell'ordine di Shopify.
Dovrei creare un flusso separato?
Crea un flusso separato per quando l'email deve essere inviata solo per ordini personalizzati.Aggiungi i filtri trigger _customization_image per quel flusso.
Posso aggiungere l'immagine a un flusso di conferma d'ordine esistente?
Sì. Non aggiungere i filtri di personalizzazione se il flusso deve gestire tutti gli ordini.Usa la versione di fallback del codice per ordini senza dati di personalizzazione.
Il selettore standard di personalizzazione supporta questa proprietà?
No. Il selettore non espone le proprietà personalizzate degli articoli.Usa un blocco HTML personalizzato e inserisci manualmente il ciclo Liquid.
Il ciclo funziona con più articoli?
Sì. Il ciclo controlla ogni articolo e salta i prodotti senza _customization_image.
Il prodotto personalizzato deve essere il primo nel carrello?
No. Il ciclo annidato non dipende dalla posizione nel carrello.Evita di usare un indice [0] hardcoded, che controlla solo il primo articolo.
Posso usare un evento API sintetico per i test?
No. Usa un checkout genuino di Shopify per generare un evento ordine utilizzabile.
Non hai trovato la risposta alla tua domanda? Contatta il nostro Team di Supporto tramite la chat in-app o a [email protected] – siamo disponibili 24/7.