サムネイル

Shopify のメタフィールドとは?設定方法・使用方法まで徹底解説!

はじめに

今回の記事では、Shopify のメタフィールドについて解説します。

うまく使えると、商品、ブログ、お客様によって画面の表示を切り替えたりすることができます。

うまく使えるよう、しっかりと学んでいきましょう!

目次

メタフィールド とは

メタフィールドは、Shopify ストアにカスタムデータを追加するための強力なツールです。基本的なデータモデルには商品や注文などが含まれますが、メタフィールドを使うと、これらの標準モデルを超えたデータを保存し、独自の情報を商品や顧客、ブログに関連付けることができます。

たとえば、アパレルストアのオーナーが商品の洗濯指示を追加したい場合、商品に「お手入れ方法」というメタフィールドを追加して、それぞれの商品ページに具体的な指示を表示することができます。

メタフィールドのタイプ

メタフィールドの各タイプは、異なるユースケースのさまざまな値に対応しています。以下はメタフィールドのタイプと使用例などを記載した表です。

※ リストで使用するが「はい」の場合、複数設定できます。

コンテンツタイプ説明リストで使用する
コレクション参照既存のコレクションにリンクすることができます。はいファッション商品の「トータルコーディネート」コレクションをオンラインストアに含めます。
#RRGGBB 形式の RGB 値をサポートしています。はい商品の色を保存し、商品ページの背景を設定する。
日付タイムゾーンなしの、ISO 8601 形式の日付値をサポートしています。はい商品の消費期限、注文配達日、またはお客様の生年月日を追加する。
日付と時刻ISO 8601 形式の日付値と、UTC 時間の時間値をサポートしています。はいイベントの公開日または商品の発売日を追加する。
小数小数値は、+/-9999999999999.999999999 の範囲内とし、整数は最大 13 桁まで、小数は最大 9 桁まで入力できます。はい宝石にカラット数を追加しする。
寸法整数と小数の両方をサポートしています。寸法では、指標またはインペリアル測定単位のいずれかを使用する。はい箱の高さ、またはスカーフの長さなどの商品の長さを追加する。
ファイル参照以下のいずれかのファイルタイプで、単一ファイルのアップロードをサポートする。はい組み立て指示の PDF ファイルを追加する。
整数整数値は、-4,611,686,018,427,387,904 から 4,611,686,018,427,387,903 の範囲内を入力できます。はい本にページ数を追加する。
JSON構造化データソースが必要な高度なユースケースで未処理の JSON データをサポートする。いいえ原材料の表など、それぞれの列で異なる商品を扱う仕様表を追加する。
メタオブジェクトの参照単一または複数のメタオブジェクトエントリーへのリンクをサポートする。はい選択した商品ページにカスタムインフルエンサープロフィールを追加して表示する。
複合の参照あらゆる参照タイプをサポートしています。はいHydrogen ストアフロントに動的ランディングページを作成する。
金額整数と小数の両方をサポートしています。通貨コードはストア通貨と一致している必要があります。いいえ仕入れ費用や倉庫への配送費用など、商品にかかる費用の詳細を追跡する。
複数行のテキスト改行ありのプレーンテキストをサポートしています。いいえ配送メモや返品ポリシーを追加する。
ページ参照既存のページにリンクすることができます。はいオンラインストアの商品に関するポリシーページまたは詳細なサポートガイドを挿入する。
商品の参照メタフィールドリストの単一または複数の商品へのリンクに対応しています。はいオンラインストアの商品ページまたはコレクションページ上に、特集商品を保存および表示する。
商品バリエーションの参照単一の商品バリエーションへのリンクに対応しています。はいオンラインストアの商品ページで、同じ色の他の衣料アイテムを保存して表示する。
評価定義の設定方法に応じて、指定された記数法に沿った小数点以下の値をサポートする。はい商品のオーディエンススコアまたは星評価を追加する。
リッチテキスト改行ありのテキスト、および見出しスタイル、太字、斜体、下線などのインラインスタイルをサポートしています。いいえブランドや商品やスタイルに関する、長めのストーリーを追加する。
単一行のテキスト改行なしのプレーンテキストをサポートしています。はい短いメモや告知を追加する。
true または false条件が true または false かを選択するチェックボックスを作成する。いいえアイテムに刻印できるかどうかなど、あるオプションが利用可能かどうかを追加する。
URLHTTPHTTPSmailto: の URL をサポートしています。はい特定のウェブサイトでホストされている書籍レビューまたは商品ビデオへのリンクを追加する。
整数と小数をサポートする。はい水筒の容量を追加する。
重量整数と小数をサポートする。はい砂糖のグラム数など、商品や原材料の重量を追加する。

メタフィールドの設定方法

メタフィールドは、[設定] > [カスタムデータ] から設定できます。

カスタムデータから設定

メタフィールドを設定したいストアの箇所を選択します。

今回は「商品」に「単一行のテキスト」を追加します。
「商品」をクリックしてください。

商品をクリック

次に「定義を追加する」をクリックします。

定義を追加するをクリック

「定義を追加する」をクリックすると、以下のように表示されます。

定義を追加する後の表示

それぞれの入力欄について説明します。

  • 名前:管理画面で表示されます。わかりやすい名前にしましょう。
    • お手入れ方法
  • ネームスペースとキー:システム上の識別子。ストアフロントのコード上でアクセスする際に使います。
    • clothes.how_to_wash
  • 説明:メタフィールド設定の説明。
    • 商品のお手入れ方法を説明する。

設定後に「保存」ボタンをクリックします。このとき、ストアフロントのコード上で使う予定がある場合は、「ストアフロントのアクセス」を「ON」にして保存しましょう。(ON にしておくデメリットは特にないため、ON にしておくことをおすすめします!)

保存するボタンをクリック

ストアフロントのアクセスを ON にして保存

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

メタフィールドの設定を保存し、商品管理ページに行くと、ページ下部にメタフィールド「お手入れ方法」が追加されています。
今回は適当に入力します。

お手入れ方法が追加

テーマで利用する

設定したメタフィールドの値をテーマで利用します。
[オンラインストア] > [テーマ] > [カスタマイズ] からテーマカスタマイズ画面に移動します。

テーマカスタマイズ画面

商品ページへ移動し、サイドバーから「テキスト」ブロックを選択します(使用しているテーマによってはブロック名が違う可能性があります)。
次に画像右上にある「テキスト」入力欄の「動的ソースを接続」ボタンをクリックします。

動的ソースを接続ボタンをクリック

クリックすると先程追加したメタフィールドの名前が表示されるのでクリックしましょう。
クリックすると以下の画像のように、先程設定した、値が表示されます。

メタフィールドの名前をクリック

メタフィールドの値の表示

以上がテーマで利用方法です。

コードを編集してメタフィールドを表示する

Liquid コードを編集しメタフィールドを使う場合を考えます。
コード上でメタフィールドの値を使い場合は、先ほど設定した、ネームスペースとキーと使います。

メタフィールドの値確

今回であれば、コード上で product.metafields.clothes.how_to_wash を使うことで値を取り出すことができます。

コードを編集する際はテーマを複製してからにしましょう!

以下のコードはお手入れ方法を記入している場合のみ、値を表示するコードです。

{% if product.metafields.clothes.how_to_wash %}
  <p>{{ product.metafields.clothes.how_to_wash }}</p>
{% endif %}

今回はメタフィールドをリスト形式にはしませんでしたが、リスト形式の場合は以下のようなコードになります。

{%  if product.metafields.clothes.how_to_wash != blank %}
  {% for how_to_wash in product.metafields.clothes.how_to_wash.value %}
    <p>{{ how_to_wash }}</p>
  {%- endfor %}
{% endif %}

まとめ

今回は Shopify のメタフィールドについて解説しました。

Shopify のメタフィールドを使えば、商品や、顧客、ブログなどにさまざまなデータをもたせることができます。

例えば

  • テキストを登録して、商品ごとに表示を切り替える
  • true or false を登録して、販売ボタンを表示したりしなかったりできる
  • 既存のページをリンクして、詳しい使い方を説明しているブログに誘導する

他にもアイデア次第でいろいろなことができます。

シンプル会員ランク|お手軽顧客タグ付け は自動で顧客にタグを付与することができます。
こちらからインストールできます

最後まで読んでいただきありがとうございました!

おすすめ Shopify アプリ

シンプルブログタグ絞り込み|お手軽タグ一覧挿入のアイコン

シンプルブログタグ絞り込み|お手軽タグ一覧挿入

シンプルなブログ絞り込みアプリ。ストアにタグによるブログ絞り込み機能を簡単に導入できます。

シンプル会員商品割引|お手軽ログイン商品セール設定のアイコン

シンプル会員商品割引|お手軽ログイン商品セール設定

シンプルな日本製の商品割引アプリ。ログインしている顧客を対象とした商品割引を簡単に実現できます。

シンプルボリュームディスカウント|お手軽まとめ買い割引のアイコン

シンプルボリュームディスカウント|お手軽まとめ買い割引

商品毎に、割引テーブルに応じたまとめ買い割引を行えます。

シンプルノベルティ|お手軽ギフト特典のアイコン

シンプルノベルティ|お手軽ギフト特典

シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。

シンプルおひとり様一点限りの購入制限設定のアイコン

シンプルおひとり様一点限りの購入制限設定

シンプルな日本製のおひとり様一点限りの購入制限アプリ。商品毎に、おひとり様一点限りの購入制限を行えます。

シンプル期間限定セール|お手軽バーゲンセールのアイコン

シンプル期間限定セール|お手軽バーゲンセール

「シンプル期間限定セール|お手軽バーゲンセール」は、ストアの全商品に対して期間限定セールを簡単に実現できるアプリです。

シンプルVIP会員商品割引|お手軽VIP商品セール設定のアイコン

シンプルVIP会員商品割引|お手軽VIP商品セール設定

シンプルな日本製の条件に応じた商品割引アプリ。特別な顧客を対象とした商品割引を簡単に実現できます。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法のアイコン

シンプル決済カスタマイズ|お手軽条件ごとの決済方法

シンプルな日本製の決済カスタマイズアプリ。チェックアウト画面で、特定の条件に基づいて、決済方法の非表示を行えます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のアイコン

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

シンプルな日本製の配送カスタマイズアプリ。指定した条件下で特定の配送方法を非表示にできます。

シンプルクラウドファンディング|お手軽自社クラファンのアイコン

シンプルクラウドファンディング|お手軽自社クラファン

シンプルなクラウドファンディングアプリ。商品毎にクラウドファンディングを実現できます。

シンプル会員初回注文割引|お手軽初回ログインセール設定のアイコン

シンプル会員初回注文割引|お手軽初回ログインセール設定

シンプルな日本製の条件に応じた注文割引アプリ。ログインしている顧客を対象とした初回購入時の注文割引を簡単に実現できます。

シンプル顧客タグ注文割引|顧客タグ BtoB 割引のアイコン

シンプル顧客タグ注文割引|顧客タグ BtoB 割引

シンプルな日本製の注文割引アプリ。顧客タグに応じて注文を割引したり、無料にしたりできます。

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事