商品情報にスキップ
1 1
公開日:2026.09.13

商品詳細ページの折りたたみ行に、商品ごと・カテゴリごとに違う内容を表示する

商品詳細ページの折りたたみ行に、商品ごと・カテゴリごとに違う内容を表示する

用途

  • 商品情報管理・編集
詳細を表示する

商品の特徴や使い方、保存方法などを、商品に合わせて折りたたみ行に表示したい場合におすすめのTIPSです。テーマエディタで本文を直接入力すると、同じテンプレートを使うすべての商品に同じ内容が表示されるため、商品ごとの案内を出し分けられません。

一方、カテゴリ共通の注意事項を商品ごとにコピーして入力すると、内容を変更するたびに各商品を修正する必要があり、修正漏れや表記のばらつきにつながります。

このTIPSでは、商品ごとに異なる説明は商品側で入力し、複数の商品に共通する案内は1箇所で管理する方法を紹介します。お客様に必要な情報を折りたたみ行に整理しながら、運営側の入力・更新の手間を減らすことが目的です。使い方に合わせて、次の2つから選べます。

  • ① 商品ごとに内容を変える:商品メタフィールドに本文を入力
  • ② 共通の本文を一元管理する:同じメタオブジェクトを複数の商品から参照

どちらも本文はリッチテキストです。Horizonのサンプルストアで、動的ソースへの接続と表示を確認しました。Liquidコードの編集は不要です。

完成イメージ

商品写真・価格・購入欄と、商品別/カテゴリ共通の案内を表示したテーマエディタのプレビューです。オレンジ枠が今回の設定箇所です。
商品写真・価格・購入欄と、商品別/カテゴリ共通の案内を表示したテーマエディタのプレビューです。オレンジ枠が今回の設定箇所です。

① 商品ごとに内容を変える

商品ごとに異なる説明を入力したい場合の設定です。

◆ 商品メタフィールドを作成

設定 → メタフィールドとメタオブジェクト → 商品 →「定義を追加」を開きます。

  • 名前:商品別の説明
  • ネームスペースとキー:custom.product_description
  • タイプ:リッチテキスト(値は1つ)

定義をピン止めし、保存します。

「商品別の説明」をリッチテキスト型で作成します。
「商品別の説明」をリッチテキスト型で作成します。

◆ 各商品に入力

商品管理 → 対象商品を開き、下部の「商品のメタフィールド」→「商品別の説明」に本文を入力して保存します。

商品ごとに掲載したい本文を入力します。入力欄にはリッチテキストの編集ツールが表示されます。
商品ごとに掲載したい本文を入力します。入力欄にはリッチテキストの編集ツールが表示されます。

◆ テーマエディタで接続

  1. オンラインストア → テーマ → テーマエディタを開き、商品テンプレートを選択します。
  2. 「商品情報」→「詳細」の「ブロックを追加」から「アコーディオン」を追加します。
  3. 「アコーディオンの行」の中に「テキスト」を追加します。行の見出しには「商品ごとのご案内」などを設定します。
接続するのは、左側の「アコーディオンの行」の中にある「テキスト」です。
接続するのは、左側の「アコーディオンの行」の中にある「テキスト」です。

テキストの初期文章を消し、右側のデータベース形アイコン「動的ソースを接続」を押します。「商品(Closest)」→「商品別の説明」を選び、テーマを保存します。

リッチテキスト型の「商品別の説明」を動的ソースとして選択できます。
リッチテキスト型の「商品別の説明」を動的ソースとして選択できます。

これで、同じ商品テンプレートを使っていても、各商品に入力した説明が表示されます。


② カテゴリ共通の本文を1箇所で管理する

保存方法やお手入れ方法など、複数の商品で同じ案内を表示したい場合の設定です。共通の本文を1つ作り、対象商品から参照します。

◆ メタオブジェクトの定義を作成

設定 → メタフィールドとメタオブジェクト → メタオブジェクト →「定義を追加」を開きます。

  • 定義の名前:カテゴリ共通案内
  • タイプ:category_guide
  • フィールド1:名前/単一行テキスト/キー:name
  • フィールド2:本文/リッチテキスト/キー:body

「名前」を表示名として使い、ストアフロントAPIへのアクセスを有効にして保存します。日本語名でキーが空になる場合は、上記の英字キーを入力してください。

必要なフィールドは「名前」と「本文」の2つだけです。本文はリッチテキストを選択します。
必要なフィールドは「名前」と「本文」の2つだけです。本文はリッチテキストを選択します。

◆ 共通の本文を登録

コンテンツ → メタオブジェクト →「カテゴリ共通案内」でエントリーを追加します。「名前」に「コーヒー豆」、「本文」に共通の案内を入力し、保存します。ハンドルには coffee-beans などの英数字を使い、ステータスがある場合は「アクティブ」にします。

共通本文を編集する場所です。紅茶など別の案内が必要なら、別のエントリーを作ります。
共通本文を編集する場所です。紅茶など別の案内が必要なら、別のエントリーを作ります。

◆ 商品から参照するためのメタフィールドを作成

設定 → メタフィールドとメタオブジェクト → 商品 →「定義を追加」を開きます。

  • 名前:カテゴリ共通案内
  • ネームスペースとキー:custom.category_guide
  • タイプ:メタオブジェクト/参照先:カテゴリ共通案内/値は1つ

定義をピン止めし、保存します。

商品側には本文を入力する欄ではなく、メタオブジェクトを選ぶ参照欄を用意します。
商品側には本文を入力する欄ではなく、メタオブジェクトを選ぶ参照欄を用意します。

◆ 各商品で共通エントリーを選択

対象商品の「商品のメタフィールド」→「カテゴリ共通案内」で「コーヒー豆」を選び、保存します。同じ案内を表示したい商品には、すべて同じエントリーを選択します。

同じ「コーヒー豆」を参照する商品は、本文を入力し直す必要がありません。
同じ「コーヒー豆」を参照する商品は、本文を入力し直す必要がありません。

◆ テーマエディタで本文を接続

①と同じ要領でアコーディオンの行を用意し、見出しを「カテゴリ共通のご案内」などにします。その中の「テキスト」を開いて初期文章を消し、「動的ソースを接続」→「商品(Closest)」→「カテゴリ共通案内」→「本文」を選択して保存します。

参照先メタオブジェクトの「本文」まで進み、リッチテキストを接続できます。
参照先メタオブジェクトの「本文」まで進み、リッチテキストを接続できます。

設定後は、コンテンツ → メタオブジェクト →「カテゴリ共通案内」の本文を編集するだけで、同じエントリーを参照する商品に反映されます。


設定時の注意点

  • この設定は商品カテゴリーを選ぶだけで参照先を自動割り当てする仕組みではありません。各商品で共通エントリーを選ぶ初期設定が必要です。
  • 専用テンプレートを作った場合は、対象商品の「テーマテンプレート」でも選択して保存します。
  • 本文が未入力の商品では、折りたたみ行の見出しが残る場合があります。
  • 画面と手順はHorizonで検証しています。テーマによりブロック名や接続できる設定は異なります。

カテゴリ条件付きメタフィールドは、定義を適用する商品カテゴリーを制御する機能です。任意の共通本文を一元管理する今回の用途では、②のメタオブジェクト参照を使います。

Shopify公式:メタオブジェクトのフィールドを動的ソースで参照
Shopify公式:データ型とテーマ設定の互換性

検証日:2026年9月13日/Horizon。本文画像はデモストアの実画面です。