Shopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームの追加入力項目を、ボタンで展開するまで隠しておく設定例です。ご家族情報のような任意項目が最初からすべて並んでいると、フォームが長くなって入力のハードルが上がりがちです。初期表示を必要最小限にして、入力したい方だけが展開できるようにします。
メタシンクには「カスタムCSSのパス」「カスタムJSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回はこの仕組みを使うため、アプリ本体には一切手を加えません。
仕組み：入力項目は id で確実に特定できる
メタシンクが描画するフォームでは、各入力項目のinput / selectに「metafield[名前空間.キー]」という共通ルールのidが振られ、ラベルを含む項目全体が「alcms-field」というクラスのdivでラップされています。この規則性のおかげで、メタフィールドのキーさえ分かれば、JavaScriptからどの項目でも確実に特定して表示・非表示などの操作ができます。
設定手順
◆1. 顧客メタフィールドとフォームの準備
・「設定 → カスタムデータ → 顧客」でメタフィールドを作成します（この例では「ご家族情報」の続柄と誕生日を3人分、計6件）
・カスタマーアカウントのアクセスは「読み取りと書き込み」にする必要があります
・メタシンクの管理画面で、作成したメタフィールドを会員登録フォームに追加します
◆2. テーマにJS/CSSファイルを追加
・コードエディタで assets ディレクトリに onboarding.js と onboarding.css を新規作成し、コードを貼り付けます（コードはご購入後に表示されます）
◆3. メタシンク管理画面でパスを指定
・会員登録フォームの設定画面で「カスタムJSのパス」に onboarding.js、「カスタムCSSのパス」に onboarding.css を入力して保存します（assetsからの相対パスで指定します）
カスタマイズのポイント
コード先頭の設定部だけを書き換えれば、他のフォームにもそのまま流用できます。
・HIDDEN_KEYS：隠したい項目のメタフィールドキーの一覧
・TOGGLE_LABEL：展開ボタンの文言
注意点
・JS/CSSが反映されない場合は、メタシンク管理画面でパスをもう一度保存し直すと読み込まれます
・メタフィールドのキーを変更した場合はJSが何もしなくなりますが、フォーム自体は通常どおり動作します（安全側の挙動です）
プルダウンの選択状態に応じて追加入力項目を表示する方法は、こちらのTIPSで紹介しています。
