このチャプターの目次
このキャプチャーでは、Shopify Online Store 2.0以降で追加された機能メタフィールドについて解説していきたいと思います。
メタフィールドとは
メタフィールドとは、カスタムフィールドに近いです。現時点では、商品ページに好きな付加情報を追加することができます。商品ページには、値段や在庫などShopifyで用意させているフィールド（項目）があります。しかし、自分でフィールド（項目）を増やしたい場合に困ります。そこで、メタフィールドが役に立ちます。
いままでのShopify(1.0)は、メタフィールドを実装する場合、APIや特別なアプリが必要でした。つまり、実装が難しいため知る人ぞ知る機能でした。
しかし、Shopify2.0からメタフィールドが管理画面から簡単に実装できるようになりました。
メタフィールドを実装する
本書での完成形を確認します。皆さんは各自のほしい情報、フィールドを実装してください
商品ページの「中古市場の価格」の部分をメタフィールドで実装します。
このサイトは中古本を販売するサイトです。「中古市場の価格」を表示することで自サイトの値段が格安だということを示し、購買意欲を上げる意図があります。
メタフィールドを実装する手順
- 「設定」をクリックしてください。
- 「メタフィールド」をクリック。現時点では、「商品」と「バリエーション」が編集可能になっていますね。今回は、「商品」フィールドをクリックします。
- どちらでもよいので、「定義を追加」をクリックします。
- 追加する情報を入力してください。
- 名前タブは、カーソルを合わせると「推奨される定義」が出てきます。商品のサブタイトルなど、すでに用途が決まっていて定義に合いそうなものはプルダウンから選んでください。今回は、自分で定義していきたいと思います。
- ネームスペースとキー [my_fields.]の後ろに任意のキーを半角英数字で入力してください。今回は、[my_fields.test_price]とします。
- 説明 自分でわかりやすいように入力してください。未入力でも問題ありません。
- コンテンツタイプ 今回は、値段を定義するので「数値」を選択します。最小は「1円」最大「10万」とします。※単位は入力しません。
コンテンツタイプは、なにを選択すればよいかわからない場合は、以下のサイトを参考にしてください。「例」もありますのでそちらを参考にしてください。
- 「商品管理」をクリック
- 「すべての商品」をクリック
- 商品を1つ選択します。
- 商品の管理画面ページ内の下部にメタフィールドが追加されています。
- 中古市場の価格を入力したいと思います。自分で調べた感じ最安値が600円なので「600」を入力します。
- 保存をクリックします。
入力した値段を商品ページに表示するように設定したいと思います。
- 「オンラインストア」をクリック
- テーマの「カスタマイズ」をクリック
- 商品ページの「デフォルトの商品ページ」をクリックします。※テーマはDawnです
- プレビューの「変更」ボタンをクリックして、7番で選択した商品を選んでください。
- 右側のページカスタマイズ画面を修正します。「ブロックを追加」をクリック。
商品のタイトルと商品価格の間に追加してください。
- テキストボックスを変更します。「動的リソースを挿入」をクリックします。
- 先ほど作成した「中古市場の価格」をクリックします。
- メタフィールドは、価格だけ格納してあります。値段以外の文言は、固定でテキストボックスに記述します。
- 他の商品も、商品管理画面ページのメタフィールド欄に値段を記述すると表示されるとおもいます。
メタフィールドは、他にもコンテンツタイプがあります。他のタイプも試してみてください。また、今後は注文ページも対応するみたいです。注文ページこそメタフィールドの強みを出せるかなと思います。楽しみです。