今回は、ちょっとだけ上級者向け…だけど、実はとっても便利なShopifyのカスタムデータ（メタフィールド）を、商品ページに表示する方法をわかりやすく解説します！
カスタムデータ（メタフィールド）とは
例えば、Shopifyの商品登録画面にある「説明」枠に商品説明から素材、サイズ、生産国などさまざまな情報をまとめて書いているけど、入力欄を分けたい！
なんてときに便利な機能です。
カスタムデータ（メタフィールド）の表示方法
それではさっそくカスタムデータ（メタフィールド）を表示するやり方を解説していきます。
商品ページを確認して情報を整理する
まずは商品ページを見てどのような表示にするかを決めてください。
カスタムデータ（メタフィールド）を登録する。
まず、左下にある歯車マーク［設定］をクリックします。
開いた設定メニューの中に「カスタムデータ」があるので開きます。
メタフィールドの定義の「商品」を開きます。
商品のメタフィールド定義を開いたら、右上にある「定義を追加する」をクリックします。
そうすると追加用の枠が出てくるので上から順に入力していきます。
- 名前：商品詳細ページに表示される項目名となります。
- ネームスペースとキー：custom.のあとに管理しやすい任意の名前を入れてください。
- 説明：何のメタフィールド定義なのかわかるようにメモとしてつかってください。
ここまで入力できたら左下の保存ボタンをクリックします。これでカスタムデータ（メタフィールド）の登録は完了です。
登録が終わった状態で商品登録画面を確認してもらうと作成したメタフィールド定義が表示されているはずです。
次のページに表示させる設定をする前準備で、1商品だけ作成したメタフィールドを入力しておきましょう。
登録したカスタムデータ（メタフィールド）を商品ページに表示する方法
次に登録した情報を商品ページに表示する方法を説明していきます。
テーマのカスタマイズを開き、商品詳細ページを表示します。
表示させたい場所にブロックを追加します。
ブロックは「カスタマイズされたLiquid」を選択してください。
編集画面を開いたらLiquidコードを入力する枠があると思うので、以下のサンプルコードを編集して入力します。
<p><strong>サイズ:</strong> {{ product.metafields.custom.ここに登録したネームスペースとキーを入力 }}</p>
表示されていることを確認できたら右上の保存ボタンをクリックして完了です。
まとめ
今回は、Shopifyのカスタムデータを商品ページに表示する方法を紹介しました。
ちょっと難しかったかもしれませんが、一歩ずつ試していけば大丈夫です！カスタムデータを使いこなして、あなたのショップの魅力をさらに引き出してくださいね！
ECサイトで売上を上げていくためには商品詳細ページはとても重要なページです。どんどんPDCAサイクルを回して改善していきましょう！
