Horizonテーマでバリエーションピッカーが「ボタン形式」（buttons style）の場合、選択中の値が legend ラベルに表示されません。色のスウォッチでは「色 ベージュ」のように選択値が出ますが、サイズや素材などのテキストボタン形式では出ない仕様です。それを buttons 形式にも拡張して、選択中の値をラベルに表示するための1行修正です。
仕組み
snippets/variant-main-picker.liquid の <legend> ブロック内で、選択中の値を表示する処理は variant_style == 'swatch' の時のみ動作するよう条件付けされています。この条件を or block_settings.variant_style == 'buttons' で拡張するだけで、buttons 形式の時にも同じ <span class="variant-option__swatch-value"> が出力され、CSS も既存のスウォッチ用のものがそのまま流用されます。
修正するファイル
| ファイルパス | 操作 |
|---|---|
snippets/variant-main-picker.liquid |
L81 を1行修正（条件式を or block_settings.variant_style == 'buttons' に拡張） |
修正内容
追加するのは or block_settings.variant_style == 'buttons' の文言のみ。バリアント切り替え時の動的更新は Horizon 純正のセクションレンダリング機構が <legend> ごとモーフィングで差し替えてくれるため、JavaScript の追加は不要です。
注意事項
この修正はベンダーファイル（snippets/variant-main-picker.liquid）を直接編集します。Liquid の条件分岐ロジックを書き換える性質上、外部スニペット集約パターン（Horizonテーマの安全なカスタマイズ方針）では実現できません。
Horizonテーマ本体のアップデートで該当ファイルが上書きされた場合、この修正は切り戻される可能性があります。テーマアップデートの際は差分の再適用が必要になる点に留意してください。Git 連携で差分管理しておくと、コンフリクト発生時に気付きやすくなります。
関連: 同等の趣旨を Dawn テーマで実装した TIPS → Shopifyのテーマ「Dawn」でバリエーションピッカーがボタンタイプの時に「選択中バリアントを明示」する設定例
