在您的产品页面上显示 Shop Promise

对于预计可在 5 个日历日或更短时间内在美国国内完成配送的符合条件的订单，Shop Promise 徽章会显示在配送日期旁边以及产品页面上。此徽章可让客户知道他们的订单包含快速可靠的配送服务。

在您激活 Shop Promise 后，您应使用模板编辑器导航到产品页面，以确认 Shop Promise 徽章是否正确显示。

如果徽章未正确显示，请确保您的商店已激活快捷结账按钮。您还可以通过多种选项来自定义 Shop Promise 徽章的显示。

在此页面上

如果您熟悉模板代码的阅读和编辑，则可以确定在何处进行更改并更新产品页面。

Shop Promise 模块的代码需要包含在产品页面的产品表单中，该表单应类似于 {%- form 'product', product -%}。根据您的模板，Shop Promise 模块可能位于不同位置。以下是常见位置：

桌面版

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击图标打开操作菜单，然后点击编辑代码。
打开相关文件。
找到包含 {%- if block.settings.show_dynamic_checkout -%} 或 {{ form | payment_button }} 的代码行。
在 {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 正下方创建新的一行，然后将以下内容粘贴到该行上：

<div class="delivery-promise__promise-container"></div>

结果应类似于以下内容：

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

移动设备

在 Shopify app 中，轻触图标。
在 销售渠道 部分中，轻触 在线商店 > 管理所有模板。
找到要编辑的模板，轻触 … 按钮以打开操作菜单，然后轻触编辑代码。
打开相关文件。
找到包含 {%- if block.settings.show_dynamic_checkout -%} 或 {{ form | payment_button }} 的代码行。
在 {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 正下方创建新的一行，然后将以下内容粘贴到该行上：

<div class="delivery-promise__promise-container"></div>

结果应类似于以下内容：

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Shop Promise 模块有深色和浅色两个主题。该模块会自动使用与产品页面背景色相比对比度最高的主题。

如果您熟悉模板代码的阅读和编辑，则可以通过向用于手动定位 Shop Promise 模块的锚点元素添加数据属性，来覆盖模块的选定主题。

在进行任何更改之前，请复制您的模板并编辑该副本模板，以便您可以轻松地还原所做的任何更改。

桌面版

结果应类似于以下任一内容：

<div class="delivery-promise__promise-container" data-theme="dark"></div>

或

<div class="delivery-promise__promise-container" data-theme="light"></div>

移动设备

结果应类似于以下任一内容：

<div class="delivery-promise__promise-container" data-theme="dark"></div>

或

<div class="delivery-promise__promise-container" data-theme="light"></div>

如果您的模板支持自定义块，那么您可以使用自定义 Liquid 块将 Shop Promise 模块添加到产品页面，而无需编辑模板代码。

桌面版

<div class="delivery-promise__promise-container"></div>

如果您想指定主题偏好设置（深色或浅色），请改用以下代码之一：

<div class="delivery-promise__promise-container" data-theme="dark"></div>

或

<div class="delivery-promise__promise-container" data-theme="light"></div>

移动设备

<div class="delivery-promise__promise-container"></div>

如果您想指定主题偏好设置（深色或浅色），请改用以下代码之一：

<div class="delivery-promise__promise-container" data-theme="dark"></div>

或

<div class="delivery-promise__promise-container" data-theme="light"></div>

请参阅下表，了解 Shop Promise 徽章可以显示的语言。如果您的商店语言不受支持，则 Shop Promise 徽章将以英语显示。