在 Omnisend 邮件中使用 Shopify 行项目属性显示客户的 teeinblue 个性化预览图像。
工作原理
teeinblue 将个性化数据保存为 Shopify 订单的行项目属性。Omnisend 接收完整的原始订单数据，包括 Shopify 下单和支付订单事件。
您可以在 自定义 HTML 块中使用 Liquid 循环查找 _customization_image 属性并在电子邮件中显示图像。
此设置使用 Omnisend 的原生 Shopify 事件数据。它不需要电子邮件外的自定义代码、中间件、自定义事件、API 中继服务或单独的付费附加组件。
teeinblue 为自定义行项目添加了四个属性：
_customization_id_tib_fulfilled_sku_customization_image_tib_design_link_1
💁♂️ 本文重点介绍 _customization_image，这是用于显示客户个性化预览的属性。您还可以使用相同的循环匹配方法提取其他属性。
开始之前
确保：
您的 Shopify 商店已连接到 Omnisend。
已安装 teeinblue。
在 teeinblue 中配置了至少一个个性化产品。
您可以下一个真实的 Shopify 测试订单。
您的 Omnisend 账户可以访问自动化工作流和自定义 HTML 块。
此集成涉及三个平台。以下是每个平台的要求：
平台 | 要求 |
teeinblue | 任何计划。行项目属性是核心功能，适用于每个层级。 |
Shopify | 任何计划。行项目属性是标准 Shopify 功能，不与特定商店层级相关。 |
Omnisend | 任何计划，包括免费。自动化工作流、自定义 HTML 块和 Liquid 循环在所有 Omnisend 计划中均可用。 |
此设置适用于任何 teeinblue 计划和任何 Omnisend 计划，包括免费。
设置过程
注意： 您的 Omnisend 账户必须连接到 Shopify 才能使集成正常工作。
步骤 1. 在您的 Shopify 商店上安装 teeinblue。
步骤 2. 创建一个新的个性化产品或为现有产品启用个性化。将产品基础（如 T 恤或杯子）与艺术模板结合，或上传您自己的设计。
步骤 3. 测试连接是否正常。
通过个性化产品的结账流程下一个测试订单。然后检查 Omnisend 中联系人的活动。您应该看到 Shopify 已下单 或 已支付订单 事件。
完成后，teeinblue 个性化数据将包含在通过个性化产品下的订单中。不需要额外的数据设置。继续下面的工作流和电子邮件设置。
选择您的工作流设置
您可以将图像添加到单独的工作流中，或将其包含在现有的订单确认电子邮件中。
设置 | 在以下情况下使用它 | 触发过滤器 |
单独的工作流 | 电子邮件应仅针对自定义订单发送 | 添加 |
现有的订单确认工作流 | 电子邮件应处理定制和标准订单 | 请勿添加定制过滤器 |
为定制订单使用单独的工作流程
当您希望电子邮件仅在订单中包含 teeinblue 个性化图像时，请选择此设置。
转到 自动化。
选择 创建工作流程。
选择 从头开始创建。
选择 已下单 或 已付款订单 作为触发器。
将事件来源设置为 Shopify。
添加这些触发器过滤器：
原始 订单项 属性 名称 是
_customization_image原始 订单项 属性 值 存在
添加电子邮件操作。
打开电子邮件构建器。
添加一个 自定义 HTML 块。
粘贴下一部分的图像代码。
启用工作流程。
这些过滤器仅允许具有匹配的定制图像属性的订单进入此工作流程。此设置中的回退版本是可选的。
将图像添加到现有的订单确认工作流程
当同一电子邮件应处理每个订单时，请选择此设置。
打开现有的 Shopify 订单确认工作流程。
使用现有的 已下单 或 已付款订单 触发器。
请勿添加
_customization_image触发器过滤器。将图像块添加到电子邮件中。
使用代码的回退版本。
保存并启用工作流程。
此设置处理不同的订单类型：
定制产品显示其个性化图像。
标准产品被跳过，因为它们没有
_customization_image。没有定制数据的订单显示回退消息。
当订单同时包含定制和非定制产品时，这也有效。
显示个性化图像
向电子邮件添加一个 自定义 HTML 块并粘贴此代码：
[% 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 %]
使用标准 自定义 HTML 块。您不需要专用的 动态内容布局 块。
如何代码工作：
Omnisend 接收 Shopify 订单项属性作为数组名称和值对。外部循环检查订单中的每个产品，内部循环检查附加到该产品的每个属性。当代码找到_customization_image 时，它使用匹配的值作为图像 URL。
由于代码检查每个订单项，定制产品不需要在订单中首先出现。
标准个性化标签选择器不会暴露这些自定义订单项属性。直接在自定义 HTML 块中输入 Liquid 循环。
使用可点击的图像
要将图像链接到其源 URL，请使用此版本：
[% 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 %]
添加回退消息
当电子邮件可以发送给没有个性化数据的订单时，请使用此版本：
[% 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 %]
没有回退时，当订单没有定制图像时，该块不会呈现任何内容。
显示另一个 teeinblue 属性
您可以在同一个循环中显示图像和设计文件链接:
[% 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 %]
您可以使用相同的模式通过更改条件中的值来查找其他行项目属性:
prop.name == 'property_name'
多项订单
嵌套循环检查订单中的每个行项目。它不依赖于产品在购物车中的位置.
此行为已通过包含以下内容的真实订单确认:
一个定制的 teeinblue 产品，具有所有四个个性化属性.
一个没有定制属性的无关产品.
结果是:
定制产品的图像正确渲染且仅渲染一次.
该无关产品未显示任何图像。
行项目之间没有数据泄漏。
定制产品不需要在订单中排在第一位。
重要： 请勿使用硬编码索引，例如event.raw.line_items[0].该[0] 引用仅检查第一个行项目。如果定制产品不是第一个，图像可能不会出现。
将图像与标题、价格和数量结合起来
产品标题、价格、数量和个性化图像已在实际发送的电子邮件中确认，包括在单个行项目上数量大于一的情况：
[% 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 %]
验证范围
仅图像循环：已验证。
多项订单：已验证。
带有产品标题和价格的图像：已验证。
带有产品标题、价格和数量的图像：已验证。
验证集成
使用真实的 Shopify 结账来测试设置。
下订单，定制 teeinblue 产品。
检查 Omnisend 中联系人的事件历史记录。
确认事件包含填充的
line_items[].properties数据。检查已发送的电子邮件（Email）。
确认图像是否正确加载。
测试一个包含多个商品的订单。
如果使用共享的订单确认工作流（Workflow），请测试一个没有自定义数据的订单。
动态预览和发送的电子邮件可能会产生不同的结果。使用真实的已发送电子邮件（Email）作为最终验证。
您还可以使用此条件创建一个细分（Segment），以确认事件数据已到达：原始 → 行项目 → 属性 → 名称 是 _customization_image
故障排除
图像未出现
检查以下内容：
该 Shopify 订单包含
_customization_image。prop.value中的图像 URL 可用。代码位于 自定义 HTML 块中。
该工作流使用真实的 Shopify 已下单 或 已付款订单 事件。
该电子邮件已使用自定义产品进行测试。
代码不使用硬编码的
[0]索引。触发器过滤器与工作流设置匹配。
自定义产品在订单中不是第一个。
检查电子邮件是否使用了如下引用：
event.raw.line_items[0]
这只检查第一行项目。用本文中的嵌套循环替换它，以便 Omnisend 检查每个行项目。
工作流未发送
检查工作流的频率限制器：自动化工作流 → 设置 → 频率
限制器可以跳过对同一联系人的重复测试发送。这可能看起来像触发失败。
API 编辑的电子邮件内容消失
如果您在另一个浏览器标签中打开电子邮件构建器时通过 API 编辑电子邮件，自动保存可能会覆盖您的更改。
在进行基于 API 的编辑之前，请关闭编辑器。在发送测试之前，请重新检查电子邮件内容。
合成订单事件无效
创建合成 已下订单 事件的 API 请求可能会被接受而没有错误，但仍然无法处理或附加到联系人。
使用真实的 Shopify 结账生成可用的订单事件。
常见问题
我需要自定义事件吗？
否 该设置使用 Omnisend 接收的原生 Shopify 订单事件。
我需要中间件或中继服务吗？
否 teeinblue 数据已经包含在 Shopify 订单的行项目属性中。
我应该创建一个单独的工作流吗？
为仅针对自定义订单发送电子邮件创建一个单独的工作流。为该工作流添加 _customization_image 触发器过滤器。
我可以将图像添加到现有的订单确认工作流中吗？
是的。 如果工作流应处理所有订单，请不要添加自定义过滤器。对于没有个性化数据的订单，请使用代码的回退版本。
标准个性化选择器支持此属性吗？
否 选择器不公开自定义行项目属性。使用自定义 HTML 块并手动输入 Liquid 循环。
循环可以处理多个行项目吗？
是的。 循环检查每个行项目，并跳过没有 _customization_image 的产品。
自定义产品需要在购物车中排第一吗？
否 嵌套循环不依赖于购物车位置。避免使用硬编码的 [0] 索引，这只检查第一个行项目。
我可以使用合成 API 事件进行测试吗？
否 使用真实的 Shopify 结账生成可用的订单事件。
没有找到您的问题的答案？ 通过应用内聊天或在 [email protected] – 我们全天候提供服务。