{"product_id":"2026-05-06","title":"[Horizon] Per-variant comments (HTML allowed) shown on the product page","description":"\u003cp\u003eA 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.\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"Variant comment swaps with size selection\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-06_1_en.png?v=1777772766\" 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\u003eHorizon's native \u003ccode\u003evariant-picker.js\u003c\/code\u003e refetches the full product page on variant change, but only morphs the \u003ccode\u003e\u0026lt;variant-picker\u0026gt;\u003c\/code\u003e 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.\u003c\/p\u003e\n\n\u003cp\u003eThis block is wired as follows.\u003c\/p\u003e\n\u003cp\u003e◆Initial render\u003cbr\u003e・The current variant's metafield value (\u003ccode\u003eclosest.product.selected_or_first_available_variant.metafields.custom.variant_comment.value\u003c\/code\u003e) is rendered inline. The wrapper inherits typography \/ spacing \/ appearance via the native \u003ccode\u003e'spacing-padding'\u003c\/code\u003e and \u003ccode\u003e'typography-style'\u003c\/code\u003e snippets, so the editor UI matches Horizon's text blocks.\u003c\/p\u003e\n\u003cp\u003e◆Live update\u003cbr\u003e・Embed every variant's comment and option values as inline JSON.\u003cbr\u003e・Listen for radio \u003ccode\u003echange\u003c\/code\u003e in capture phase, resolve the matching variant from the currently checked option values, and swap the \u003ccode\u003e.text-block--{block.id}\u003c\/code\u003e innerHTML immediately.\u003cbr\u003e・No 1.2-second wait for the native full-page fetch — perceived response feels instant.\u003cbr\u003e・Also listen to the native \u003ccode\u003evariant:update\u003c\/code\u003e event as a reconciliation path for non-radio code flows.\u003c\/p\u003e\n\n\u003ch2\u003eFiles to add \/ edit\u003c\/h2\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.9em;\"\u003e\u003cthead\u003e\u003ctr style=\"background:#f6f8fa;\"\u003e\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eFile\u003c\/th\u003e\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eOperation\u003c\/th\u003e\u003c\/tr\u003e\u003c\/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003eblocks\/variant-comment.liquid\u003c\/code\u003e\u003c\/td\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eCreate (full file)\u003c\/td\u003e\u003c\/tr\u003e\u003ctr\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003elocales\/ja.schema.json\u003c\/code\u003e\u003c\/td\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eAdd \u003ccode\u003eproduct_variant_comment\u003c\/code\u003e to \u003ccode\u003enames\u003c\/code\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003ctr\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003elocales\/en.default.schema.json\u003c\/code\u003e\u003c\/td\u003e\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eAdd \u003ccode\u003eproduct_variant_comment\u003c\/code\u003e to \u003ccode\u003enames\u003c\/code\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/tbody\u003e\u003c\/table\u003e\n\n\u003ch2\u003eStep ① Define the variant metafield, then fill in each variant\u003c\/h2\u003e\n\u003cp\u003eAdmin → Settings → Custom data → \u003cstrong\u003eVariants\u003c\/strong\u003e → Add definition → name \"Variant comment\", namespace.key = \u003ccode\u003ecustom.variant_comment\u003c\/code\u003e, type = Multi-line text. Open every variant on the target product and enter the comment in the metafield panel (HTML tags are honored).\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"Variant metafield definition and editing\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-06_2_en.png?v=1777772766\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003eStep ② Create the new block file\u003c\/h2\u003e\n\u003cp\u003eCreate \u003ccode\u003evariant-comment.liquid\u003c\/code\u003e under the \u003ccode\u003eblocks\u003c\/code\u003e folder. In VS Code or your editor, right-click the \u003ccode\u003eblocks\u003c\/code\u003e folder, choose \"New File...\", and name it \u003ccode\u003evariant-comment.liquid\u003c\/code\u003e.\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"Right-click the blocks folder in VS Code to create a new file\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25_4.png?v=1777123362\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003eStep ③ Paste the sample code\u003c\/h2\u003e\n\u003cp\u003ePaste the sample source at the bottom of this article into \u003ccode\u003eblocks\/variant-comment.liquid\u003c\/code\u003e and save. Also add the localization key \u003ccode\u003eproduct_variant_comment\u003c\/code\u003e for the block display name to the \u003ccode\u003enames\u003c\/code\u003e section of \u003ccode\u003elocales\/ja.schema.json\u003c\/code\u003e and \u003ccode\u003elocales\/en.default.schema.json\u003c\/code\u003e.\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"blocks\/variant-comment.liquid full source\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-06_3_en.png?v=1777790675\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003eStep ④ Add the block to the product template\u003c\/h2\u003e\n\u003cp\u003eIn the theme editor, open the product template and add the \"Variant comment\" block from category \"Product\" inside the \u003cem\u003eProduct information \u0026gt; Details\u003c\/em\u003e container. After placing the block, tune typography \/ padding from the right panel just like a native text block.\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"Add the Variant comment block under the product details container in the theme editor\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-06_4_en.png?v=1777790497\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003eCaveats\u003c\/h2\u003e\n\u003cp\u003eThe block is registered as a \u003ccode\u003e@theme\u003c\/code\u003e theme block, so no schema edits to vendor files are required. The only vendor-file touch points are the locale files (\u003ccode\u003elocales\/ja.schema.json\u003c\/code\u003e \/ \u003ccode\u003elocales\/en.default.schema.json\u003c\/code\u003e) where the \u003ccode\u003et:names.product_variant_comment\u003c\/code\u003e key is appended. For multi-locale stores, add the same key to every locale schema file you ship.\u003c\/p\u003e\n\n\u003cp\u003eRelated: the equivalent Dawn-version technique → \u003ca href=\"\/en-us\/products\/2023-05-13\"\u003eShow per-variant comments (HTML allowed) on the product page (Dawn)\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48830846501115,"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-06.png?v=1777788766","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-05-06","provider":"STORE DOJO","version":"1.0","type":"link"}