将小组件添加到主题

结账折扣和店面小组件是两件独立的事。折扣由 Shopify Function 强制执行，一旦您发布活动即可生效——无论小组件是否出现在主题上，它都会在结账时应用。小组件的作用是让买家在到达结账之前就能看到这项优惠：产品页面上的折扣档位表格，以及购物车中的一条简短提示。

注意

如果某个活动的折扣没有显示在产品页面上，但您已确认它在结账时生效，那么小组件很可能还没有启用——下面的步骤可以解决这个问题。

启用应用嵌入（推荐）

这是添加小组件最快的方式，无需手动定位：

1. 在 Shopify 后台，进入 在线商店 → 主题，然后对当前使用的主题点击 自定义。
2. 打开 应用嵌入。
3. 启用 Nock Quantity Breaks & BOGO。
4. 保存主题。

首页会在有买家的浏览器加载了启用嵌入的产品页面后，自动将此步骤标记为完成——通常在保存后一分钟内即可完成。

启用后，小组件会自行定位：它会在产品页面上查找您的价格和加入购物车区域，并在旁边渲染，同时在购物车和购物车抽屉中添加一行简短提示。

以区块形式添加小组件（精确定位）

如果自动定位落在了错误的位置，可以改用区块——它的优先级高于嵌入的自动定位：

1. 在主题编辑器中，打开您的产品模板。
2. 添加一个区块，选择 Nock Quantity Breaks & BOGO widget（小组件）。
3. 将其放置到您想要的位置。

小组件位置和自定义选择器

应用嵌入和区块都提供相同的两个设置：

设置	作用
小组件位置	Auto（默认）、Before add to cart、After price，或 Custom selector。
自定义 CSS 选择器	仅在位置设为 Custom selector 时使用——小组件会渲染在匹配该 CSS 选择器的元素之后。

提示

您也可以直接从应用内调整放置位置，无需改动主题代码：打开 设置应用中：Settings → 店面小组件数量折扣小组件在产品页面中显示的位置及放置方式。应用中：Storefront widget，或某个活动的 放置位置默认自动放置——小组件会自行找到价格和数量框下方的位置。如果位置不对，可以自行选择放置位置。应用中：Placement 标签页，使用放置选择器在您店铺的实时预览上点击确切的位置。使用 恢复自动应用中：Reset to automatic 可恢复默认行为。

各处会显示什么

• 产品页面 会显示完整的小组件：档位表格或购物车目标进度条，样式按照活动 Widget 标签页的设置渲染。
• 购物车页面和购物车抽屉 会显示一条更轻量的提示——在相关购物车商品下方一行文字，说明已解锁的内容，或达到下一档位还差多少。

接下来：创建首个活动，这样小组件才有内容可以展示。