[Horizon] Per-variant comments (HTML allowed) shown on the product page

A new theme block for Horizon that displays a variant-scoped metafield (HTML allowed) on the product page. Show per-size measurements, fit notes, fabric details — anything that should change in sync with the selected variant.

How it works

Horizon's native variant-picker.js refetches the full product page on variant change, but only morphs the <variant-picker> element itself. Sibling blocks in the same section are NOT redrawn automatically, so any block that wants to react to variant change must hook in manually.

This block is wired as follows.

◆Initial render
・The current variant's metafield value (closest.product.selected_or_first_available_variant.metafields.custom.variant_comment.value) is rendered inline. The wrapper inherits typography / spacing / appearance via the native 'spacing-padding' and 'typography-style' snippets, so the editor UI matches Horizon's text blocks.

◆Live update
・Embed every variant's comment and option values as inline JSON.
・Listen for radio change in capture phase, resolve the matching variant from the currently checked option values, and swap the .text-block--{block.id} innerHTML immediately.
・No 1.2-second wait for the native full-page fetch — perceived response feels instant.
・Also listen to the native variant:update event as a reconciliation path for non-radio code flows.

Files to add / edit

Step ① Define the variant metafield, then fill in each variant

Admin → Settings → Custom data → Variants → Add definition → name "Variant comment", namespace.key = custom.variant_comment, type = Multi-line text. Open every variant on the target product and enter the comment in the metafield panel (HTML tags are honored).

Step ② Create the new block file

Create variant-comment.liquid under the blocks folder. In VS Code or your editor, right-click the blocks folder, choose "New File...", and name it variant-comment.liquid.

Step ③ Paste the sample code

Paste the sample source at the bottom of this article into blocks/variant-comment.liquid and save. Also add the localization key product_variant_comment for the block display name to the names section of locales/ja.schema.json and locales/en.default.schema.json.

Step ④ Add the block to the product template

In the theme editor, open the product template and add the "Variant comment" block from category "Product" inside the Product information > Details container. After placing the block, tune typography / padding from the right panel just like a native text block.

Caveats

The block is registered as a @theme theme block, so no schema edits to vendor files are required. The only vendor-file touch points are the locale files (locales/ja.schema.json / locales/en.default.schema.json) where the t:names.product_variant_comment key is appended. For multi-locale stores, add the same key to every locale schema file you ship.

Related: the equivalent Dawn-version technique → Show per-variant comments (HTML allowed) on the product page (Dawn)