商品ページにポップアップのサイズ表を追加する
メタフィールドを使用すると、通常は管理画面で取得されない特別な情報を保存できるため、Shopifyストアの機能や外観をカスタマイズするのに役立ちます。メタフィールドは管理画面の内部で使用できるほか、オンラインストアに表示することもできます。
メタフィールドを使用すると、商品ページにリンクを表示するポップアップブロックにページ参照を追加できます。そのリンクをクリックするとポップアップが開き、ページのコンテンツが表示されます。ページのリッチテキストエディタを使用して、画像やその他のメディアを追加できます。
以下は、商品ページに追加できるポップアップ情報の例です。
- サイズ表
- お手入れ方法
- 組み立て手順
- 商品の仕様
- よくある質問
これは4つのステップからなるチュートリアルです。ページ参照メタフィールドを紹介し、ページ参照用の商品メタフィールドの作成、オンラインストア用の商品ページテンプレートの作成、新しいページの追加、特定の商品でのページの参照、特定の商品への商品ページテンプレートの適用を行います。このチュートリアルを使用して、ポップアップに表示したい任意のコンテンツを作成できます。このチュートリアルでは、全体を通してサイズ表を例として使用します。
このチュートリアルには、動的ソースをサポートするテーマが必要です。旧式のテーマを使用している場合、またはテーマがサポートしていないメタフィールドタイプを追加したい場合は、テーマコードを編集するか、Shopify パートナーに依頼することができます。
このページの内容
ステップ1：ページ用の商品メタフィールドを作成する
まず、商品ページ用のページ参照メタフィールド定義を作成する必要があります。商品メタフィールドは特定のページにリンクし、商品ごとにカスタマイズできます。同じテンプレートを使用する商品にページ参照を追加しない場合でも、コンテンツがあるかのようにポップアップのリンクテキストが表示されます。特定の商品にのみポップアップリンクを表示するには、商品テンプレートを作成し、それを関連する商品にのみ適用することができます。
ページ参照メタフィールドを使用すると、さまざまな種類の商品に合わせて異なるページを作成することで、異なる商品情報を表示できます。たとえば、幼児用のサイズ表と乳児用のサイズ表など、2つの異なる年齢層に合わせて2つの異なるサイズ表ページを作成し、幼児向けの商品にのみ幼児用サイズのページ参照を追加できます。
テーマエディタのポップアップブロックに接続するには、ページ参照用のメタフィールド定義を作成する必要があります。メタフィールド定義を作成すると、デフォルトで [ストアフロントへのアクセス] が選択されます。
手順：
デスクトップ
管理画面から、[設定] > [メタフィールドとメタオブジェクト] に移動します。
[メタフィールドの定義] セクションで、[商品] をクリックします。
[定義を追加] をクリックします。
[名前] フィールドに「サイズ表」と入力します。
[⊕ タイプを選択] をクリックします。
ドロップダウンメニューから [ページ] を選択します。デフォルトで [1ページ] が選択されています。
[保存] をクリックします。
モバイル
Shopify アプリから、
をタップし、
設定をタップします。ストア設定セクションで、メタフィールドとメタオブジェクトをタップします。
[メタフィールドの定義] セクションで、[商品] をタップします。
[+] をタップします。
[名前] フィールドに「サイズ表」と入力します。
[+ タイプを選択] をタップします。
タップして、ドロップダウンメニューから [ページ] を選択します。デフォルトで [1ページ] が選択されています。
[保存] または [✓] をタップします。
ステップ2：商品ページテンプレートを作成する
このチュートリアルには動的ソースをサポートするテーマが必要です。旧式のテーマを使用している場合、またはテーマがサポートしていないメタフィールドタイプを追加したい場合は、テーマコードを編集するか、Shopify パートナーに依頼することができます。
セクションまたはブロックを追加した後、動的ソースアイコンをクリックしてメタフィールドを選択できます。
サイズ表のポップアップリンクをすべての商品に追加しない場合は、新しい商品ページのテンプレートを作成する必要があります。この手順では新しい商品ページのテンプレートを作成しますが、既存のテンプレートを選択してカスタマイズすることも可能です。
手順：
デスクトップ
- 管理画面から、[オンラインストア] > [テーマ] に移動します。
- カスタマイズするテーマの横にある [テーマを編集] をクリックします。
- エディタの上部にあるホームページのドロップダウンメニューから「商品」をクリックし、続いて⊕「テンプレートを作成」をクリックして、新しいテンプレートを作成およびカスタマイズします。
- セクションのメニューサイドバーで、[テンプレート] > [商品情報] ブロックに移動し、⊕ [ブロックを追加] をクリックします。
- [ポップアップ] をクリックします。
- [リンクのラベル] フィールドに、サイズ表と入力します。これは、お客様がポップアップページのコンテンツを表示するためにクリックするテキストです。
- [ページ] の横にある動的ソースアイコンをクリックし、作成したページ参照メタフィールドをクリックして選択します。
- [保存] をクリックします。
モバイル
Shopify アプリから、
アイコンをタップします。販売チャネルセクションで、オンラインストア > すべてのテーマを管理をタップします。
カスタマイズするテーマの [テーマを編集] をタップします。
エディタの上部にあるホームページのドロップダウンメニューから「商品」をタップし、続いて⊕「テンプレートを作成」をタップして、新しいテンプレートを作成およびカスタマイズします。
セクションのメニューサイドバーで、[テンプレート] > [商品情報] ブロックに移動し、⊕ [ブロックを追加] をタップします。
[ポップアップ] をタップします。
[リンクのラベル] フィールドに、サイズ表と入力します。これは、お客様がポップアップページのコンテンツを表示するためにクリックするテキストです。
[ページ] の横にある動的ソースアイコンをタップし、作成したページ参照メタフィールドをタップして選択します。
[保存] または [✓] をタップします。
ステップ3：サイズ表を記載したページを追加する
メタフィールドが参照する、サイズ表のコンテンツを記載したページを作成する必要があります。すでにページを作成済みの場合は、ステップ4に進むことができます。
手順：
デスクトップ
- 管理画面から、[オンラインストア] > [ページ] に移動します。
- [ページを追加] をクリックします。
- [タイトル] フィールドに サイズ表 と入力し、[コンテンツ] にサイズ表の情報を追加します。
- [公開状況] セクションで、ページを「公開」に設定します。
- [保存] をクリックします。
モバイル
Shopify アプリから、
アイコンをタップします。**販売チャネル**セクションで、**オンラインストア** > **ページ**をタップします。
[ページを追加] をタップします。
[タイトル] フィールドに サイズ表 と入力し、[コンテンツ] にサイズ表の情報を追加します。
[公開状況] セクションで、ページを「公開」に設定します。
[保存] または [✓] をタップします。
メタフィールドで参照するサイズ表ページは必要なだけ作成できます。ただし、商品メタフィールドでは1つのページしかリンクできません。
ステップ4：ページを参照し、特定の商品に商品テンプレートを適用する
特定の商品にページ参照を追加すると、そのページの情報はその商品にのみ表示されます。その商品テンプレートを使用している商品でページ参照を空欄のままにした場合、リンクテキストはリンクとして表示されたままになります。しかし、ポップアップにはページ参照がなく空白で表示されるため、お客様を混乱させる可能性があります。衣料品や靴などサイズ表がある特定の商品タイプと、子ども用のおもちゃ、ジュエリー、その他のアクセサリーといった他の商品タイプとで、異なる商品ページテンプレートを使用することができます。
テンプレートについて、詳しくはこちら。
手順：
デスクトップ
- 管理画面から、[商品管理] に移動します。
- ページ参照を追加する商品をクリックします。
- 「商品のメタフィールド」セクションで、サイズ表のページ参照をクリックし、次に「ページを選択」をクリックして、サイズ表のページを選択します。
- 「テーマテンプレート」セクションで、ステップ2で作成したサイズ表の商品ページテンプレートを選択します。
- [保存] をクリックします。
モバイル
- Shopify アプリから、
アイコンをタップします
。 - ページ参照を追加する商品をタップします。
- 「商品のメタフィールド」セクションで、サイズ表のページ参照をタップし、次に「ページを選択」をタップして、サイズ表のページを選択します。
- 「テーマテンプレート」セクションで、ステップ2で作成したサイズ表の商品ページテンプレートを選択します。
- [保存] または [✓] をタップします。
これらの手順は、必要なだけ多くの商品で繰り返すことができます。