[MetaSync] Show the full terms of service in a scrollable box on the sign-up form
This 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.
Note 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.
MetaSync 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.
How it works: find the consent field by its label, then insert right after it
In 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.
Because 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.
Setup
◆1. Add the JS/CSS files to your theme
・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)
・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://"
◆2. Set the paths in the MetaSync admin
・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)
Customization
You only need to edit the settings at the top of the code to reuse it in another store.
・AGREE_LABEL: the label of the consent checkbox (partial match). Change it if your label wording differs
・NOTE_TEXT: the note shown above the terms box
・TERMS_HTML: the full text of your terms (HTML)
・TERMS_URL: the link shown when the box can't be inserted
・Change the box height with max-height in onboarding.css (default 260px)
Notes
・The terms text lives directly inside the JS. When you revise your terms, update both your store's terms page and this JS file. If you update only one, they will no longer match
・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
・MetaSync loads one JS file and one CSS file. If you already use onboarding.js from the tip that hides extra fields behind a button, add this code to the end of your existing files (the code is self-contained, so the two won't interfere)
・If the JS/CSS doesn't load, save the paths again in the MetaSync admin
For more MetaSync sign-up form customizations, see hiding extra fields until a button is clicked and showing extra fields based on a dropdown selection.
