{"product_id":"2026-10-07","title":"[MetaSync] Show the full terms of service in a scrollable box on the sign-up form","description":"\u003cp\u003e\u003cspan\u003eThis is a setup example for showing the full text of your terms of service in a scrollable box on a sign-up form built with the Shopify app \"MetaSync (AL CustomerMetaSync)\". MetaSync's sign-up form can show an \"I agree to the terms\" checkbox, but the terms themselves don't appear on the form. If your old sign-up page displayed the terms in a box, this lets you keep the same experience when you move to new customer accounts.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eNote that new customer accounts already show a line on the login and sign-up screen saying \"By continuing, you agree to the terms of service\", with a link to the terms. We still put the full text on the sign-up form on purpose: instead of customers \"agreeing\" without ever opening the link, they can read the terms right there and then check the box themselves. This suits stores whose terms customers really should read when they sign up, such as membership rules or conditions for points or subscriptions.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Result: the full terms appear in a scrollable box right after the consent checkbox\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_1_en.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eMetaSync has \"Custom CSS path\" and \"Custom JS path\" settings that load files from your theme's assets directory into the sign-up form. This example uses that mechanism, so the app itself is not modified at all.\u003c\/span\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eHow it works: find the consent field by its label, then insert right after it\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eIn the form MetaSync renders, each field, including its label, is wrapped in a div with the class \"alcms-field\". The consent checkbox has no fixed id like the metafield inputs do, so the script finds the field by its label text (\"I agree to the terms\") and inserts a short note and the terms box right after it.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eBecause the form can be rendered after the page loads, the script watches the page for up to 15 seconds and inserts the box as soon as the form appears. If it still can't insert the box, it shows a link to your terms page instead, so customers are never asked to agree without a way to read the terms.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"How it works: find the field by the consent label and insert a note and terms box after it\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_2_en.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eSetup\u003c\/h3\u003e\n\u003cp\u003e◆1. Add the JS\/CSS files to your theme\u003cbr\u003e・In the code editor, create onboarding.js and onboarding.css in the assets directory and paste in the code (the code is shown after purchase)\u003cbr\u003e・Replace TERMS_HTML in the settings at the top of onboarding.js with your store's terms. Set TERMS_URL to your terms page URL, starting with \"https:\/\/\"\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Code for assets\/onboarding.js (settings)\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_3_en.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Code for assets\/onboarding.js (logic)\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_4_en.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Code for assets\/onboarding.css\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_5_en.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆2. Set the paths in the MetaSync admin\u003cbr\u003e・On the sign-up form settings screen, enter onboarding.js in \"Custom JS path\" and onboarding.css in \"Custom CSS path\", then save (paths are relative to assets)\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Setup: set the custom JS\/CSS paths in the MetaSync admin\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_4_en_d7019fa6-86d3-4089-8f21-bbbfa1ab0ee9.png?v=1789014723\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eCustomization\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eYou only need to edit the settings at the top of the code to reuse it in another store.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e・AGREE_LABEL: the label of the consent checkbox (partial match). Change it if your label wording differs\u003cbr\u003e・NOTE_TEXT: the note shown above the terms box\u003cbr\u003e・TERMS_HTML: the full text of your terms (HTML)\u003cbr\u003e・TERMS_URL: the link shown when the box can't be inserted\u003cbr\u003e・Change the box height with max-height in onboarding.css (default 260px)\u003c\/p\u003e\n\u003ch3\u003eNotes\u003c\/h3\u003e\n\u003cp\u003e・The terms text lives directly inside the JS. \u003cstrong\u003eWhen you revise your terms, update both your store's terms page and this JS file.\u003c\/strong\u003e If you update only one, they will no longer match\u003cbr\u003e・Plain URLs written in the terms tend to overflow the box sideways on phones. The CSS wraps them, so no horizontal scrollbar appears. Indentation left over from text pasted from Word is also kept inside the box\u003cbr\u003e・MetaSync loads one JS file and one CSS file. If you already use onboarding.js from \u003ca href=\"\/en-us\/products\/2026-09-08\"\u003ethe tip that hides extra fields behind a button\u003c\/a\u003e, add this code to the end of your existing files (the code is self-contained, so the two won't interfere)\u003cbr\u003e・If the JS\/CSS doesn't load, save the paths again in the MetaSync admin\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eFor more MetaSync sign-up form customizations, see \u003ca href=\"\/en-us\/products\/2026-09-08\"\u003ehiding extra fields until a button is clicked\u003c\/a\u003e and \u003ca href=\"\/en-us\/products\/2026-09-09\"\u003eshowing extra fields based on a dropdown selection\u003c\/a\u003e.\u003c\/span\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":68270674542843,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07.png?v=1791268695","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-10-07","provider":"STORE DOJO","version":"1.0","type":"link"}