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

このページはMar 27, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-sales-channels/shop/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. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

  1. 関連するファイルを開きます。

  2. {%- if block.settings.show_dynamic_checkout -%}または{{ form | payment_button }}を含む行を見つけます。

  3. {%- 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>

Shopifyで販売を開始する準備はできていますか?

無料体験を試す