Horizonの商品ページで、サイズやカラーの選択肢に「+15,000円」「受注生産」「マットレス別売」といった補足情報を表示する方法です。選ぶ前に価格差や納期が分かる状態になります。テーマファイルは一切編集せず、カスタムLiquidブロックにコードを貼るだけで動きます。
なぜバリアントのメタフィールドでは破綻するのか
「サイズは+8,000円」という情報が属している単位は「サイズ」です。ところがバリアントの単位は「色 × サイズ × マットレス」の掛け合わせなので、バリアントのメタフィールドに入れると同じ情報を色の数だけ重複入力することになります。色を1つ追加するたびに、サイズ分の入力が増えていきます。
逆に、オプションが1種類だけの商品ならこの方法は不要です。選択肢とバリアントが1対1で対応するため、バリアントのメタフィールドがそのまま使えます。掛け合わせになったときだけ、この構成に切り替えてください。
仕組み ― 情報を「選択肢」に持たせる
メタオブジェクトに入れるのは「オプション名」「選択肢の値」「表示内容」の3項目だけです。これを商品に紐付けると、オプション名と選択肢の値の2つが一致した選択肢にだけ、表示内容が差し込まれます。登録がない選択肢には何も出ないので、補足を出したいものだけ登録すれば済みます。
Horizonのバリアントピッカーは、各ラジオボタンに data-option-name と value を最初から出力しています。この2つを照合するだけで選択肢を特定できるため、テーマ側の改造が不要になります。
【設定手順①】メタオブジェクト定義を作成する
◆操作場所
・管理画面 → 設定 → メタフィールドとメタオブジェクト → メタオブジェクト → 「定義を追加」
◆入力内容
・名前：オプション値の補足情報（タイプは自動で option_value_note になります）
・フィールド1：オプション名／単一行テキスト／必須
・フィールド2：選択肢の値／単一行テキスト／必須
・フィールド3：表示内容／単一行テキスト／必須
3つとも「単一行テキスト」で、この順番で作ってください。これは最初に1回作るだけの器で、以降は触りません。
【設定手順②】エントリーを入力し、商品に紐付ける
◆エントリーの入力
・管理画面 → コンテンツ → メタオブジェクト → 「オプション値の補足情報」 → 「エントリーを追加」
・1エントリー = 1つの選択肢です。補足を出したい選択肢の分だけ作ります
◆入力例（この記事の検証で使ったもの）
・色 / ホワイト / 受注生産
・サイズ / シングル / 基準サイズ
・サイズ / セミダブル / +8,000円
・サイズ / ダブル / +15,000円
・マットレス / ベッドフレームのみ / マットレス別売
・マットレス / ボンコイルマットレス / +20,000円
「オプション名」と「選択肢の値」は、商品のバリアント設定に登録されている名前をそのまま書き写してください。1文字でも違うと一致しません（全角・半角、スペースの有無も含めて一致が必要です）。コピーして貼り付けるのが確実です。
◆商品メタフィールドの定義
・設定 → メタフィールドとメタオブジェクト → 商品 → 「定義を追加」
・名前：オプション値の補足情報／名前空間とキー：custom.option_value_notes
・タイプ：メタオブジェクト参照（「オプション値の補足情報」）＋「値のリスト」を有効化
◆商品への紐付け
・対象商品の編集画面を下にスクロールし、「商品のメタフィールド」の「オプション値の補足情報」欄で、表示したいエントリーを選びます。選ぶだけなのでテキスト入力は発生せず、JSONの手書きによる構文エラーも起こりません。
【設定手順③】カスタムLiquidブロックにコードを貼る
◆操作場所
・オンラインストア → テーマ → カスタマイズ → 上部のテンプレート切替で「商品」（商品ページテンプレート）を開く
・左パネルの「商品情報」→「詳細」を展開
・「ブロックを追加」→「カスタムLiquid」を選び、バリエーションピッカーの下に配置
・右パネルの「Liquidコード」欄に、購入特典のコードを貼り付けて保存
スニペットには分割していません。分割すると {% render %} をどこに書くかという問題が生じ、結局テーマファイルかテンプレートJSONを編集することになるためです。1ブロックで自己完結させています。
実装上の注意点
◆再描画で消える
Horizonはバリアントを選ぶたびにピッカーをmorphで描き直すため、JavaScriptで差し込んだ要素は保持されず消えてしまいます。貼り付けるコードでは MutationObserver で監視して再適用するようにしています。差し込み済みかどうかを判定しているので、無限ループや重複挿入は起きません。
◆CSSの調整が必要
補足をそのまま追加するとラベルの横に押し出されてレイアウトが崩れます。ラベルを縦積み（flex-direction: column）にするCSSもコードに含めています。
◆選択肢の並びを整えると綺麗に見える
Horizonのバリアントピッカーはラベルの長さに応じて2〜3列のグリッドになります。選択肢の数を列数の倍数に揃え、ラベルと補足を列幅に収まる長さにすると、折り返しや半端な余りが出ず綺麗に並びます。
バリエーションごとにコメントを表示する方法はこちら： バリエーションごとに設定したコメント（HTMLタグもOK）を商品ページに表示するブロック
