{"product_id":"2026-07-27","title":"[Horizon] Show notes like \"+15,000 JPY\" or \"Made to order\" on variant options","description":"\u003cp\u003e\u003cspan\u003eA way to show notes such as \"+15,000 JPY\", \"Made to order\" or \"Mattress sold separately\" directly on the size and color options of a Horizon product page, so shoppers can see the price difference and lead time before they pick. No theme file edits are needed — you only paste code into a Custom Liquid block.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Result: a note line appears inside each option label\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_1_en.png?v=1785151997\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eWhy variant metafields fall apart here\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"The unit the note belongs to does not match the unit of a variant\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_2_en.png?v=1785151997\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003eThe note \"size costs +8,000\" belongs to the \u003cstrong\u003esize\u003c\/strong\u003e. But a variant is a cross product of color x size x mattress, so putting the note on variants means repeating the same value once per color. Every color you add multiplies the number of entries you have to type.\u003c\/p\u003e\n\u003cp\u003eThe opposite is also worth knowing: \u003cstrong\u003eif the product has only one option, you do not need this method\u003c\/strong\u003e. Each option value maps to exactly one variant, so a variant metafield works as it is. Switch to the setup below only once two or more options are combined.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eHow it works — put the note on the option value\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Register three fields and the note appears only where it matches\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_3_en.png?v=1785151997\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003eA metaobject entry holds just three fields: option name, option value, and the note to display. Link the entries to the product and the note is injected only into option values where both the name and the value match. Option values with no entry show nothing, so you register only the ones you want a note on.\u003c\/p\u003e\n\u003cp\u003eHorizon already outputs \u003ccode\u003edata-option-name\u003c\/code\u003e and \u003ccode\u003evalue\u003c\/code\u003e on every radio button in the variant picker. Matching those two attributes is enough to locate the option, which is why no theme modification is required.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eStep 1 — Create the metaobject definition\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Step 1: create the metaobject definition\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_4_en.png?v=1785151997\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆Where\u003cbr\u003e・Admin → Settings → Custom data → Metaobjects → Add definition\u003c\/p\u003e\n\u003cp\u003e◆What to enter\u003cbr\u003e・Name: Option value note (the type becomes \u003ccode\u003eoption_value_note\u003c\/code\u003e automatically)\u003cbr\u003e・Field 1: Option name \/ Single line text \/ required\u003cbr\u003e・Field 2: Option value \/ Single line text \/ required\u003cbr\u003e・Field 3: Note \/ Single line text \/ required\u003c\/p\u003e\n\u003cp\u003eAll three are single line text, created in this order. You build this container once and never touch it again.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eStep 2 — Add entries and link them to the product\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Step 2: add entries and link them in the product metafield\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_5_en.png?v=1785151998\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆Adding entries\u003cbr\u003e・Admin → Content → Metaobjects → \"Option value note\" → Add entry\u003cbr\u003e・One entry equals one option value. Create only the ones you want a note on.\u003c\/p\u003e\n\u003cp\u003e◆Example entries used in this article\u003cbr\u003e・Color \/ White \/ Made to order\u003cbr\u003e・Size \/ Single \/ Base size\u003cbr\u003e・Size \/ Semi-double \/ +8,000 JPY\u003cbr\u003e・Size \/ Double \/ +15,000 JPY\u003cbr\u003e・Mattress \/ Frame only \/ Mattress sold separately\u003cbr\u003e・Mattress \/ Bonnell coil mattress \/ +20,000 JPY\u003c\/p\u003e\n\u003cp\u003eCopy the option name and value \u003cstrong\u003eexactly as they appear in the product's variant settings\u003c\/strong\u003e. A single character difference — including spacing — breaks the match, so pasting is safer than typing.\u003c\/p\u003e\n\u003cp\u003e◆Product metafield definition\u003cbr\u003e・Settings → Custom data → Products → Add definition\u003cbr\u003e・Name: Option value note \/ namespace and key: \u003ccode\u003ecustom.option_value_notes\u003c\/code\u003e\u003cbr\u003e・Type: Metaobject reference (\"Option value note\") with \u003cstrong\u003e\"List of values\" enabled\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e◆Linking\u003cbr\u003e・Open the product, scroll to Metafields, and pick the entries you want in the \"Option value note\" field. Because you are selecting rather than typing, there is no JSON to hand-write and no syntax errors.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eStep 3 — Paste the code into a Custom Liquid block\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Step 3: add a Custom Liquid block in the product template and paste the code\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27_6_en.png?v=1785151997\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆Where\u003cbr\u003e・Online Store → Themes → Customize → switch the template selector to \"Products\"\u003cbr\u003e・In the left panel expand \"Product information\" → \"Details\"\u003cbr\u003e・Choose \"Add block\" → \"Custom Liquid\" and place it \u003cstrong\u003ebelow the variant picker\u003c\/strong\u003e\u003cbr\u003e・Paste the included code into the \"Liquid code\" field in the right panel and save\u003c\/p\u003e\n\u003cp\u003eThe code is deliberately not split into a snippet. Splitting it raises the question of where to put \u003ccode\u003e{% render %}\u003c\/code\u003e, which ends up requiring a theme file or template JSON edit. Keeping it self-contained in one block keeps the setup to copy and paste.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eImplementation notes\u003c\/h3\u003e\n\u003cp\u003e◆The injected note disappears on re-render\u003cbr\u003eHorizon morphs and repaints the variant picker every time a variant is selected, so elements added with JavaScript are not preserved. The included code watches for that repaint with a MutationObserver and re-applies the notes. It checks whether a note is already present, so there is no infinite loop and no duplicate insertion.\u003c\/p\u003e\n\u003cp\u003e◆CSS is required\u003cbr\u003eAppending the note without CSS pushes it sideways and breaks the button layout. The code includes CSS that stacks the label and the note vertically.\u003c\/p\u003e\n\u003cp\u003e◆Tidy option lists look better\u003cbr\u003eHorizon's variant picker becomes a two or three column grid depending on label width. Keeping the number of values a multiple of the column count, and keeping labels and notes short enough to fit one line, avoids awkward wrapping and orphaned buttons.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eRelated: \u003ca href=\"\/en-us\/products\/2026-05-06\"\u003eA block that shows a per-variant comment (HTML allowed) on the product page\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49109256405243,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-27.png?v=1785152123","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-07-27","provider":"STORE DOJO","version":"1.0","type":"link"}