商品ページにShop Promiseを表示する

このページはSep 09, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/fulfillment/setup/shop-promise/product-pageをご覧ください。

Shop Promiseバッジは、アメリカ国内で5暦日以内の配達が予定されている対象商品の配達日の横と商品ページに表示されます。お客様はこのバッジを見て、自分の注文の配達が迅速に行われ、なおかつ信頼できることを確認できます。

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. 管理画面から [オンラインストア] > [テーマ] に移動します。
  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で販売を開始する準備はできていますか?

無料体験を試す