Skip to product information
1 of 1
Published:2026.05.05

[Horizon] Show the currently selected value as a label in buttons-style variant pickers

[Horizon] Show the currently selected value as a label in buttons-style variant pickers

Applications

  • 商品情報管理・編集
View full details

In 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.

Buttons-style variant picker showing the selected value as a label

How it works

In snippets/variant-main-picker.liquid, the <legend> block emits the selected value only when variant_style == 'swatch'. By extending that condition with or block_settings.variant_style == 'buttons', the same <span class="variant-option__swatch-value"> is rendered for buttons-style pickers as well, reusing the existing swatch CSS.

File to edit

File Operation
snippets/variant-main-picker.liquid Edit L81 (extend the condition with or block_settings.variant_style == 'buttons')

The change

variant-main-picker.liquid around L81

Only the snippet or block_settings.variant_style == 'buttons' is added. Dynamic updates on variant change are handled automatically by Horizon's native section rendering — the <legend> is morphed in along with the rest of the picker — so no JavaScript is required.

Caveats

This patch edits a vendor file (snippets/variant-main-picker.liquid) directly. Because it changes Liquid conditional logic, the external-asset pattern recommended in our Horizon-safe customization guide is not applicable here.

If 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.

Related: the equivalent technique for Dawn → Show selected variant when using buttons-style picker (Dawn)

After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Horizon 3.5.1

snippets/variant-main-picker.liquid(L81 を1行修正)