在商品頁面上顯示 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>