Shopifyのメタフィールド実装方法と活用例

Shopify

メタフィールドとテーマエディターを組み合わせて、商品ページにプレオーダー用メッセージを表示する方法を、実際の設定画面とスクリーンショット付きでご紹介します。

Shopifyのメタフィールド(Metafields)とは?

メタフィールド(Metafields)とはShopifyの管理画面やテーマで扱う「カスタムデータフィールド」のことです。

デフォルトで用意されていない情報(例:商品ごとの出荷予定日や特記事項など)を商品・バリエーション・コレクションなどに柔軟に追加できます。

活用次第で以下のような機能追加・デザイン拡張が可能になります:

  • 商品ページごとに独自メッセージを表示する
  • 商品カードにバッジを表示する(例:期間限定、送料無料など)
  • お客様の声やFAQセクションを個別に追加する

今回はその基本機能を活用し「プレオーダー受付中」である旨を商品ページに表示する方法を解説していきます。

プレオーダー商品の表示方法:メタフィールドとテーマエディターを使った設定

Step1:プレオーダー用のメタフィールドを作成する

プレオーダー商品に表示したいメッセージ(例:「3月中旬入荷予定」など)を入力するためのメタフィールド(カスタム項目)を作成します。

Shopify管理画面で「設定 → カスタムデータ → 商品」に進む

「定義を追加」をクリックし、以下のように設定

  • 名前:Preorder(任意のラベルでOK)
  • 種類:単一行テキスト(Single line text)

そしてこれを保存するとそれぞれの商品編集画面に新しい入力欄(Preorder)が表示されるようになります。

Step2:プレオーダー対象の商品にメッセージを入力する

先ほど作成したメタフィールドは商品ごとに個別の値を入力できます。

プレオーダー対象となる商品の編集画面を開き「Preorder」フィールドに購入者へ伝えたいメッセージを入力します。

例えば:

  • 「〇月下旬発送予定」
  • 「現在ご予約受付中」
  • 「在庫入荷まで約2週間」など

このテキストが、商品ページ上にそのまま表示されるようになります。(今回は「The procudt wil be shipped in a week」というメッセージをいれました)

Step3:「在庫切れでも販売を続ける」をONにする

予約注文を受け付けるには、在庫が0でもカートに追加できる状態にしておく必要があります。

各商品ページの「在庫」セクションで以下を設定します:

  • 在庫を追跡する」をONにする
  • 在庫切れでも販売を続ける(Continue selling when out of stock)」をONにする

Step4: テーマエディターで商品ページに表示する

商品ページ上でこのメッセージが見えるように、テーマエディターでブロックを追加します。

  1. 「オンラインストア → テーマ → カスタマイズ」を開く
  2. 商品ページテンプレートに移動
  3. 「ブロックを追加」から「テキスト」ブロックを選択し、動的ソース(メタフィールド)として Preorder を接続する

メッセージを表示したい位置にブロックを移動・調整したら予約受付中の商品にのみプレオーダー用メッセージを表示するカスタム構成が完成です!

メタフィールドを活用すれば、他にも様々な商品情報の差し込みやレイアウト制御が可能になるため、ストアの柔軟な運用や差別化にとても有効です。

Shopifyのメタオブジェクト(Metaobjects)とは?

メタフィールドと並んで、Shopifyでの柔軟なデータ管理に役立つのがメタオブジェクト(Metaobjects)です。

メタオブジェクトは構造化された再利用可能なデータセットで、メタフィールドの拡張版といえる存在です。

メタフィールドとの違い

メタオブジェクトを理解するためには、メタフィールドとの違いを把握しておくことが重要です。以下に主な比較ポイントを表でまとめました。

項目メタフィールドメタオブジェクト
用途商品などに紐づく1対1の情報追加複数の構造化データを管理・再利用
商品ごとの出荷予定日よくある質問、スタッフ紹介、ブランドヒストリーなど
編集画面商品画面内独立したMetaobjects編集画面
表示テーマエディターやLiquidで動的に表示可能同様にテーマやセクションで再利用可能

活用例

メタオブジェクトは再利用性の高い構造化データを扱いたい場合に非常に便利です。

たとえば次のような使い方が可能です:

  • よくある質問(FAQ)をメタオブジェクトで一括管理し、各商品ページで再利用
  • スタッフ紹介を1つのメタオブジェクトにまとめてセクション表示
  • キャンペーン履歴や受賞歴など、繰り返し表示が必要な構造化データを管理

メタフィールドとの使い分け

それぞれの特徴を踏まえてどんなときにどちらを使うべきかを以下にまとめました。

  • メタフィールド:商品ごとに異なる簡単な情報を追加したいとき
  • メタオブジェクト:複数の商品やページで使い回したい情報を一元管理したいとき

まとめ

この記事ではShopifyでプレオーダー商品を柔軟に表示するために、メタフィールドを使って商品ごとにカスタムメッセージを表示する方法をステップ形式で紹介しました。

さらにメタフィールドよりも複雑で再利用性の高い情報管理を実現できる「メタオブジェクト」についても概要と違いをご紹介しました。

これらの機能を使いこなすことでShopifyテーマのカスタマイズ性は格段に広がります。ノーコードでも運用しやすく、スケーラブルなストア設計を目指す上でメタフィールドやメタオブジェクトは非常に役立つ仕組みです。

タイトルとURLをコピーしました