Shopifyのメタフィールドとは?実装方法まで徹底解説!
Shopifyで商品を登録する時に「説明」のテキストエディタを使うことで、テキストやURL、画像も自由に扱うことができるので使い勝手が良いですよね。
しかし、全ての情報を1つにまとめてしまうと、更新する場所を探すのが面倒だったり、誤って大切な情報を消してしまう恐れがあります。また、動的に表示を変更したい場合、「説明」のテキストエディタから特定の値を取得することはできません。
こんな悩みを解決してくれるのがメタフィールドです。
今回はメタフィールドの機能やメリット、コード知識がゼロでも設定できる実装方法について解説します。
メタフィールドとは?
メタフィールドは、製品、注文、顧客、コレクションなどのShopifyオブジェクトに、通常の管理画面で取り込めない特定の情報を追加するための柔軟な機能です。メタフィールドを使用して、内部追跡したり、ストア上で特定の情報を表示することができます。
メタフィールドでは、テキスト、日付、画像、同ストア内の他ページデータといった様々な情報を登録することが可能で、各ストアの特定のニーズに合わせて情報をカスタマイズできます。
これらの機能はShopifyの基本機能に備わっているため、アプリを導入する必要はありません。
メタフィールドのタイプ
メタフィールドでは様々な値を設定することが可能です。コンテンツタイプと呼ばれる多様な形式が用意されており、情報整理や値の受け渡しなどの用途に応じて柔軟に設定することができます。
複数あるコンテンツタイプを表形式でまとめました。
日付と時刻 |
発売日の登録や発売によるサイト表示切り替えのトリガーとして登録できます。 |
測定 |
商品の重さ、化粧品の容量、箱のサイズといった様々な単位に対応しています。 |
数値 |
整数は最大13桁、小数は最大9桁まで対応しています。 |
ファイル |
20MB以下の画像、1GB未満のビデオに対応しています。 |
参照 |
サイト内の商品や既存ページ、コレクションのデータを参照できます。 |
テキスト |
1行の短いテキストや、改行できるテキストを追加します。 |
リッチテキスト |
改行できるテキストに加え、見出しスタイル、太字、斜体、下線などのスタイルを追加できます。 |
色 |
RGB値を登録し、表示の色を変えることもできます。 |
金額 |
配送費用などの商品にかかるコストを登録できます。 |
評価 |
範囲を指定し、数値で評価をつけることができます。 |
true,false |
true,falseかを選択するチェックボックスを作成します。ラベル表示の切り替えなど、実務でよく使われます。 |
URL |
リンクを挿入できます。 |
メタオブジェクトに関する記事もチェック!
メタフィールドを実装してみよう
ここからは実際にノーコードで設定できるメタフィールドを使って、商品ページに表示してみましょう。
1.設定からメタフィールドを選択する
管理画面左下の設定>カスタムデータをクリックします。
メタフィールドは以下のデータに設定することができます。
・商品
・バリエーション
・コレクション
・顧客
・注文
・ロケーション
・ページ
・ブログ
・ブログ記事
今回は商品を選択しましょう。
そして、「定義を追加する」または「定義を追加」のボタンをクリックします。※どちらでも良いです。
2.メタフィールドの定義を入力する。
管理画面左下の設定>カスタムデータをクリックします。
定義では以下の4つを設定します。
・名前
メタフィールドの名前です。どんな項目かわかりやすい名前をつけると管理しやすいです。
・ネームスペースとキー
メタフィールドの固有IDで、システムが識別するための名前になります。関連する英数字を設定すると良いでしょう。※一度設定すると変更できません。
・説明
メタフィールドの説明を記入することができます。このテキストは基本的にサイトに表示されないので、空白のままでも大丈夫です。
・タイプを選択する
前述で説明したメタフィールドのコンテンツタイプを選択します。
今回は名前は「発売日」、ネームスペースとキーは「.release」、説明は空欄とします。
そして、コンテンツタイプは「日付」を選択します。特にルールを決めないのであれば、最小・最大の設定は必要ありません。
最後に保存をクリックすると、メタフィールドが保存されます。
3.商品にメタフィールドの値を入力する。
メタフィールドを保存すると、商品管理の商品登録画面の下部にメタフィールドの項目が追加されます。
今回は2024年9月1日に設定して保存します。
4.メタフィールドの値を動的に出力する。
管理画面のオンラインストア>テーマ>カスタマイズをクリックします。
上部の検索メニューから商品>デフォルトの商品をクリックします。
テキストを挿入し、「発売日:」まで入力します。
右サイドバーの動的ソースを挿入>発売日をクリックします。
そうすると、メタフィールドで設定した発売日の値「2024年9月1日」が動的に出力されました。
メタフィールドで管理しやすいストアを構築しよう
動的な表示をここまで簡単にできるのはShopifyの強みではないでしょうか。
他のページやコンテンツタイプでも同じように簡単に設定できますので、色々試して自分のストアをカスタマイズしてみて下さいね。
株式会社GO RIDEではカスタムフィールドを応用して、さらに機能的で管理しやすいフルカスタマイズにも対応しています。
EC運用を考えている事業者様で、要望が多いけど実現できるだろうかとお悩みの方は、お気軽にこちらよりご相談ください。
最後までお読みいただきありがとうございました!
2023/03/03 公開
2024/09/10 更新