はじめに
Shopify Editions Winter ’25では、テーマ開発者やストアオーナーにとって魅力的なアップデートが数多く行われました。その中でも、テーマセッティング項目（Theme Settings）でメタオブジェクト（metaobject）が利用可能になった点は、柔軟なコンテンツ管理を求める方にとって大きな一歩です。
これまでメタオブジェクトは、特定のページテンプレートなど限定的な範囲で動的コンテンツを提供する手段として活用されていました。しかし、Winter ’25からは、セクションレベルでのメタオブジェクト活用が可能となり、ブランド情報や実店舗一覧、キャンペーン内容などをより簡単かつダイナミックに管理できるようになりました。
本記事では、メタオブジェクト対応によるテーマセッティング項目の拡張について、その概要と具体的なユースケース、導入時のポイントを解説します。
テーマセッティング項目へのメタオブジェクト対応とは
従来のメタオブジェクト利用法との違い
従来、メタオブジェクトは各ページやエントリーに対して柔軟なコンテンツを付与するために用いることが可能でした。しかし、基本的にはテンプレート単位での利用が想定されており、セクションレベルでの動的な差し替えが難しい状況でした。たとえば、ブランドごとに用意したLPや店舗紹介ページなど、メタオブジェクトを使って独自のページを作成できたものの、コンテンツの一部のみを手軽に差し替える、といった使い方は容易ではありませんでした。
Winter ’25でのアップデート内容
Winter ’25のアップデートにより、テーマセッティング項目としてメタオブジェクトを直接参照できるようになりました。これにより、セクション単位でメタオブジェクトの内容を呼び出し、必要に応じて更新・差し替えが可能となります。つまり、ブランド情報や商品リスト、プロモーションコンテンツなどをメタオブジェクト化し、セクションへ接続することで、テーマエディタ上で直感的に編集・運用できるようになったのです。
セクションレベルでのメタオブジェクト活用
ブランド情報・店舗一覧など、動的コンテンツ挿入例
この新機能により可能になるシナリオは多岐にわたります。
- ブランド情報：ブランドごとに異なるロゴやキャッチコピー、説明文などをメタオブジェクトとして定義し、トップページのセクションに接続することで、容易に切り替えが可能になります。
- 店舗一覧：実店舗を運営する場合、店舗ごとの住所、営業時間、写真、Googleマップリンクなどをメタオブジェクト化しておけば、セクションエディタから簡単に店舗リストを差し替え可能です。繁忙期や新店オープン時にすぐ対応できます。
- キャンペーンコンテンツ：特定期間だけ表示したいセール情報やイベント告知をメタオブジェクトで管理し、指定のセクションへ差し替えることで、シーズンごとの更新がスムーズになります。
設定画面での操作と運用アイデア
テーマエディタでの設定項目表示
今回のアップデートにより、テーマエディタ（カスタマイズ画面）でメタオブジェクトを選択可能な入力欄が表示されるようになります。マーチャントはコードに触れることなく、プルダウンやセレクタからメタオブジェクトを指定してコンテンツを更新できます。これまでデベロッパーが手動でセクションコードを調整する必要があった場面も、今後はエディタ上で簡潔に完結するでしょう。
簡易な入れ替え・更新が可能なユースケース
例えば、季節ごとに推したいブランドや期間限定の実店舗情報がある場合、事前にメタオブジェクトを作成しておくことで、テーマエディタからそのメタオブジェクトを選択するだけでコンテンツが反映されます。キャンペーン終了後は、別のメタオブジェクトを選択する、あるいは非表示にするといった操作も容易です。
これにより、テストマーケティングやABテストをはじめ、頻繁な情報更新が求められるサイトにおいて、運用コストを大幅に軽減できます。
実装例
ここでは、店舗情報をメタオブジェクト化し、セクション内で動的に表示する例を紹介します。
まずはメタオブジェクトを作成します。店舗情報としました。以下の情報を含みます。
- 店舗名
- 住所
- 営業時間
続いてメタオブジェクトエントリーを追加します。３つの店舗情報を登録しました。
メタオブジェクトを用意したら、テーマのsectionsディレクトリにcustom-section.liquidを作成し、以下のようなコードを記述することで、メタオブジェクトをセクションに接続できます。
{% comment %} 店舗情報セクション {% endcomment %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% if block.type == 'header' %}
<h2 class="header__store-info">{{ block.settings.title }}</h2>
{% endif %}
{% endfor %}
<div class="store-info {{ section.settings.layout }}">
{% for block in section.blocks %}
{% if block.type != 'header' and block.settings.store_info %}
{% assign store = block.settings.store_info %}
{% if section.settings.layout == 'grid' %}
<div class="store-card grid-item">
<div class="store-card-content">
<h3 class="store-name">{{ store.name }}</h3>
<p class="store-address">{{ store.address }}</p>
<p class="store-hours">営業時間: {{ store.business_hours }}</p>
</div>
</div>
{% else %}
<div class="store-list-item">
<div class="store-list-content">
<span class="store-name">{{ store.name }}</span>
<span class="store-address">{{ store.address }}</span>
<span class="store-hours">営業時間: {{ store.business_hours }}</span>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% else %}
<p class="no-stores">店舗情報が見つかりません</p>
{% endif %}
{% schema %}
{
"name": "Custom section",
"blocks": [
{
"type": "header",
"name": "ヘッダー",
"settings": [
{
"type": "text",
"id": "title",
"label": "タイトル",
"default": "店舗情報一覧"
}
]
},
{
"type": "store_info",
"name": "店舗情報",
"settings": [
{
"type": "metaobject",
"id": "store_info",
"label": "店舗",
"metaobject_type": "store_info",
"info": "店舗を選択してください"
}
]
}
],
"settings": [
{
"type": "select",
"id": "layout",
"label": "レイアウト",
"options": [
{
"value": "grid",
"label": "グリッド"
},
{
"value": "list",
"label": "リスト"
}
],
"default": "grid"
}
],
"presets": [
{
"name": "店舗情報"
}
]
}
{% endschema %}
{% stylesheet %}
.store-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.header__store-info {
text-align: center;
}
.store-info.grid {
justify-content: center;
}
.store-info.list {
flex-direction: column;
width: 100%;
}
.store-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
width: 300px;
text-align: center;
}
.store-list-item {
border-bottom: 1px solid #e0e0e0;
padding: 10px 0;
width: 100%;
}
.store-list-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.store-list-content span {
flex: 1;
text-align: center;
}
.no-stores {
width: 100%;
text-align: center;
color: #888;
}
{% endstylesheet %}
スタイルを当てているので長いコードになっているのですが、重要なのは以下の部分です。
{
"type": "metaobject",
"id": "store_info",
"label": "店舗",
"metaobject_type": "store_info",
"info": "店舗を選択してください"
}
"type": "metaobject"を指定することで、テーマエディタ上でメタオブジェクトを選択できるようになります。そして、"metaobject_type": "store_info"で、store_infoというメタオブジェクトを指定しています。
ちなみに、metaobject以外にmetaobject_listという入力タイプもあり、複数のメタオブジェクトを選択できるようになります。これにより複数の店舗情報を一括して表示するようなレイアウトも実現可能です。
作成したら、テーマエディタからセクションを追加します。初期状態は登録されていないので以下のように表示されます。
店舗ブロックを追加し、メタオブジェクトを選択します。すると、先ほど作成したメタオブジェクトが表示されるので、選択します。
ヘッダーも設定したら完成です。
ブロックは入れ替え可能なので、簡単に店舗の順番を変更できます。リストも設定できるようにしたので以下のような柔軟なレイアウトも可能です。
ベストプラクティスと注意点
メタオブジェクト構造設計のポイント
メタオブジェクトを効果的に利用するためには、あらかじめ柔軟な構造設計を行うことが重要です。たとえば、ブランド情報を格納する場合、ロゴ、ブランド説明、代表商品リンクなど、後々切り替えが必要な要素を細かくフィールドとして設計しておくと、運用時に手間取らずに差し替えが可能になります。
コスト・拡張性・保守性を考慮した導入
メタオブジェクトとテーマセッティングの連携は強力ですが、すべてをメタオブジェクト化する必要はありません。更新頻度や情報の安定性、実際に入れ替える可能性がどれほどあるかを考慮して導入範囲を決めることで、管理コストを抑えつつ、柔軟性を担保することができます。
まとめ
Shopify Editions Winter ’25で加わったテーマセッティング項目へのメタオブジェクト対応は、ECサイト運営者がより柔軟で効率的なコンテンツ管理を実現するための大きな進歩です。従来はハードコーディングやテンプレート切り替えが必要だった変更が、テーマエディタ上で完結できるようになり、シーズナルキャンペーンやブランドイメージ転換などにも迅速に対応可能となりました。
適切なメタオブジェクト構造の設計や、更新頻度に応じた選択的な導入によって、ブランドの世界観をよりダイナミックに反映しながら、メンテナンス負荷を最小限に抑えることができます。ぜひこの新機能を活用して、あなたのShopifyストアをより魅力的で運用しやすいものへと進化させてください。