ヘルプ
ログイン

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

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 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. 新しく作成したアンカー要素にテーマのデータ属性を追加し、値を [dark] または [light] に設定します。
  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. 新しく作成したアンカー要素にテーマのデータ属性を追加し、値を [dark] または [light] に設定します。
  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. 管理画面から、[オンラインストア] > [テーマ] に移動します。

  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バッジを表示できる言語。
中国語 (簡体字)中国語 (繁体字)クロアチア語チェコ語
デンマーク語オランダ語英語フィンランド語
フランス語ドイツ語ギリシャ語ヒンディー語
ハンガリー語インドネシア語イタリア語日本語
韓国語リトアニア語マレー語ノルウェー語 (ブークモール)
ポーランド語ポルトガル語 (ブラジル)ポルトガル語 (ポルトガル)ルーマニア語
ロシア語スロバキア語スロベニア語スペイン語
スウェーデン語タイ語トルコ語ベトナム語