Shopify アカデミーの「Exploring and Extending Shopify’s Data Model」コースで学んだことの理解を深めるために、実際のテーマカスタマイズに取り組みました。
今回のテーマは、商品ページにモデルさんの着用サイズやプロフィールを表示する機能の追加です。
Shopifyの管理画面から定義できるメタオブジェクトとカスタムメタフィールドを組み合わせることで、ノーコードに近い形で実装できることを確認しました。
実現したいこと
モデル着用画像がある商品の詳細ページに、以下のようなモデル情報を表示できるようにしました：
- モデルの身長や体型などの基本プロフィール
- その商品画像で実際に着用しているサイズ情報
一方で、アクセサリーなどモデル情報の表示が不要な商品にはこのセクションが表示されないように条件分岐も最終的に加えています。
構成と使用技術の整理
| 要素 | 使用したShopify機能 |
|---|---|
| モデルの基本情報（名前・身長など） | メタオブジェクト（Model Info） |
| 着用サイズ（例：Small） | カスタムメタフィールド（Productに紐づけ） |
| フロントエンドへの表示 | テーマビルダーでのブロック設定 |
| 表示の制御 | Liquid条件分岐 |
Step 1：メタオブジェクトを定義する
まず、Admin > Settings > Custom data > Metaobjects にて、「Model Info」という名前のメタオブジェクト定義を作成しました。
各モデルに以下のような情報を持たせています：
- 名前（name）
- 身長（height）
- 胸囲 (bust)
- ウエスト (waist)
- 腰回り (hip)
定義が完了するとContent > Metaobjects メニューが表示され、ここから各モデルさん情報を入力できます。
今回はモデルさん2人分の情報を登録しました。
Step 2：カスタムメタフィールドを商品に追加する
次に商品に以下の2つのカスタムメタフィールドを追加しました：
- モデル情報の参照（Model Info） → 作成済みの「Model Info」メタオブジェクトから登録されている該当モデルを選択できるようにする
- 着用サイズのテキストフィールド (Wearing Size) → 例：「Small」「Large」などの文字列を入力できるようにする
これにより商品ごとに異なるモデル＆着用サイズ情報を柔軟に入力できるようになります。
そして各商品の登録ページに行くと、追加したカスタムメタフィールドが確認できるようになっているので、適切な情報を入力します。
Step 3：テーマビルダーで出力を行う
Online Store > Themes > Customize から商品詳細テンプレートを開き、新たにCollapsible rowブロックを追加しました。
ブロック内のテキストエリア (Row content)には、動的なメタフィールドとメタオブジェクトの値を差し込みます：
このように、LiquidコードなしでもテーマビルダーからメタデータをバインドできるのはShopifyの強力なポイントです。
そして、実際のフロントエンドでの表示は以下のようになりました。
Step 4：Liquidで表示の制御
モデル情報が未入力の商品の場合は、該当のブロックを表示しないようLiquidファイル内に条件分岐を追加しました：
まとめ
今回の実装を通してShopifyのデータ構造（メタフィールド・メタオブジェクト）を実務的に活用する方法が体感できました。
コードを書かずに構築できる範囲が想像以上に広く、特にモデル情報のように商品ごとに異なるデータを構造化して再利用可能な形で管理できるというのは、開発と運用のハードルを下げつつ、保守性の高いストア設計を実現する鍵になると感じました。
表面的なカスタマイズにとどまらず、どういう情報設計にすれば、誰が・いつ・どこで管理しやすくなるかを意識して構築できるようになることが、今後のShopify開発においてますます重要になってくると思います。
