商品ページに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
商品ページを更新する
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
- 関連するファイルを開きます。
-
{%- if block.settings.show_dynamic_checkout -%}
または{{ form | payment_button }}
を含む行を見つけます。 -
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}
のすぐ下に新しい行を作成し、次の内容をその行に貼り付けます。
- [保存] をクリックします。
結果は次に似通った形で表示されます。
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
- 関連するファイルを開きます。
-
{%- if block.settings.show_dynamic_checkout -%}
または{{ form | payment_button }}
を含む行を見つけます。 -
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}
のすぐ下に新しい行を作成し、次の内容をその行に貼り付けます。
- [保存] をタップします。
結果は次に似通った形で表示されます。
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
- 関連するファイルを開きます。
-
{%- if block.settings.show_dynamic_checkout -%}
または{{ form | payment_button }}
を含む行を見つけます。 -
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}
のすぐ下に新しい行を作成し、次の内容をその行に貼り付けます。
- [保存] をタップします。
結果は次に似通った形で表示されます。
Shop Promiseモジュールのテーマを手動で上書きする
Shop Promiseモジュールには、ダークテーマとライトテーマがあります。モジュールでは、商品ページの背景色とのコントラスト比が高くなるテーマが自動的に使用されます。
テーマコードの読み取りや編集に精通している場合、Shop Promiseモジュールを手動で配置するために使用されるアンカー要素にデータ属性を追加することにより、モジュールの選択したテーマを上書きできます。
変更を加える前に、テーマを複製し、複製したテーマを編集することにより、変更内容を簡単に元に戻すことができるようにしてください。
手順
- 手順に従い、商品ページにShop Promiseモジュールを手動で配置して、テーマエディタを開いたままにしておきます。
- 新しく作成したアンカー要素にテーマデータ属性を追加し、ダークまたはライトに設定してください。
- [保存] をクリックします。
結果は次のいずれかに似通った形で表示されます。
または
- 手順に従い、商品ページにShop Promiseモジュールを手動で配置して、テーマエディタを開いたままにしておきます。
- 新しく作成したアンカー要素にテーマデータ属性を追加し、ダークまたはライトに設定してください。
- [保存] をタップします。
結果は次のいずれかに似通った形で表示されます。
または
- 手順に従い、商品ページにShop Promiseモジュールを手動で配置して、テーマエディタを開いたままにしておきます。
- 新しく作成したアンカー要素にテーマデータ属性を追加し、ダークまたはライトに設定してください。
- [保存] をタップします。
結果は次のいずれかに似通った形で表示されます。
または