Shopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームで、プルダウンの選択状態に応じて追加入力項目を表示する設定例です。この例では「ご家族情報」の続柄プルダウンが選ばれている間だけ、その方の誕生日欄を表示します。使わない入力欄（空欄）の羅列を見せずに済むため、フォームの見た目がすっきりし、入力の負担感を減らせます。
メタシンクには「カスタムJSのパス」「カスタムCSSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回はJSで表示切り替えのロジックを組み、CSSで表示される瞬間をふわっとフェードインさせています。アプリ本体には一切手を加えません。
仕組み：changeイベントで依存項目の表示を切り替える
メタシンクが描画するフォームでは、各入力項目のinput / selectに「metafield[名前空間.キー]」という共通ルールのidが振られています。トリガーとなるプルダウンをidで特定してchangeイベントを監視し、値が選ばれている間だけ依存項目（誕生日欄）を表示します。選択が解除されたときは、依存項目を隠すと同時に入力値もクリアして、非表示のまま値が送信されるのを防ぎます。
誕生日欄のような日付型の項目は年・月・日の3つに分割して描画されるため、idの完全一致だけでは見つからないことがあります。その場合はid・name・data-key属性の部分一致でフォールバック検索するようにしています。
設定手順
◆1. 顧客メタフィールドとフォームの準備
・「設定 → カスタムデータ → 顧客」の「定義を追加」で、トリガー用（続柄・単一行テキストで選択肢を指定）と依存項目用（誕生日・日付）のメタフィールドを作成します
・「名前空間とキー」には、コードがそのまま参照する custom.member_1_relation のようなキー名を入力します（この例で必要な6件は下図を参照）
・カスタマーアカウントのアクセスは「読み取りと書き込み」にする必要があります
・メタシンクの管理画面で、作成したメタフィールドを会員登録フォームに追加します
◆2. テーマにJS/CSSファイルを追加
・コードエディタで assets ディレクトリに onboarding.js と onboarding.css を新規作成し、コードを貼り付けます（コードはご購入後に表示されます）
◆3. メタシンク管理画面でパスを指定
・会員登録フォームの設定画面で「カスタムJSのパス」に onboarding.js、「カスタムCSSのパス」に onboarding.css を入力して保存します（assetsからの相対パスで指定します）
カスタマイズのポイント
コード先頭のGROUPSに「トリガーのキー」と「依存項目のキーの配列」のペアを並べるだけで、任意の組み合わせに応用できます。トリガー1つに対して依存項目を複数ぶら下げることもできます。CSSはフェードインの演出だけを担当しているため、onboarding.cssを設置しなくても表示・非表示の機能自体は動作します（見た目がふわっと切り替わらず、パッと切り替わるだけになります）。
注意点
・選択を解除すると依存項目の入力値はクリアされます（意図しない値の送信を防ぐための挙動です）
・ページ表示時に既に値が入っている場合（マイページでの編集など）は表示されたままになり、値も消えません
・JS/CSSが反映されない場合は、メタシンク管理画面でパスをもう一度保存し直すと読み込まれます
追加入力項目をボタンで展開するまで隠しておく方法はこちらのTIPSで、会員登録時に取得した誕生日をShopify Flowで活用する方法はこちらのTIPSで紹介しています。
