在产品页面上显示 Shop Promise

对于预计在不超过五个日历日内在美国境内完成的符合条件的配送，配送日期旁边以及产品页面上会显示 Shop Promise 徽章。此徽章可让客户知道他们的订单可获得快速且可靠的配送服务。

Shop Promise 申请被批准后，您应使用您的模板编辑器导航到产品页面，确认 Shop Promise 徽章已正确显示。

如果徽章未正确显示，则您需要手动放置 Shop Promise 模块。

手动放置 Shop Promise 模块

如果您擅长查阅和编辑模板代码，则可以自己确定需要在何处执行更改并更新产品页面。

确定要执行更改的位置

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

• main-product.liquid
• product-form.liquid
• product-template.liquid
• product.liquid

提示:

如果您不擅长查阅和编辑模板代码并且使用的是 Shopify 的模板，则您可以通过联系 Shopify 支持团队来更新您的模板。详细了解 Shopify 设计政策。如果您使用第三方模板并需要帮助，则可以联系模板开发人员或聘请 Shopify 合作伙伴。

更新产品页面

提示:

在执行任何更改前，请复制您的模板并对副本执行更改，以便您可以更轻松地恢复所做的任何更改。

步骤：

桌面

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

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

1. 点击保存。

结果应如下所示：

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

iPhone

1. 在 Shopify 应用中，点击 … 按钮。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
5. 打开相关文件。
6. 找到包含 {%- if block.settings.show_dynamic_checkout -%} 或 {{ form | payment_button }} 的行。
7. 直接在 {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 下方创建新行，然后将以下内容粘贴到该行中：

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

1. 点击保存。

结果应如下所示：

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

Android

1. 在 Shopify 应用中，点击 … 按钮。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
5. 打开相关文件。
6. 找到包含 {%- if block.settings.show_dynamic_checkout -%} 或 {{ form | payment_button }} 的行。
7. 直接在 {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 下方创建新行，然后将以下内容粘贴到该行中：

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

1. 点击保存。

结果应如下所示：

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

手动覆盖 Shop Promise 模块模板

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

如果您擅长读取和编辑模板代码，则可以通过向用于手动放置 Shop Promise 模块的锚定元素中添加数据属性来覆盖模块的所选模板。

在更改之前，请复制您的模板并编辑复制的模板，以便可轻松恢复任何更改。

提示:

如果您不擅长查阅和编辑模板代码并且使用的是 Shopify 的模板，则您可以通过联系 Shopify 支持团队来更新您的模板。详细了解 Shopify 设计政策。如果您使用第三方模板并需要帮助，则可以联系模板开发者或聘请 Shopify 合作伙伴。

步骤：

桌面

1. 请按照说明在您的产品页面上手动放置 Shop Promise 模块，然后将模板编辑器保持打开状态。
2. 将模板数据属性添加到新创建的锚定元素中并将其设置为深色或浅色。
3. 点击保存。

结果应类似于以下一个示例：

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

或

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

iPhone

1. 请按照说明在您的产品页面上手动放置 Shop Promise 模块，然后将模板编辑器保持打开状态。
2. 将模板数据属性添加到新创建的锚定元素中并将其设置为深色或浅色。
3. 轻触保存。

结果应类似于以下一个示例：

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

或

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

Android

1. 请按照说明在您的产品页面上手动放置 Shop Promise 模块，然后将模板编辑器保持打开状态。
2. 将模板数据属性添加到新创建的锚定元素中并将其设置为深色或浅色。
3. 轻触保存。

结果应类似于以下一个示例：

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

或

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