{"product_id":"2026-08-26","title":"[Horizon] Show pre-purchase confirmation checkboxes and block the Add to Cart button until all are checked","description":"\u003cp\u003e\u003cspan\u003eAdd a single \"Pre-purchase Checkbox\" block to your Horizon product page to show up to three confirmation checkboxes — terms of service, return policy, and so on. While even one checkbox is left unchecked, an overlay blocks the Add to Cart button and accelerated-checkout buttons like Shop Pay together.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Result: an overlay blocks the buy buttons until every checkbox is checked\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_1_en.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\u003eHow to add it (1): Add the block via the code editor\u003c\/h3\u003e\n\u003cp\u003e◆Shopify admin → Online Store → Themes → \"…\" → Edit code\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Step 1: select Edit code from the theme list menu\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_2_en.png?v=1787748089\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆In the \u003ccode\u003eblocks\u003c\/code\u003e folder, create a new file named \u003ccode\u003epre-purchase-checkbox.liquid\u003c\/code\u003e and paste the purchased code, then save\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Step 2: create a new file in the blocks folder and paste the code\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_3_en.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\u003eHow to add it (2): Add the block in the theme editor\u003c\/h3\u003e\n\u003cp\u003e◆Theme editor → Product page template → \"Product information\" → \"Details\" → \"Add block\" → select \"Pre-purchase Checkbox\"\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Step 3: add the Pre-purchase Checkbox block in the theme editor and fill in the settings\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-26_4_en.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\u003eSettings\u003c\/h3\u003e\n\u003cp\u003e◆Checkbox items 1–3: a checkbox is shown for each item you fill in. Blank items are hidden\u003cbr\u003e◆Message shown when unchecked: the text shown inside the overlay (use \u003ccode\u003e\u0026lt;br\u0026gt;\u003c\/code\u003e for line breaks)\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eHow it works\u003c\/h3\u003e\n\u003cp\u003eWhile any checkbox is left unchecked, an overlay is layered on top of the element that wraps the Add to Cart and accelerated-checkout buttons, blocking clicks. Instead of disabling each button individually, this approach covers the whole button group — including Shopify's native payment buttons like Shop Pay, which can't be disabled directly via JavaScript.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eSee the Dawn version here → \u003ca href=\"\/en-us\/products\/2023-06-07\"\u003e[Dawn] Show a checkbox on the Dawn theme's product page and enable the buy button once all boxes are checked\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49223070023931,"sku":null,"price":0.0,"currency_code":"USD","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\/en-us\/products\/2026-08-26","provider":"STORE DOJO","version":"1.0","type":"link"}