在商品頁面上顯示 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>
沒有找到您需要的答案嗎?我們很樂意為您提供協助。