在產品頁面顯示 Shop Promise

若符合資格的美國國內訂單中包含 Shopify 可預測在 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>
行動裝置
  1. Shopify app 中,點選 Menu 圖示。

  2. 銷售管道區段中,點選 線上商店 > 管理所有佈景主題

  3. 尋找您要編輯的佈景主題,點選 水平選單 按鈕以開啟動作選單,然後點選「編輯程式碼」。

  4. 開啟相關檔案。

  5. 尋找包含 {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }} 的那一行。

  6. {%- 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. 在新建立的錨點元素上加入一個佈景主題資料屬性,將其設為darklight
  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. 在新建立的錨點元素上加入一個佈景主題資料屬性,將其設為darklight
  3. 點選儲存

結果應類似下列其中一種:

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

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

為 Promise 模組新增自訂 HTML 或 Liquid

如果您的佈景主題支援自訂區塊,您可以使用「自訂 Liquid」區塊,將 Shop Promise 模組新增至產品頁面,無須編輯佈景主題程式碼。

使用自訂 Liquid 區塊新增 Promise 模組的步驟:

電腦版
  1. 在 Shopify 管理介面中,前往 網路商店

  2. 找到要編輯的佈景主題,然後點選編輯佈景主題

  3. 使用頂端選單列的範本選擇器,前往某個產品頁面。

  4. 在側邊欄選單中,找到商品資訊區段。

  5. 點選新增區塊,再從可用區塊清單中選取自訂 Liquid

  6. 在自訂 Liquid 文字欄位中,貼上以下程式碼:

<div class="delivery-promise__promise-container"></div>
  1. 拖曳該區塊至想要的位置,通常放在「購買按鈕」區塊下方。
  2. 點選儲存以套用變更。

若要指定佈景主題偏好(深色或淺色),請改用下列其中一項:

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

<div class="delivery-promise__promise-container" data-theme="light"></div>
行動裝置
  1. Shopify app 中,點選 Menu 圖示。

  2. 銷售管道區段中,點選 線上商店 > 管理所有佈景主題

  3. 找到使用中的佈景主題,點選編輯佈景主題

  4. 使用頂端的範本選擇器,前往某個產品頁面。

  5. 點選 產品資訊 區段。

  6. 點選 新增區塊,並選取 自訂 Liquid

  7. 在自訂 Liquid 文字欄位中,貼上以下程式碼:

<div class="delivery-promise__promise-container"></div>
  1. 拖曳該區塊至想要的位置,通常放在「購買按鈕」區塊下方。
  2. 點選 儲存 以套用變更。

若要指定佈景主題偏好(深色或淺色),請改用下列其中一項:

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

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

Shop Promise 徽章支援的語言

請參閱下表,瞭解 Shop Promise 徽章可顯示的語言。如果您的商店語言未受支援,則 Shop Promise 徽章會以英文顯示。

Shop Promise 徽章可顯示的語言。
中文 (簡體)中文 (繁體)克羅埃西亞文捷克文
丹麥文荷蘭文英文芬蘭文
法文德文希臘文印地文
匈牙利文印尼文義大利文日文
韓文立陶宛文馬來文挪威文 (Bokmål)
波蘭文葡萄牙文 (巴西)葡萄牙文 (葡萄牙)羅馬尼亞文
俄文斯洛伐克文斯洛維尼亞文西班牙文
瑞典文泰文土耳其文越南文