{"product_id":"2026-05-05","title":"【Horizon】ボタン形式のバリエーションピッカーで選択中の値をラベル表示する","description":"\u003cp\u003eHorizonテーマでバリエーションピッカーが「ボタン形式」（buttons style）の場合、選択中の値が legend ラベルに表示されません。色のスウォッチでは「色 ベージュ」のように選択値が出ますが、サイズや素材などのテキストボタン形式では出ない仕様です。それを buttons 形式にも拡張して、選択中の値をラベルに表示するための1行修正です。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"ボタン形式バリアントで選択中の値が表示されている例\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-05_1.png?v=1777732713\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003e仕組み\u003c\/h2\u003e\n\u003cp\u003e\u003ccode\u003esnippets\/variant-main-picker.liquid\u003c\/code\u003e の \u003ccode\u003e\u0026lt;legend\u0026gt;\u003c\/code\u003e ブロック内で、選択中の値を表示する処理は \u003ccode\u003evariant_style == 'swatch'\u003c\/code\u003e の時のみ動作するよう条件付けされています。この条件を \u003ccode\u003eor block_settings.variant_style == 'buttons'\u003c\/code\u003e で拡張するだけで、buttons 形式の時にも同じ \u003ccode\u003e\u0026lt;span class=\"variant-option__swatch-value\"\u0026gt;\u003c\/code\u003e が出力され、CSS も既存のスウォッチ用のものがそのまま流用されます。\u003c\/p\u003e\n\n\u003ch2\u003e修正するファイル\u003c\/h2\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.9em;\"\u003e\n\u003cthead\u003e\n\u003ctr style=\"background:#f6f8fa;\"\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eファイルパス\u003c\/th\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e操作\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003esnippets\/variant-main-picker.liquid\u003c\/code\u003e\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eL81 を1行修正（条件式を \u003ccode\u003eor block_settings.variant_style == 'buttons'\u003c\/code\u003e に拡張）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003e修正内容\u003c\/h2\u003e\n\u003cp\u003e\u003cimg alt=\"variant-main-picker.liquid のL81周辺コード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-05_2.png?v=1777732712\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e追加するのは \u003ccode\u003eor block_settings.variant_style == 'buttons'\u003c\/code\u003e の文言のみ。バリアント切り替え時の動的更新は Horizon 純正のセクションレンダリング機構が \u003ccode\u003e\u0026lt;legend\u0026gt;\u003c\/code\u003e ごとモーフィングで差し替えてくれるため、JavaScript の追加は不要です。\u003c\/p\u003e\n\n\u003ch2\u003e注意事項\u003c\/h2\u003e\n\u003cp\u003eこの修正はベンダーファイル（\u003ccode\u003esnippets\/variant-main-picker.liquid\u003c\/code\u003e）を直接編集します。Liquid の条件分岐ロジックを書き換える性質上、外部スニペット集約パターン（\u003ca href=\"\/blogs\/tips\/how-to-customize-shopify-horizon-theme-safely\"\u003eHorizonテーマの安全なカスタマイズ方針\u003c\/a\u003e）では実現できません。\u003c\/p\u003e\n\n\u003cp\u003eHorizonテーマ本体のアップデートで該当ファイルが上書きされた場合、この修正は切り戻される可能性があります。テーマアップデートの際は差分の再適用が必要になる点に留意してください。Git 連携で差分管理しておくと、コンフリクト発生時に気付きやすくなります。\u003c\/p\u003e\n\n\u003cp\u003e関連: 同等の趣旨を Dawn テーマで実装した TIPS → \u003ca href=\"\/products\/2023-05-12\"\u003eShopifyのテーマ「Dawn」でバリエーションピッカーがボタンタイプの時に「選択中バリアントを明示」する設定例\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48830233084155,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-05.png?v=1777732716","url":"https:\/\/store-dojo.com\/products\/2026-05-05","provider":"STORE DOJO","version":"1.0","type":"link"}