{"product_id":"2026-08-26","title":"【Horizon】商品詳細画面に購入前チェックボックスを表示し、未チェック時はカート追加ボタンを無効にする方法","description":"\u003cp\u003e\u003cspan\u003eHorizonの商品ページに「購入前チェックボックス」ブロックを1つ追加するだけで、利用規約への同意など最大3つの確認項目を表示できる方法です。1つでも未チェックのままだと、カート追加ボタンとShop Pay等の即時購入ボタンをまとめてオーバーレイでブロックします。\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-26_1.png?v=1787748089\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e追加方法①：コードエディタにブロックを追加\u003c\/h3\u003e\n\u003cp\u003e◆Shopify管理画面 → オンラインストア → テーマ →「…」→ コードを編集\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"設定手順①：テーマ一覧の「…」メニューから「コードを編集」を選ぶ\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_2.png?v=1787748089\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆\u003ccode\u003eblocks\u003c\/code\u003eフォルダに \u003ccode\u003epre-purchase-checkbox.liquid\u003c\/code\u003e を新規作成し、購入後のコードを貼り付けて保存\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"設定手順②：コードエディタでblocksフォルダに新規ファイルを作成しコードを貼り付け\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_3.png?v=1787744220\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\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-26_4.png?v=1787744220\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e設定できる項目\u003c\/h3\u003e\n\u003cp\u003e◆チェック項目1〜3：入力した項目の数だけチェックボックスが表示されます。空欄の項目は表示されません\u003cbr\u003e◆未チェック時に表示するメッセージ：オーバーレイ内に表示する文言（改行は\u003ccode\u003e\u0026lt;br\u0026gt;\u003c\/code\u003eで指定可）\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e仕組みについて\u003c\/h3\u003e\n\u003cp\u003eチェックボックスが1つでも未チェックの間は、カート追加ボタン・即時購入ボタンをまとめて包む要素にオーバーレイを重ねてクリックを無効化しています。ボタンを個別にdisabled制御するのではなく、ボタン群全体を覆う方式のため、Shopifyネイティブの決済ボタン（Shop Pay等）も含めてまとめてブロックできます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eDawn版はこちら → \u003ca href=\"\/products\/2023-06-07\"\u003e【Dawn】Shopifyのテーマ「Dawn」の商品詳細画面でチェックボックスを表示し、全てチェックされた時に購入ボタンを有効にする方法\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49223070023931,"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-26.png?v=1787742105","url":"https:\/\/store-dojo.com\/products\/2026-08-26","provider":"STORE DOJO","version":"1.0","type":"link"}