{"product_id":"2026-05-25","title":"【Horizon】コレクションページの商品カードにバリアントオプションをタグ表示するブロック","description":"\u003cp\u003eHorizonテーマのコレクションページでSwatchesブロックに対応していないテキスト系バリアントオプション（サイズ・素材など）を商品カードにピル形式で表示するプライベートブロックの実装例です。ブロックをカードに追加するだけで、すべての商品カードにオプション一覧がタグ形式で表示されます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コレクションページの商品カードにバリアントオプションがピル形式で表示されている様子\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-25_1.png?v=1779580328\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"テーマエディタのバリアントオプションブロック設定画面\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-25_2.png?v=1779580330\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003e機能\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e商品カードの任意の位置に「バリアントオプション」ブロックとして追加できる\u003c\/li\u003e\n  \u003cli\u003e除外するオプション名（カンマ区切り）を指定して、Swatchesブロック表示済みの色オプション等を除外できる\u003c\/li\u003e\n  \u003cli\u003eDefault Title商品（バリアントなし）は自動的に非表示になる\u003c\/li\u003e\n  \u003cli\u003eテーマエディタからピルの背景色・文字色・枠線色・フォントサイズ・上下左右の余白を設定できる\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003e追加・修正するファイル\u003c\/h2\u003e\n\n\u003ch3\u003eblocks\/_variant-options.liquid（新規作成）\u003c\/h3\u003e\n\n\u003cp\u003e\u003cimg alt=\"blocks\/_variant-options.liquid のコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-25_3.png?v=1779580331\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003eblocks\/_product-card.liquid（L44付近に1行追加）\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003eblocks\/_product-card.liquid\u003c\/code\u003e の schema 内 blocks 配列に \u003ccode\u003e{\"type\": \"_variant-options\"}\u003c\/code\u003e を追記して、テーマエディタの「ブロックを追加」メニューに表示させます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"blocks\/_product-card.liquid の変更箇所\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-25_4.png?v=1779580332\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e関連TIPS：\u003ca href=\"\/products\/2023-05-20\"\u003e【Dawn】コレクションページの商品カードにバリアントオプションをボタン表示する\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48886313058555,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-25_1e029e12-a46c-4520-9a7b-7ab4b4b65d73.png?v=1779587492","url":"https:\/\/store-dojo.com\/products\/2026-05-25","provider":"STORE DOJO","version":"1.0","type":"link"}