{"product_id":"2026-08-08","title":"【Horizon】標準のバリアントピッカーを画像付きの新規ブロックに置き換える","description":"\u003cp\u003e\u003cspan\u003eHorizonの標準バリアントピッカーを、各選択肢に商品画像を表示できるブロックに置き換える方法です。テキストだけの選択肢を、写真付きの分かりやすい選択肢に変えられます。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"完成イメージ：各選択肢に商品画像を表示\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-08_1_880b4bda-ce2a-4892-b1e7-2e89aaf1d5db.png?v=1786240956\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e追加方法\u003c\/h3\u003e\n\u003cp\u003e◆Shopify管理画面 → オンラインストア → テーマ →「…」→ コードを編集\u003cbr\u003e◆\u003ccode\u003eblocks\u003c\/code\u003eフォルダに \u003ccode\u003evariant-picker-images.liquid\u003c\/code\u003e を新規作成し、購入後のコードを貼り付けて保存\u003cbr\u003e◆テーマエディタ → 商品ページテンプレート →「商品情報」→「詳細」で、既存の「バリエーションピッカー」ブロックを削除し、「画像付きバリアントピッカー」を追加\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"追加方法：既存ピッカーを削除し新規ブロックを同じ位置に追加\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-08_4.png?v=1786170321\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e画像には、そのバリアントに設定されている商品写真がそのまま使われます。追加の画像アップロードは不要です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e設定\u003c\/h3\u003e\n\u003cp\u003e◆画像とテキストの並び：縦並び（画像が上・デフォルト）と横並び（画像が左）を切り替えられます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"設定：画像とテキストの並び\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-08_5.png?v=1786170322\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆画像を表示するオプション：色・サイズなど複数のオプションを持つ商品では、画像が設定されているオプション（通常は色）だけを選んでください。それ以外のオプションは通常のボタン表示になります。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"設定：画像を表示するオプションを指定する\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-08_7.png?v=1786239337\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆ご購入いただくと、この画像付きバリアントピッカーの完成コード（Liquidファイル全文）をご利用いただけます。\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49159924449531,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-08.png?v=1786170440","url":"https:\/\/store-dojo.com\/products\/2026-08-08","provider":"STORE DOJO","version":"1.0","type":"link"}