{"product_id":"2026-09-08","title":"[MetaSync] Hide Extra Sign-up Form Fields Behind an Expand Button to Reduce Form Friction","description":"\u003cp\u003e\u003cspan\u003eThis 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.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Overview: extra input fields are collapsed behind an expand button\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_1_en.png?v=1788839334\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eMetaSync 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.\u003c\/span\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eHow it works: every input can be reliably targeted by id\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eOn 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.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"How it works: every input has an id following a shared rule\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_2_en.png?v=1788839342\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eSetup\u003c\/h3\u003e\n\u003cp\u003e◆1. Prepare customer metafields and the form\u003cbr\u003e・Create customer metafields under Settings → Custom data → Customers (in this example, relation and birthday for up to 3 family members — 6 definitions)\u003cbr\u003e・Customer account access must be set to \"Read and write\"\u003cbr\u003e・Add the metafields to the registration form in the MetaSync admin\u003c\/p\u003e\n\u003cp\u003e◆2. 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 the code (shown after purchase)\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Code for assets\/onboarding.js\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_4_en.png?v=1788839357\" 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-09-08_5_en.png?v=1788839364\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆3. Set the paths in the MetaSync admin\u003cbr\u003e・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)\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Setup: set custom JS\/CSS paths in the MetaSync admin\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_3_en.png?v=1788839349\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eCustomization\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eRewrite only the config section at the top of the code to reuse it on any form.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e・HIDDEN_KEYS: list of metafield keys to hide\u003cbr\u003e・TOGGLE_LABEL: label of the expand button\u003c\/p\u003e\n\u003ch3\u003eNotes\u003c\/h3\u003e\n\u003cp\u003e・If the JS\/CSS does not load, re-save the paths in the MetaSync admin\u003cbr\u003e・If a metafield key changes, the JS silently does nothing and the form keeps working as-is (a safe fallback)\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eTo show extra input fields based on a dropdown selection, see \u003ca href=\"\/en-us\/products\/2026-09-09\"\u003ethis TIPS\u003c\/a\u003e.\u003c\/span\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49280184975611,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08.png?v=1788839374","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-09-08","provider":"STORE DOJO","version":"1.0","type":"link"}