メタフィールドを使用した商品のお手入れ方法の追加
メタフィールドを使用すると、通常は管理画面で取得されない特別な情報を保存することで、Shopifyストアの機能や外観をカスタマイズできます。メタフィールドは、管理画面内で内部的に使用することも、オンラインストアに表示することもできます。
以下に、メタフィールドとその使用場所の例をいくつか紹介します。
- Shopifyの管理画面の商品ページで、梱包材に関する情報など、商品の発送指示を作成します。
- 1日で発送などの、推定処理時間や発送時間を作成し、オンラインストアの商品ページに表示します。
- 赤、黒、青などの商品の色情報を追加し、オンラインストアの商品ページに表示するか、メタフィールドによるスマートコレクションの作成に使用します。
- 一部の商品カテゴリーには、
colorカテゴリーメタフィールドが付属しています。商品で商品カテゴリーを選択した後、color カテゴリーメタフィールドに色のエントリーを追加できます。色のエントリーをバリエーションのオプションに連携させることができます。色のエントリーをバリエーションのオプションとして使用すると、ストアフロントの商品ページで色のオプションのバリエーションを見本として表示できます。カテゴリーメタフィールドについて、詳しくはこちら。
管理画面から直接、商品、コレクション、お客様、注文、およびストアの他の部分にメタフィールドを追加できます。
動的ソースに対応しているテーマを使用している場合、テーマエディタを使用してほとんどのメタフィールドをテーマに連携させることができます。旧デザインのテーマを使用している場合、またはテーマがサポートしていないメタフィールドタイプを追加したい場合は、テーマコードを編集するか、Shopify パートナーにサポートを依頼することができます。 Shopify パートナーへの依頼について、詳しくはこちら。
このページの内容
商品のお手入れ方法に関するチュートリアル
このチュートリアルでは、商品のお手入れ方法のメタフィールドを作成し、オンラインストアに表示する方法を学びます。
学習内容
このチュートリアルを完了すると、以下のことができるようになります。
- メタフィールドの定義の作成
- メタフィールドへの値の追加
- メタフィールドの公開
ステップ 1: メタフィールドの定義を作成する
管理画面から、「設定」 > 「メタフィールドとメタオブジェクト」に移動します。
「メタフィールド」セクションで、「商品のメタフィールド」をクリックします。
「定義を追加」をクリックします。
[名前] フィールドに「Care guide」と入力します。提案される標準定義のピルがフィールドの下に表示されます。[Care guide] ピルをクリックして、標準定義を使用します。標準のメタフィールドの定義について詳しくはこちらをご覧ください。
「保存」をクリックします。
メタフィールドの定義を保存したら、メタフィールドに値を追加する作業を開始できます。
ステップ 2: メタフィールドに値を追加する
Shopify の管理画面から、[商品] に移動します。
お手入れ方法を設定する商品をクリックします。
「商品のメタフィールド」で、「お手入れガイド」をクリックし、お手入れ方法を入力します。
「保存」をクリックします。
上記の手順を繰り返し、他の商品のメタフィールドにも値を追加します。
次に、オンラインストアにメタフィールドを公開します。
ステップ 3: オンラインストアにメタフィールドを公開する
商品のメタフィールドに値を追加したので、次にストアにメタフィールドを表示します。このステップでは、テーマエディタを使用して、メタフィールドを連携させるブロックやセクションを選択します。
セクションまたはブロックを追加した後、動的ソース連携アイコンをクリックしてメタフィールドを選択できます。
Shopify の管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマの横にある [テーマを編集] をクリックします。
画面上部のドロップダウンメニューを使用して、「商品」 > 「デフォルトの商品」を選択します。これにより、テーマエディタにデフォルトの商品テンプレートが読み込まれます。
「商品情報」セクションで、「ブロックを追加」 > 「折りたたみ可能な行」をクリックします。
見出しを入力します。
任意：リストからアイコンを選択するか、アイコンを表示しない場合は「なし」をクリックします。
「行コンテンツ」の横にある「動的ソースを連携」アイコンをクリックし、「お手入れガイド」を選択します。
「保存」をクリックして、商品のお手入れ方法を公開します。
お手入れ方法は、それが連携されている商品にのみ表示され、そのメタフィールドの値がない商品のセクションは空白のままになります。つまり、すべての商品で機能する単一の商品テンプレートを設定できるということです。