[MetaSync] Hide Extra Sign-up Form Fields Behind an Expand Button to Reduce Form Friction

This example hides the extra input fields on a registration form built with the Shopify app MetaSync (AL CustomerMetaSync) until shoppers expand them with a button. When optional fields such as family info are all listed from the start, the form gets long and raises the barrier to sign up. We keep the initial view minimal and let only those who want to fill them in expand the rest.

MetaSync provides "custom CSS path" and "custom JS path" settings that load files placed in your theme's assets directory into the form. We use this mechanism, so the app itself is never modified.

How it works: every input can be reliably targeted by id

On forms rendered by MetaSync, each input / select gets an id following the shared rule "metafield[namespace.key]", and the whole field including its label is wrapped in a div with the class "alcms-field". Thanks to this consistency, once you know the metafield key, JavaScript can reliably target any field and show or hide it.

Setup

◆1. Prepare customer metafields and the form
・Create customer metafields under Settings → Custom data → Customers (in this example, relation and birthday for up to 3 family members — 6 definitions)
・Customer account access must be set to "Read and write"
・Add the metafields to the registration form in the MetaSync admin

◆2. Add the JS/CSS files to your theme
・In the code editor, create onboarding.js and onboarding.css in the assets directory and paste the code (shown after purchase)

◆3. Set the paths in the MetaSync admin
・In the registration form settings, enter onboarding.js as the custom JS path and onboarding.css as the custom CSS path, then save (paths are relative to assets)

Customization

Rewrite only the config section at the top of the code to reuse it on any form.

・HIDDEN_KEYS: list of metafield keys to hide
・TOGGLE_LABEL: label of the expand button

Notes

・If the JS/CSS does not load, re-save the paths in the MetaSync admin
・If a metafield key changes, the JS silently does nothing and the form keeps working as-is (a safe fallback)

To show extra input fields based on a dropdown selection, see this TIPS.