【Horizon】バリエーションごとに設定したコメント（HTMLタグもOK）を商品ページに表示するブロック

Horizonテーマで、バリエーションごとに任意のメタフィールド（HTMLタグを含む自由なテキスト）を商品ページに表示するテーマブロックを新規追加する設定例です。サイズごとの寸法・着用感・素材説明など、バリエーション切替に連動した補足情報を表示できます。

仕組み

Horizon純正の variant-picker.js はバリエーション切替時にページ全体を fetch しますが、 morph で書き換える対象は <variant-picker> 自身だけで、同じセクション内の他ブロックは自動再描画されません。そのため、バリエーション連動の表示を実現するブロックは独自に切替を検知してDOMを差し替える必要があります。

本ブロックは以下の構成になっています。

◆初期表示
・closest.product.selected_or_first_available_variant.metafields.custom.variant_comment.value を最初のレンダリング時に出力。Horizon純正の 'spacing-padding'・'typography-style' snippet を経由するため、純正の「説明」ブロックと同じ typography／余白UIが利用できます。

◆動的更新
・全variantのコメントとオプション値を JSON で DOM に埋め込み
・ラジオの change イベントを capture phase で先取りし、現在の選択オプション値から対応variantを特定して innerHTML を即時差し替え
・Horizon純正の1.2秒のページ全体fetchを待たないため体感が速い
・純正の variant:update イベントも reconciliation 経路として listen（ラジオ以外で variant が変わった場合の保険）

追加・修正するファイル

設定手順 ① バリアントメタフィールドの定義を追加し、対象商品のバリエーション詳細でメタフィールドを編集

管理画面 → 設定 → カスタムデータ → バリアント → 定義を追加 → 名前「バリアントコメント」、namespace.key = custom.variant_comment、タイプ = 複数行のテキスト。各バリエーションの詳細画面下部のメタフィールド欄からコメント文を入力（HTMLタグ可）。

設定手順 ② ブロックファイルを新規作成

blocks フォルダ配下に variant-comment.liquid ファイルを新規作成します。VS Code 等のエディタで blocks フォルダを右クリックし、「New File...」を選んで variant-comment.liquid という名前で作成してください。

設定手順 ③ サンプルコードを貼り付け

本記事下部のサンプルコードを blocks/variant-comment.liquid の中にそのまま貼り付け、保存します。あわせて locales/ja.schema.json と locales/en.default.schema.json の names セクションにブロック表示名のローカライズキー product_variant_comment を追加してください。

設定手順 ④ 商品テンプレートにブロックを追加

テーマエディタで商品ページのテンプレートを開き、「商品情報」>「詳細」ブロック内の「ブロックを追加」から、カテゴリ「商品」配下にある「バリエーションコメント」を選択して配置します。配置後は右パネルから typography・余白などを純正テキスト系ブロックと同じUIで調整できます。

注意事項

本ブロックは純正ファイル blocks/_product-details.liquid 等のスキーマには手を入れず、@theme ブロックスロット経由で配置されるテーマブロックとして実装しています。ベンダーファイルへの直接的な書き換えはありません。

一方、ブロック名のローカライズキー t:names.product_variant_comment を locales/ja.schema.json・locales/en.default.schema.json の names セクションに追加する必要があります。テーマアップデートで該当キーが消えることはありませんが、複数言語ストアでは他のロケールファイルにも同様にキーを追加してください。

関連: 同等の趣旨を Dawn テーマで実装した TIPS → Shopifyのテーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法