{"product_id":"2026-05-05","title":"[Horizon] Show the currently selected value as a label in buttons-style variant pickers","description":"\u003cp\u003eIn the Horizon theme, when a variant picker uses the \"buttons\" style (e.g. for size or material options), the currently selected value is not displayed next to the option label. Color swatches show \"Color Beige\" by default, but text-only buttons rely on the visual focus ring alone. This 1-line fix extends the condition so the selected value also appears for buttons-style pickers.\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"Buttons-style variant picker showing the selected value as a label\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-05_1_en.png?v=1777732712\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003eHow it works\u003c\/h2\u003e\n\u003cp\u003eIn \u003ccode\u003esnippets\/variant-main-picker.liquid\u003c\/code\u003e, the \u003ccode\u003e\u0026lt;legend\u0026gt;\u003c\/code\u003e block emits the selected value only when \u003ccode\u003evariant_style == 'swatch'\u003c\/code\u003e. By extending that condition with \u003ccode\u003eor block_settings.variant_style == 'buttons'\u003c\/code\u003e, the same \u003ccode\u003e\u0026lt;span class=\"variant-option__swatch-value\"\u0026gt;\u003c\/code\u003e is rendered for buttons-style pickers as well, reusing the existing swatch CSS.\u003c\/p\u003e\n\n\u003ch2\u003eFile to edit\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;\"\u003eFile\u003c\/th\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eOperation\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;\"\u003eEdit L81 (extend the condition with \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\u003eThe change\u003c\/h2\u003e\n\u003cp\u003e\u003cimg alt=\"variant-main-picker.liquid around L81\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-05_2_en.png?v=1777732712\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003eOnly the snippet \u003ccode\u003eor block_settings.variant_style == 'buttons'\u003c\/code\u003e is added. Dynamic updates on variant change are handled automatically by Horizon's native section rendering — the \u003ccode\u003e\u0026lt;legend\u0026gt;\u003c\/code\u003e is morphed in along with the rest of the picker — so no JavaScript is required.\u003c\/p\u003e\n\n\u003ch2\u003eCaveats\u003c\/h2\u003e\n\u003cp\u003eThis patch edits a vendor file (\u003ccode\u003esnippets\/variant-main-picker.liquid\u003c\/code\u003e) directly. Because it changes Liquid conditional logic, the external-asset pattern recommended in \u003ca href=\"\/en-us\/blogs\/tips\/how-to-customize-shopify-horizon-theme-safely\"\u003eour Horizon-safe customization guide\u003c\/a\u003e is not applicable here.\u003c\/p\u003e\n\n\u003cp\u003eIf the Horizon theme is updated and overwrites this file, the fix may be reverted. Re-apply after each theme upgrade. Tracking the change in Git makes conflicts visible early.\u003c\/p\u003e\n\n\u003cp\u003eRelated: the equivalent technique for Dawn → \u003ca href=\"\/en-us\/products\/2023-05-12\"\u003eShow selected variant when using buttons-style picker (Dawn)\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48830233084155,"sku":null,"price":0.0,"currency_code":"USD","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\/en-us\/products\/2026-05-05","provider":"STORE DOJO","version":"1.0","type":"link"}