Shopifyのメタフィールド機能を使ってみる
こんにちは。Gaji-Labo 横田です。Shopify でテーマ開発していると、管理画面で独自のフィールドを追加したくなる場面があります。今回は Shopify のメタフィールド（Metafields）を使って任意の情報を表示させる方法を紹介します。
Shopify のメタフィールドとは
公式のヘルプセンターに解説がありますが、メタフィールドとは、管理画面で任意のフィールドと値を定義し、特定の情報を追加できる機能のことです。この記事を書いている時点では、「商品」「バリエーション」「コレクション」「顧客」「注文」「ページ」「ブログ」「ブログ記事」の8つのフィールドで使用することができるようになっています。Shopify のデフォルト機能なので、別途アプリを導入せずとも利用できるのがありがたいですね。
メタフィールドで定義できるコンテンツタイプと値の一覧は、公式のメタフィールドのコンテンツタイプで確認できます。
メタフィールドを定義する
Shopify の管理画面 > 設定 > メタフィールドで定義したいフィールドを選択し、定義を追加するボタンから始めます。今回はブログ記事にメタフィールドを追加したいと思います。
「名前」「ネームスペースとキー」を入力し、「コンテンツタイプ」を選択します。
「ネームスペースとキー」に定義した値は、liquid ファイルで呼び出す変数として使います。一度保存すると、後から変更ができないので注意です。
「コンテンツタイプ」は用途にあわせて選びます。この例では単一行のテキストを。「検証」のセクションで細かい設定もできます。
追加した定義が複数の場合は、ピン止めする順番で、意図した順に並べ替えることもできます。
定義したフィールドにコンテンツを挿入する
Shopify の管理画面 > 販売チャネルのオンラインストア > ブログ記事の編集画面を見ると、メタフィールドセクションが追加されています。
メタフィールドの定義後にブログ記事を新規追加する時は、いったん保存するとメタフィールドセクションが追加されます。すべて表示 で進むと、定義したメタフィールドにコンテンツを挿入することができるので、任意のコンテンツを挿入し、保存します。
定義したメタフィールドをページに表示する
定義したメタフィールドをページに表示させるには、表示したいページの liquid ファイルに二重中括弧 {{ }} で「ネームスペースとキー」の定義を出力させます。今回はブログ記事ページに表示させたいので sections/article-template.liquid に追加。
<div>
{{ article.metafields.custom._test }}
{{ article.metafields.custom._test2 }}
</div>これでブログ記事ページに、任意に定義した情報を表示させることができるようになりました！
終わりに
Shopify デフォルトのメタフィールド機能で、ショップに適したカスタマイズの幅が広がりますね。メタフィールドは徐々に機能が充実してきているようですので、個人的には、定義できるコンテンツタイプの種類が増えることを期待しています。
お読みいただきありがとうございました。
