礼品功能契合您构建的技术栈,且不做任何改动
自定义购物车抽屉同样需要礼品选项。为任意元素添加一个类名,Gift Block 就会在那里渲染,其余部分保持不变。
模板保持您交付时的样子
模板是从零构建的,还是改得面目全非?Gift Blocks 是随应用嵌入加载的模板应用区块,礼品功能上线后,模板代码中没有任何需要您维护的东西。
- 无需维护代码片段。模板文件可以保持交付时的样子。尽管重构:其中没有缠绕在一起的礼品代码片段。
- 按您的节奏更新模板。模板更新后 Gift Blocks 会自动重新挂载,下一个版本无需礼品检查清单。如果非要周五上线,也没问题。
- 应用区块放在您的分区支持的位置。在商品页和购物车页,Gift Blocks 和其他应用区块一样添加。分区不支持应用区块时,Wrapped 会自行放置区块。
您自己的购物车抽屉,内含 Gift Block
购物车抽屉是您自己构建的?每个店面 Gift Block 都为此提供了三个稳定的接入点。大多数商店用不到它们:没有它们时,Wrapped 会自行放置每个区块。
- 由您选择的类名。Gift Block 会在带有该类名的元素内渲染:每个订单行下方、结账按钮上方,或设计需要的任何位置。手机和桌面的标记都可以带上它。
- 由您命名的 JavaScript 事件。当顾客保存或移除礼品选项时,会在
document和document.documentElement上派发。事件不携带购物车数据,由您的监听器获取购物车并按您的方式重绘抽屉。 - 用于 CSS 的 UUID。每个区块都在其
uuid属性中带有它,这样抽屉中的 Gift Block 可以更紧凑,而购物车页中的保持原有空间。
Gift Blocks 适用于
- 模板自带的抽屉。自动放置。
- Shopify 上最热门的购物车抽屉应用。抽屉延迟挂载时会重新构建。
- 您自己构建的抽屉。按您选择的类名放置。
购物车和结账中使用 Shopify 自己的组件
如果您了解 Shopify,就已经知道礼品功能如何运行。每个礼品选项都是真正的 Shopify 产品,有自己的价格、库存和图片,购物车和结账则运行在 Shopify 自己的扩展点上。
- 用于组合的购物车转换。合并时,礼品通过 Shopify 购物车转换函数位于其商品的订单行内。分项时,礼品单独成一行。无论哪种方式,订单都会显示每个待拣货的订单行。
- 用于礼品折扣的折扣函数。礼品产品折扣自动应用,和其他折扣一起显示在 Shopify 折扣中,并可与产品、订单和运费折扣叠加。无需任何人输入折扣码。
- 在 Shopify Plus 结账中。结账 Gift Block 是一个结账 UI 扩展,在 Shopify 的结账编辑器中放置,样式沿用您的结账品牌样式。重新设计结账样式,区块也会随之变化。



礼品数据出现在您的数据流已在读取的地方
您的 ERP 同步和 3PL 导入已经在读取 Shopify 订单。礼品数据就出现在这些地方,无需接入新的数据源,也没人需要把礼品留言重新输入仓库系统。
- 订单行属性和订单属性。礼品选项、收礼人、赠送人和留言,使用商品礼品功能时在礼品订单行上,使用订单礼品功能时在订单上。
- 您的映射所需的键。属性名称可以与您的导入格式一致,以下划线开头的属性会对顾客隐藏,但仍保留在订单上。
- 解析器可以找到的摘要。礼品摘要由 Liquid 模板生成,写入订单备注,位于两行 — Wrapped Gifting Attributes — 之间。备注的其余内容保持不变。
- 与其他标签和谐共处。标签为 🎁 Wrapped 或您自定义的标签,并与订单上已有的标签合并。
交付客户商店,无需额外解释
下一位开发者接手的模板中没有我们的任何礼品代码,客户团队在 Shopify 后台管理礼品功能,外观保持您设定的样子。
- 在测试模板上准备就绪。在测试模板上设置礼品功能,模板上线当天即可使用。
- 由客户团队管理。区块的外观和文字都在礼品编辑器中,所以把“作为礼物”改成“节日包装”由他们决定,不必找您提工单。
- 交接说明只需一张便签。如果您通过类名放置了区块,请注明它指向的元素,因为那部分标记是您的。其他一切都在 Shopify 后台。
开发者最先问的问题
下次模板更新会破坏礼品功能吗?
不会。Gift Blocks 是随应用嵌入加载的模板应用区块,模板文件可以保持交付时的样子,模板更新后区块会自动重新挂载。唯一需要迁移的是您自己添加的标记:类名指向的元素在新版本中也需要存在。
Gift Block 可以放在我自己构建的购物车抽屉中吗?
可以。为抽屉中的元素添加一个您选择的类名,Gift Block 就会在其中渲染。使用商品礼品功能时,将该元素放在订单行循环内,让每件商品都有自己的区块。手机和桌面各自的标记都可以带上该类名。
JavaScript 事件会携带购物车数据吗?
不会。当顾客保存或移除礼品选项时,Wrapped 会在 document 和 document.documentElement 上派发您命名的事件,仅此而已。由您的监听器获取购物车并运行您自己的代码,例如无需刷新页面即可重绘自定义抽屉。
我的代码可以依赖 Gift Block 的哪些部分?
三个:您选择的类名、您命名的事件,以及区块 uuid 属性中的 UUID。Gift Block 内部的标记不在其中,所以请基于这三项构建,外观交给礼品编辑器。
ERP 或 3PL 导入能从礼品订单中获得什么?
标准的 Shopify 订单数据。礼品选项、收礼人、赠送人和留言,使用商品礼品功能时是订单行属性,使用订单礼品功能时是订单属性,名称可以与您的导入格式一致。礼品摘要由 Liquid 模板生成,写入订单备注,位于两行 — Wrapped Gifting Attributes — 之间,🎁 Wrapped 标签或您自定义的标签会与订单标签合并。属性在订单创建时即已存在。备注摘要和标签会在一两分钟内添加。
我可以设置结账 Gift Block 的样式吗?
通过结账品牌样式设置。在 Shopify Plus 上,结账 Gift Block 是一个结账 UI 扩展,在 Shopify 的结账编辑器中放置,沿用您已设置的结账品牌样式,可显示在每件商品下方,也可为整个订单显示一次。
… Before we had even paid a cent for Wrapped, Adam answered questions, got into the nitty-gritty of coding and integration with our web developer. …