メタフィールドを使用して商品ページにポップアップを追加する

このページはJun 26, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/custom-data/metafields/pop-up-tutorialをご覧ください。

メタフィールドを使用すると、通常では管理画面に取り込めない特定の情報を保存することができ、Shopifyストアの機能や外観をカスタマイズすることができます。メタフィールドは管理画面で内部的に使用できます。また、オンラインストアに表示することを選択できます。

メタフィールドを使用すると、商品ページにリンクを表示するポップアップブロックに、ページ参照を追加できます。このリンクをクリックすると、ページの内容を表示するポップアップが開きます。ページでリッチテキストエディタを使用すると、画像やその他のメディアを追加できます。

以下は、商品ページに追加できるポップアップ情報の例です。

  • サイズ表
  • お手入れ方法
  • 組み立て方法
  • 商品仕様
  • よくある質問

このチュートリアルでは、ページ参照の商品メタフィールドの作成、オンラインストアの商品ページテンプレートの作成、新しいページの追加、特定商品でのページ参照と特定商品への商品ページテンプレートの適用、という4つのステップを通じて、ページ参照メタフィールドについて説明します。

Online Store 2.0のテーマを利用している場合、テーマエディタを使用して、ほとんどのメタフィールドとテーマを連携させることができます。以前のテーマを利用している場合、またはテーマで使用できないメタフィールドタイプを追加したい場合は、テーマコードを編集するか、Shopifyパートナーを雇うことができます。

目次

ステップ1：ページの商品メタフィールドを作成する

まず、商品ページのページ参照メタフィールドの定義を作成する必要があります。商品メタフィールドは特定ページにリンクし、各商品に対してカスタマイズすることができます。同じテンプレートを使用している商品にページ参照を追加しない場合、ポップアップリンクのテキストは、内容があるような状態で表示されます。特定商品のみにポップアップリンクを表示させる場合は、商品テンプレートを作成し、該当する商品のみに適用します。

ページ参照メタフィールドを使用すると、異なる商品タイプごとに異なるページを作成することで、異なる商品情報を表示させることができます。たとえば、2つの異なる年齢層に向けて、2つの異なるサイズ表 (ベビー用と幼児用など) を記載したページを作成して、幼児用の商品にのみ、幼児サイズのページ参照を追加することができます。

テーマエディタでポップアップブロックにページ参照を接続するには、ページ参照用のメタフィールド定義を作成する必要があります。ストアフロントアクセスは、メタフィールド定義を作成する際にデフォルトで選択されます。

手順

  1. 管理画面から、[設定] > [カスタムデータ] の順に移動します。
  2. [メタフィールドの定義] セクションの [商品] をクリックします。
  3. [定義を追加] をクリックします。
  4. [名前] フィールドで、メタフィールドの定義に名前を付けます。たとえばサイズ表を作成する場合は、定義に「Size chart」などの名前を付けます。
  5. [⊕タイプを選択] をクリックします。
  6. ドロップダウンメニューから [ページ] を選択します。デフォルトでは [1ページ] が選択されています。
  7. [保存] をクリックします。
  1. Shopifyアプリで、[…] > [設定] をタップします。
  2. [カスタムデータ] をタップします。
  3. [メタフィールドの定義] セクションで、[商品] をタップします。
  4. [+] をタップします。
  5. 定義に名前を付けます。たとえばサイズ表を作成する場合は、定義に「Size chart」などの名前を付けます。
  6. [+タイプを選択] をタップします。
  7. ドロップダウンメニューから、[ページ] をタップして選択します。デフォルトでは [1ページ] が選択されています。
  8. [保存] をタップします。
  1. Shopifyアプリから、[☰] > [設定] をタップします。
  2. [カスタムデータ] をタップします。
  3. [メタフィールドの定義] セクションで、[商品] をタップします。
  4. [+] をタップします。
  5. 定義に名前を付けます。たとえばサイズ表を作成する場合は、定義に「Size chart」などの名前を付けます。
  6. [+タイプを選択] をタップします。
  7. ドロップダウンメニューから、[ページ] をタップして選択します。デフォルトでは [1ページ] が選択されています。
  8. [✓] をタップして保存します。

ステップ2：商品ページのテンプレートを作成する

Online Store 2.0のテーマを利用している場合は、テーマエディタを使用して、ページ参照とテーマを連携させることができます。以前のテーマを使用している場合や、テーマが対応していないメタフィールドタイプを追加する場合は、テーマコードを編集するか、Shopifyパートナーに依頼することができます。

セクションまたはブロックを追加した後、動的ソースアイコンをクリックしてメタフィールドを選択できます。

「動的ソースを連携する」のアイコン

ポップアップブロックを追加しない商品がある場合は、新しい商品ページテンプレートを作成する必要があります。このステップでは新しい商品ページテンプレートを作成しますが、その代わりに、既存の商品ページテンプレートを選択してカスタマイズすることもできます。

手順

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. カスタマイズするテーマの横の [カスタマイズ] をクリックします。
  3. エディタ上部の [ホームページ] ドロップダウンメニューから、[商品] をクリックし、[⊕テンプレートを作成] をクリックして、新しいテンプレートを作成してカスタマイズします。
  4. [セクション] メニューサイドバーで、[テンプレート] > [商品情報] ブロックの順に移動し、[⊕ブロックを追加] をクリックします。
  5. [ポップアップ] をクリックします。
  6. リンクラベルを入力します。これは、お客様がポップアップページのコンテンツをクリックした内容を表示するテキストです。たとえば、ポップアップページがサイズ表の場合は、リンクラベルを「Size chart」などとします。
  7. [ページ] の横の動的ソースアイコンをクリックし、作成したページ参照メタフィールドをクリックして選択します。
  8. [保存] をクリックします。
  1. Shopifyアプリで、[…] > [オンラインストア] の順にタップします。
  2. [すべてのテーマを管理する] をタップします。
  3. カスタマイズするテーマの横の [カスタマイズ] をタップします。
  4. エディタ上部の [ホームページ] ドロップダウンメニューから、[商品] をタップして [⊕テンプレートを作成] をタップし、新しいテンプレートを作成してカスタマイズします。
  5. [セクション] メニューサイドバーで、[テンプレート] > [商品情報] ブロックの順に移動し、[⊕ブロックを追加] をタップします。
  6. [ポップアップ] をタップします。
  7. リンクラベルを入力します。これは、お客様がポップアップページのコンテンツをクリックした内容を表示するテキストです。たとえば、ポップアップページがサイズ表の場合は、リンクラベルを「Size chart」などとします。
  8. [ページ] の横で、動的ソースアイコンをタップし、作成したページ参照メタフィールドをタップして選択します。
  9. [保存] をタップします。
  1. Shopifyアプリから、[☰] > [オンラインストア] の順にタップします。
  2. [すべてのテーマを管理する] をタップします。
  3. カスタマイズするテーマの横の [カスタマイズ] をタップします。
  4. エディタ上部の [ホームページ] ドロップダウンメニューから、[商品] をタップして [⊕テンプレートを作成] をタップし、新しいテンプレートを作成してカスタマイズします。
  5. [セクション] メニューサイドバーで、[テンプレート] > [商品情報] ブロックの順に移動し、[⊕ブロックを追加] をタップします。
  6. [ポップアップ] をタップします。
  7. リンクラベルを入力します。これは、お客様がポップアップページのコンテンツをクリックした内容を表示するテキストです。たとえば、ポップアップページがサイズ表の場合は、リンクラベルを「Size chart」などとします。
  8. [ページ] の横で、動的ソースアイコンをタップし、作成したページ参照メタフィールドをタップして選択します。
  9. [✓] をタップしてテーマを保存します。

ステップ3：商品情報を含むページを追加する

メタフィールドが参照する内容を含むページを作成する必要があります。ページがすでに作成されている場合は、ステップ4に進みます。

手順

  1. 管理画面から [オンラインストア] > [ページ] に移動します。
  2. ページの追加をクリック
  3. ページに名前を付け、商品ページのポップアップに表示する内容を作成します。
  4. [公開/非公開] セクションで、ページを [公開] に設定します。
  5. [保存] をクリックします。
  1. Shopifyアプリで、[…] > [オンラインストア] の順にタップします。
  2. [ページ] をタップします。
  3. [ページを追加] をタップします。
  4. ページに名前を付け、商品ページのポップアップに表示する内容を作成します。
  5. [公開/非公開] セクションで、ページを [公開] に設定します。
  6. [保存] をタップします。
  1. Shopifyアプリから、[☰] > [オンラインストア] の順にタップします。
  2. [ページ] をタップします。
  3. [ページを追加] をタップします。
  4. ページに名前を付け、商品ページのポップアップに表示する内容を作成します。
  5. [公開/非公開] セクションで、ページを [公開] に設定します。
  6. [✓] をタップして保存します。

ページは、メタフィールドでの参照に必要な数だけ作成できますが、商品メタフィールド内では1ページのみリンクできます。

ステップ4：ページを参照し、商品テンプレートを特定の商品ページに適用する

特定の商品にページ参照を追加すると、そのページの情報はその商品のみに対して表示されます。その商品テンプレートを使用する商品のページ参照を空白のままにした場合でも、リンクテキストはリンクとして表示されます。ただし、ページ参照がない空白のポップアップでは、お客様の混乱を招く可能性があります。このような場合は、特定の商品タイプに対して異なる商品ページテンプレートを使用できます。たとえば、ポップアップブロック内にサイズ表ページがある衣料品用の商品テンプレートを作成した後に、ポップアップブロックを追加する必要がないバッグ用の商品テンプレートを作成することができます。

テンプレートについて詳しくはこちら。

手順

  1. 管理画面から [商品管理] に移動します。
  2. ページの参照に追加する商品をクリックします。
  3. [商品のメタフィールド] セクションで、作成したページ参照メタフィールドをクリックし、[ページを選択] をクリックします。
  4. ドロップダウンメニューから、作成したページを選択します。
  5. [テーマテンプレート] セクションで、ステップ2で作成した商品ページテンプレートを選択します。
  6. [保存] をクリックします。
  1. Shopifyアプリから、 [商品] > [すべての商品] に移動します。
  2. ページ参照を追加する対象の商品をタップします。
  3. [メタフィールド] セクションで、[すべてを表示] をタップします。
  4. 作成したページ参照メタフィールドをタップし、作成したページをタップして選択します。
  5. [テーマテンプレート] セクションで、ステップ2で作成した商品ページテンプレートを選択します。
  6. [保存] をタップします。
  1. Shopifyアプリから、 [商品] > [すべての商品] に移動します。
  2. ページ参照を追加する対象の商品をタップします。
  3. [メタフィールド] セクションで、[すべてを表示] をタップします。
  4. 作成したページ参照メタフィールドをタップし、作成したページをタップして選択します。
  5. [テーマテンプレート] セクションで、ステップ2で作成した商品ページテンプレートを選択します。
  6. [✓] をタップして保存します。

必要な数の商品に対して、以上のステップを繰り返します。

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

無料体験を試す