Shopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームの追加入力項目を、ボタンで展開するまで隠しておく設定例です。ご家族情報のような任意項目が最初からすべて並んでいると、フォームが長くなって入力のハードルが上がりがちです。初期表示を必要最小限にして、入力したい方だけが展開できるようにします。
メタシンクには「カスタムCSSのパス」「カスタムJSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回はこの仕組みを使うため、アプリ本体には一切手を加えません。
仕組み：入力項目は id で確実に特定できる
メタシンクが描画するフォームでは、各入力項目のinput / selectに「metafield[名前空間.キー]」という共通ルールのidが振られ、ラベルを含む項目全体が「alcms-field」というクラスのdivでラップされています。この規則性のおかげで、メタフィールドのキーさえ分かれば、JavaScriptからどの項目でも特定して表示・非表示などの操作ができます。
ただし誕生日のような日付型の項目は年・月・日の3つに分割して描画されるため、idの完全一致だけでは見つからないことがあります。その場合はid・name・data-key属性の部分一致でフォールバック検索するようにしています。
設定手順
◆1. 顧客メタフィールドとフォームの準備
・「設定 → カスタムデータ → 顧客」の「定義を追加」で、続柄（単一行テキストで選択肢を指定）と誕生日（日付）のメタフィールドを3人分、計6件作成します
・「名前空間とキー」には、コードがそのまま参照する custom.member_1_relation のようなキー名を入力します（必要な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で紹介しています。
