在产品页面上显示 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

更新产品页面

步骤:

桌面
  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 模块的锚定元素中添加数据属性来覆盖模块的所选模板。

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

步骤:

桌面
  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>
没有找到您需要的答案?我们将为您提供帮助。