在商品頁面上顯示 Shop Promise

此頁面列印時間為 Nov 29, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/shipping/shop-promise/product-page。

如果商品預計在五個日曆日內於美國境內送出，則該合格商品的配送日期旁邊和商品頁面上會顯示 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>
  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>
  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>
  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>
  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>

準備好開始透過 Shopify 銷售商品了嗎？

免費試用