Shopifyのメタフィールドとは？実装方法まで徹底解説！

Shopifyで商品を登録する時に「説明」のテキストエディタを使うことで、テキストやURL、画像も自由に扱うことができるので使い勝手が良いですよね。

しかし、全ての情報を１つにまとめてしまうと、更新する場所を探すのが面倒だったり、誤って大切な情報を消してしまう恐れがあります。また、動的に表示を変更したい場合、「説明」のテキストエディタから特定の値を取得することはできません。

こんな悩みを解決してくれるのがメタフィールドです。

今回はメタフィールドの機能やメリット、コード知識がゼロでも設定できる実装方法について解説します。

メタフィールドは、製品、注文、顧客、コレクションなどのShopifyオブジェクトに、通常の管理画面で取り込めない特定の情報を追加するための柔軟な機能です。メタフィールドを使用して、内部追跡したり、ストア上で特定の情報を表示することができます。

メタフィールドでは、テキスト、日付、画像、同ストア内の他ページデータといった様々な情報を登録することが可能で、各ストアの特定のニーズに合わせて情報をカスタマイズできます。

これらの機能はShopifyの基本機能に備わっているため、アプリを導入する必要はありません。

メタフィールドでは様々な値を設定することが可能です。コンテンツタイプと呼ばれる多様な形式が用意されており、情報整理や値の受け渡しなどの用途に応じて柔軟に設定することができます。

複数あるコンテンツタイプを表形式でまとめました。

Shopify公式サイト

ここからは実際にノーコードで設定できるメタフィールドを使って、商品ページに表示してみましょう。

１．設定からメタフィールドを選択する

管理画面左下の設定＞カスタムデータをクリックします。

メタフィールドは以下のデータに設定することができます。

・商品

・バリエーション

・コレクション

・顧客

・注文

・ロケーション

・ページ

・ブログ

・ブログ記事

今回は商品を選択しましょう。
そして、「定義を追加する」または「定義を追加」のボタンをクリックします。※どちらでも良いです。

２．メタフィールドの定義を入力する。

管理画面左下の設定＞カスタムデータをクリックします。

定義では以下の4つを設定します。

・名前

メタフィールドの名前です。どんな項目かわかりやすい名前をつけると管理しやすいです。

・ネームスペースとキー

メタフィールドの固有IDで、システムが識別するための名前になります。関連する英数字を設定すると良いでしょう。※一度設定すると変更できません。

・説明

メタフィールドの説明を記入することができます。このテキストは基本的にサイトに表示されないので、空白のままでも大丈夫です。

・タイプを選択する

前述で説明したメタフィールドのコンテンツタイプを選択します。

今回は名前は「発売日」、ネームスペースとキーは「.release」、説明は空欄とします。

そして、コンテンツタイプは「日付と時刻」を選択します。特にルールを決めないのであれば、最小・最大の設定は必要ありません。

最後に保存をクリックすると、メタフィールドが保存されます。

３．商品にメタフィールドの値を入力する。

メタフィールドを保存すると、商品管理の商品登録画面の下部にメタフィールドの項目が追加されます。

今回は2023年1月1日10:00に設定して保存します。

４．メタフィールドの値を動的に出力する。

管理画面のオンラインストア＞テーマ＞カスタマイズをクリックします。

上部の検索メニューから商品＞デフォルトの商品をクリックします。

テキストを挿入し、「発売日：」まで入力します。

右サイドバーの動的ソースを挿入＞発売日をクリックします。

そうすると、メタフィールドで設定した発売日の値「2023年1月1日10:00」が動的に出力されました。

動的な表示をここまで簡単にできるのはShopifyの強みではないでしょうか。

他のページやコンテンツタイプでも同じように簡単に設定できますので、色々試して自分のストアをカスタマイズしてみて下さいね。

株式会社GO RIDEではカスタムフィールドを応用して、さらに機能的で管理しやすいフルカスタマイズにも対応しています。

EC運用を考えている事業者様で、要望が多いけど実現できるだろうかとお悩みの方は、お気軽にこちらよりご相談ください。

最後までお読みいただきありがとうございました！