商品ページにポップアップサイズ表を追加する

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

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

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

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

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

このチュートリアルには、Online Store 2.0のテーマが必要です。以前のテーマを使用している場合や、テーマが対応していないメタフィールドタイプを追加する場合は、テーマコードを編集するか、Shopifyパートナーに依頼することができます。

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

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

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

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

手順

デスクトップ

1. 管理画面から、[設定] > [カスタムデータ] の順に移動します。

2. [メタフィールドの定義] セクションの [商品] をクリックします。

3. [定義を追加] をクリックします。

4. [名前] フィールドに、「サイズ表」と入力します。

5. [⊕タイプを選択] をクリックします。

6. ドロップダウンメニューから [ページ] を選択します。デフォルトでは [1ページ] が選択されています。

7. [保存] をクリックします。

iPhone

1. Shopifyアプリで、[…] > [設定] をタップします。
2. [カスタムデータ] をタップします。
3. [メタフィールドの定義] セクションで、[商品] をタップします。
4. [+] をタップします。
5. [名前] フィールドに、「サイズ表」と入力します。
6. [+タイプを選択] をタップします。
7. ドロップダウンメニューから、[ページ] をタップして選択します。デフォルトでは [1ページ] が選択されています。
8. [保存] をタップします。

Android

1. Shopifyアプリから、[☰] > [設定] をタップします。
2. [カスタムデータ] をタップします。
3. [メタフィールドの定義] セクションで、[商品] をタップします。
4. [+] をタップします。
5. [名前] フィールドに、「サイズ表」と入力します。
6. [+タイプを選択] をタップします。
7. ドロップダウンメニューから、[ページ] をタップして選択します。デフォルトでは [1ページ] が選択されています。
8. [✓] をタップして保存します。

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

このチュートリアルには、Online Store 2.0のテーマが必要です。以前のテーマを使用している場合や、テーマが対応していないメタフィールドタイプを追加する場合は、テーマコードを編集するか、Shopifyパートナーに依頼することができます。

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

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

手順

デスクトップ

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

iPhone

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

Android

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

ステップ3：サイズ表を使用してページを追加する

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

手順

デスクトップ

1. 管理画面から [オンラインストア] > [ページ] に移動します。
2. ページの追加をクリック
3. [タイトル] フィールドに「サイズ表」と入力し、[コンテンツ] にサイズ表の情報を追加します。
4. [公開/非公開] セクションで、ページを [公開] に設定します。
5. [保存] をクリックします。

iPhone

1. Shopifyアプリで、[…] > [オンラインストア] の順にタップします。
2. [ページ] をタップします。
3. [ページを追加] をタップします。
4. [タイトル] フィールドに「サイズ表」と入力し、[コンテンツ] にサイズ表の情報を追加します。
5. [公開/非公開] セクションで、ページを [公開] に設定します。
6. [保存] をタップします。

Android

1. Shopifyアプリから、[☰] > [オンラインストア] の順にタップします。
2. [ページ] をタップします。
3. [ページを追加] をタップします。
4. [タイトル] フィールドに「サイズ表」と入力し、[コンテンツ] にサイズ表の情報を追加します。
5. [公開/非公開] セクションで、ページを [公開] に設定します。
6. [✓] をタップして保存します。

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

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

特定の商品にページ参照を追加すると、そのページの情報はその商品のみに対して表示されます。その商品テンプレートを使用する商品のページ参照を空白のままにした場合でも、リンクテキストはリンクとして表示されます。ただし、ページ参照がない空白のポップアップでは、お客様の混乱を招く可能性があります。衣料品や靴などのサイズ表がある特定の商品タイプには別の商品ページテンプレートを使用して、子供用のおもちゃやジュエリー、その他のアクセサリーなどの他の商品タイプには商品テンプレートを使用することができます。

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

手順

デスクトップ

1. 管理画面から [商品管理] に移動します。
2. ページの参照に追加する商品をクリックします。
3. [商品メタフィールド] セクションで、[サイズ表] ページの参照をクリックしてから、[ページを選択] をクリックして [サイズ表] ページを選択します。
4. [テーマテンプレート] セクションで、ステップ2で作成した [サイズ表] 商品ページテンプレートを選択します。
5. [保存] をクリックします。

iPhone

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

Android

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

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