サムネイル

業種別に見るShopifyお客様アカウントへのカスタムフィールド追加|生年月日も集められる

目次

自分のストアはどのタイプ? 集めるべき項目の早見表

カスタムフィールドは「とりあえず誕生日を聞く」よりも、店舗タイプから逆算して設計するほうが入力率も活用度も上がります。まずは自店がどこに近いかを見つけてください。後半で各タイプの設定例を画面つきで解説します。

ストアタイプ集めると効く項目主な活用シーン
BtoC アパレル誕生日・性別・興味のジャンルお誕生月クーポン、興味別の新作配信
食品・サブスク誕生日・アレルギー・配送希望時間帯アレルギー除外レコメンド、発送調整
コスメ・健康肌タイプ・興味カテゴリ・流入きっかけ肌タイプ別おすすめ、チャネル別再訪施策
小規模・少人数運用誕生日のみ手間をかけずに誕生日施策だけ回す

筆者の実務感覚としては、最初から欄を増やしすぎる店舗ほど入力途中で離脱されます。「このタイプならまずこの 3 つ」という当たりをつけてから始めるのが、遠回りに見えて一番速い進め方です。

そもそも Shopify 標準でプロフィール項目追加はできる?

業種別の話に入る前に、土台となる仕様だけ押さえておきます。結論として、新しいお客様アカウントのプロフィールページに、Shopify の標準機能だけでカスタムフィールドを足すことはできません。

ここで実装上の大きな分かれ道になるのが、新しいお客様アカウント(New Customer Accounts)と従来アカウント(Classic)の違いです。新しいお客様アカウントはワンタイムパスワード方式で動いており、従来のテーマ Liquid を改造して登録フォームに項目を増やす、という昔ながらの手法が一切使えません。項目追加は、チェックアウトエディタの「Profile」ターゲットに UI Extension(App Block)を差し込む方式に限られます。Classic 前提で書かれた古い解説記事をそのまま真似すると動かない、というのがここでの落とし穴です。

データの保存先は顧客メタフィールドです。お客様自身がプロフィールページから編集した値を Shopify 上に永続化する書き込みは、Customer Account API の 2024-07 バージョンから対応しました。metafieldsSet ミューテーションで書き込めるのは Customer・Order・Company・CompanyLocation の 4 オブジェクトに限られます。生年月日は date 型メタフィールドで扱うのが定石で、ニックネームのような自由入力は single_line_text_field を使います。

つまり実現手段は次の 2 つに集約されます。

  • テーマのコード編集 + 顧客メタフィールドで自前実装する: Customer Account UI Extension を React で書き、フォームの値をメタフィールドに保存する。自由度は高いが開発環境とデプロイが必要で難度が高い。
  • 専用アプリを導入する: ノーコードで項目定義から入力うながし、顧客絞り込みまで完結する。新しいお客様アカウント向けに作られたものを選ぶ。

「方法を比較したい」という方のために、後半でコードサンプルと自前実装の注意点も用意しました。ただ多くのストアにとっては、業種ごとの施策をすぐ回せる後者のアプリ導入が現実的です。

ユースケース別:このストアならこう集める

ここからが本題です。店舗タイプごとに、何を集め、どう売上につなげるかを具体的に見ていきます。紹介するアプリは日本製の「シンプル新しいお客様アカウント拡張|生年月日・追加フォーム」で、プリセットと手動追加の両方に対応しているため、どのタイプにも当てはめられます。

アプリのメインバナー

  • アプリ名: シンプル新しいお客様アカウント拡張|生年月日・追加フォーム
  • 料金: Basic Plan 月額 $4.99、7 日間の無料体験、年払いで実質 2 ヶ月分無料
  • 対応言語: 日本語管理画面あり
  • 対応: 新しいお客様アカウント(New Customer Accounts)

BtoC アパレル:誕生日と興味で「来月の配信ネタ」を仕込む

アパレルは季節ごとに新作が出るため、興味のジャンルを起点にした出し分けが効きます。そこに誕生日を組み合わせると、年間を通じた定常施策が一気に増えます。

  • 誕生日(プリセット)
  • 性別(プリセット)
  • 興味のあるジャンル(プリセット:multi_select)
  • お誕生日クーポンの受け取り(プリセット:checkbox)

施策としては、お誕生月セグメント宛のクーポン配信と、興味別の新作 EDM が定番です。Shopify は生年月日を標準で持たないので、誕生日施策を打つには事前にメタフィールドへ貯めておくことが前提になります。集めた誕生日があってはじめて、Shopify Flow の「Birthday」マーケティングオートメーションテンプレート(Marketing > Automations)を有効化して、誕生日セグメントや自動付与を回せるようになります。

このアプリはよく使う項目をプリセットで持っているので、アパレルで必要な誕生日・性別・興味はチェックを入れるだけで最適な型のまま並びます。

よく使う項目はプリセットから追加できる

筆者の感覚では、アパレルは「興味のあるジャンル」を複数選択で取れるかどうかが後の配信精度を左右します。単一選択にすると「カジュアルもきれいめも好き」というお客様の実態を取りこぼすので、ここは multi_select を選んでおくのがおすすめです。

食品・サブスク:アレルギーと配送時間で「事故」を防ぐ

食品やサブスクは、データが配送の安全と満足度に直結します。誕生日のような攻めの施策よりも、まずは守りの項目から固めると失敗しません。

  • 誕生日(プリセット)
  • アレルギー(手動:複数選択)
  • 配送ご希望時間帯(手動:選択肢)

施策は、アレルギー品目を除外したレコメンドと、希望時間帯に合わせた発送調整です。アレルギーや時間帯はプリセットにない店舗固有の項目なので、手動追加でラベル・キー・入力タイプ・選択肢を自分で設定します。

フィールドを追加から追加する場合のモーダルの画像

入力タイプは「テキスト / 数値 / 日付 / 選択肢 / 複数選択 / チェックボックス」から選べます。アレルギーは複数選択、時間帯は選択肢にすると、後段の絞り込みがきれいに効きます。「Shopify 生年月日 顧客」のように誕生日を扱う用途では「日付」型を選び、プリセットの誕生日を使うのが手早い方法です。

コスメ・健康:肌タイプと流入きっかけでパーソナライズ

コスメ・健康系は、お客様の状態に合わせた提案がそのまま売上を作ります。加えて「どこで知ったか」を取ると、広告チャネルの良し悪しまで顧客データ側から見えてきます。

  • 肌タイプ(手動:選択肢)
  • 興味のあるカテゴリ(プリセット:multi_select)
  • アプリ・ストアを知ったきっかけ(プリセット:multi_select)

施策は、肌タイプ別のおすすめ商品提示と、流入チャネルごとの再訪施策です。プリセットからの追加はモーダルでチェックするだけなので、必要な型を最初から間違えにくいのが利点です。

プリセットから追加する場合のモーダルの画像

小規模・少人数運用:誕生日だけに絞って素早く回す

スタッフが少ない店舗で全項目を設計するのは現実的ではありません。この場合は誕生日プリセット 1 本に絞り、お誕生月クーポンだけを確実に回すのが堅実です。項目が少ないほど入力完了率は上がるので、結果として施策に使えるデータが早く貯まります。

プリセットから追加ボタン

どのタイプでも共通して言えるのは、最初は 3〜5 項目に絞ること、そして「何のために集めるのか」をヘルプテキストで示すことです。誕生日や趣味嗜好は個人情報に該当しうるため、プライバシーポリシーへの記載も併せて行ってください。

追加した項目はお客様自身が入力・編集できる

カスタムフィールドは、追加して終わりではなくお客様が自分のプロフィールページから入力・更新できることに価値があります。このアプリでは、新しいお客様アカウントの画面上で追加項目がそのまま編集可能になります。

顧客ページから入力できる

管理画面側では、プロフィール項目の追加・編集・並び替え・削除をクリック操作だけで完結できます。

管理画面でプロフィール項目を管理できる

そして集めたデータは、入力された顧客メタフィールドの値で顧客を絞り込み、Shopify のセグメントとして保存できます。ここまで一気通貫でできるのが、自前実装との大きな差です。

項目の値で顧客を絞り込み、セグメントとして保存できる

導入の手順:インストールからプロフィールページ表示まで

ここからは実際の設定です。まずアプリをインストールします。

  1. Shopify 管理画面の左下にある「設定」をクリックします。

    設定をクリック

  2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

    Shopify App Storeへ移動

  3. 検索窓に「シンプル新しいお客様アカウント拡張」と入力し、表示されたアプリをクリックします。

    App Store の検索結果画面

  4. アプリ詳細画面で「インストール」をクリックします。

    アプリ詳細画面のインストールボタン

  5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

    権限確認画面

  6. インストール完了後、アプリの管理画面が開きます。

    アプリの管理画面

インストールしただけでは、まだプロフィールページに項目は出ません。お客様アカウント拡張をチェックアウト設定から有効化します。

  1. アプリ管理画面で「チェックアウト設定を開く」をクリックします。

    「チェックアウト設定を開く」をクリックする

  2. 「UR: Customer Profile Fields」の「+ボタン」をクリックします。

    アプリの+ボタンをクリックする

  3. 表示場所を調整し、「保存する」をクリックします。

    場所変更後に保存するボタンをクリックする

ストアフロントに入力うながしバナーを出す場合は、テーマにもアプリブロックを追加します。

テーマ選択 + テーマに追加ボタンをクリック

テーマエディタで保存する画面

運用で迷いがちな設定を画面で押さえる

業種に合わせて項目を決めたら、あとは並び順や公開状態を整えるだけです。日々の運用で触る箇所を順に見ていきます。

並び替え:入力してほしい順に並べる

各行の ↑ / ↓ ボタンで並び替え、「並び順を保存」で確定します。入力率を上げたい項目(誕生日など)を上に置くのが基本です。

並び替え操作ボタン

並び順を保存ボタン

表示・非表示:季節項目やテスト運用に

各フィールドのトグルで、お客様アカウントへの表示・非表示を即座に切り替えられます。季節限定の項目を一時的に隠したり、AB テスト的に出し分けたりするときに重宝します。

表示 / 非表示トグル

編集・削除:消してもデータは残る

行の「編集」「削除」ボタンから個別に操作できます。フィールド定義を削除しても、お客様側に保存済みのメタフィールドデータは Shopify に残るため、誤操作でデータが消える心配はありません。

編集ボタン・削除ボタン

フィールド編集時のモーダル

顧客絞り込み:集めた値をセグメントに変える

管理画面下部の「顧客を検索」カードで、フィールド + 演算子 + 値の組み合わせから顧客一覧を絞り込めます。

  • 値あり / 値なし
  • 等しい
  • 以上 / 以下 / 範囲
  • 含む(複数選択用)
  • 誕生月(誕生日プリセット専用:年を無視して 1〜12 月で絞り込み)

「条件を追加」で複数行を増やせば AND 検索もできます。「顧客を検索」を押すと Shopify の顧客一覧ページが絞り込み済みで開き、そのままセグメントとして保存できます。アパレルなら「今月が誕生月 × 興味=アウター」、食品なら「アレルギー=なし × 配送=午前」といった、業種別に組んだ条件をそのまま運用に落とせます。

入力うながしバナー:未入力のお客様にだけ届ける

テーマエディタからノーコードで以下を調整できます。

  • 見出し / 本文 / ボタンラベル
  • バナーの横幅 / 背景色 / 文字色 / ボタン色
  • 次回表示までの期間(0〜30 日)
  • 表示までの待機秒数(0〜60 秒)

バナーは「ログイン中」かつ「未入力項目あり」のお客様にのみ自動表示されるので、入力済みのお客様の体験を邪魔しません。

ストアフロントに入力を促すバナーを表示できる

バナー文言は、入力するメリットが伝わる表現にすると効果が変わります。たとえば見出しに「あなたにぴったりのご案内をお届けします」、本文に「誕生日や興味のあるジャンルを登録すると、お得な情報をお届けします。」、ボタンに「プロフィールを登録する」といった具合です。

集めたデータを売上につなげる関連施策

カスタムフィールドは「集めて終わり」では意味がありません。「集めて → セグメント化 → 配信 → リピート」のループに乗せてはじめて効きます。

  • Shopify Email: お誕生月セグメントや興味別セグメントへのターゲティング配信。
  • Shopify Flow: 「Birthday」テンプレートを有効化すると誕生日用のセグメントや顧客メタフィールドが自動生成され、今月誕生日の顧客に自動でタグを付与して別シナリオへ流せます。
  • Loyalty / リワードアプリ: 誕生月にボーナスポイントを付与。
  • おすすめ商品アプリ: 興味の multi_select 値をもとにレコメンドを出し分け。
  • 入力うながしバナー(このアプリ標準): 未入力顧客にだけ、控えめなタイミングで入力を促進。

Shopify の Flow テンプレートは Marketing > Automations から有効化でき、誕生日まわりの土台を自動で用意してくれます。集めた生年月日があってこそ機能する仕組みなので、データ取得とセットで考えるのがおすすめです。

自前で実装したい場合のサンプルコード

「方法を比較したうえでコードで作りたい」という方向けに、参考としてサンプルを載せておきます。新しいお客様アカウントの入力 UI 自体は Customer Account UI Extension(React)が必要ですが、まずはテーマ側(Liquid)で保存済みの値を表示するところからイメージを掴めます。

実装の流れ

  1. Shopify 管理画面の「カスタムデータ」→「お客様」で顧客メタフィールドを定義します(例: sa_194_ur_customer_fields.birthday / type: date)。
  2. Customer Account UI Extension(React)でプロフィールページにフォームを追加します。
  3. フォーム送信時に Customer Account API(GraphQL)の metafieldsSet で顧客メタフィールドを保存します。
  4. テーマ側 Liquid で customer.metafields.sa_194_ur_customer_fields.birthday を参照して表示します。

Liquid を追加

{%- comment -%}
  顧客メタフィールドからプロフィール情報を表示するスニペット
{%- endcomment -%}

{%- if customer -%}
  {%- assign cf_namespace = 'sa_194_ur_customer_fields' -%}
  {%- assign birthday = customer.metafields[cf_namespace].birthday -%}
  {%- assign interests = customer.metafields[cf_namespace].interests.value -%}

  <section class="ur-cf-profile">
    <h2>マイプロフィール</h2>
    {%- if birthday -%}
      <p>誕生日: {{ birthday | date: '%Y年%-m月%-d日' }}</p>
    {%- else -%}
      <p>誕生日が未登録です。<a href="/account/profile">プロフィールを編集</a></p>
    {%- endif -%}

    {%- if interests and interests.size > 0 -%}
      <p>興味:
        {%- for item in interests -%}
          <span class="ur-cf-tag">{{ item }}</span>
        {%- endfor -%}
      </p>
    {%- endif -%}
  </section>
{%- endif -%}

CSS を追加

表示部分の見た目を整えるスタイルです。

.ur-cf-profile {
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin: 24px 0;
}

.ur-cf-tag {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 6px;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 12px;
}

JavaScript を追加

「未入力ならバナーを出す」をテーマ側で簡易にハンドリングする例です。

(function() {
  const isLoggedIn = !!document.querySelector('[data-customer-logged-in="true"]');
  const hasBirthday = !!document.querySelector('[data-cf-birthday]:not([data-cf-birthday=""])');

  if (!isLoggedIn || hasBirthday) return;

  const banner = document.createElement('div');
  banner.className = 'ur-cf-banner';
  banner.innerHTML = `
    <p>誕生日を登録すると、お誕生月にクーポンをお届けします。</p>
    <a href="/account/profile">プロフィールを登録する</a>
  `;
  document.body.appendChild(banner);
})();

自前実装でつまずきやすいポイント

ここが、アプリ導入と自前実装を比較する際の判断材料になります。

  • 新しいお客様アカウントの入力 UI は React の Customer Account UI Extension が必要で、Liquid だけでは項目を追加できません。
  • メタフィールドの書き込みには customer_read_customers と customer_write_customers の 2 スコープに加え、保護対象顧客データ(Protected Customer Data)アクセスのアプリ承認が必須です。shopify.app.toml で access.customer_account = "read_write" の設定も要ります。承認を取らないと書き込みが動かないため、最初に詰まりやすい箇所です。
  • 顧客メタフィールド定義の customerAccountAccess を READ_WRITE にしないと、お客様自身が値を書き込めません。
  • 顧客メタフィールドの adminFilterable capability は CUSTOMER リソースに付与できないため、絞り込み検索の挙動には注意が必要です。
  • アプリ側ではこれらの落とし穴がすべて吸収されているため、ノーコードで完結します。

運用のコツ

  • 最初は項目を 3〜5 個に絞り、入力完了率を観察する。
  • ヘルプテキストで「何のために集めるのか」を必ず明示する。
  • 入力うながしバナーは控えめな再表示間隔(7 日程度)で運用する。
  • 「誕生月クーポン」など、入力するメリットを明確に提示する。
  • 入力された値はメタフィールドに残り続けるため、項目の削除は慎重に行う(再追加は可能)。

よくある質問

Q. 旧お客様アカウントでも使えますか?
A. 本アプリは新しいお客様アカウント(New Customer Accounts)向けの設計です。旧お客様アカウントを使い続けている場合は、別アプリを検討してください。

Q. お客様が入力した値はどこに保存されますか?
A. すべて Shopify の顧客メタフィールドに保存されます。namespace は sa_194_ur_customer_fields です。

Q. アプリをアンインストールしたらデータは消えますか?
A. お客様メタフィールドの値は Shopify 側に残ります。フィールド定義(schema)の Shop Metafield は削除される可能性があります。

Q. 入力うながしバナーは未ログインのお客様にも表示されますか?
A. 表示されません。「ログイン中」かつ「未入力項目あり」のお客様のみに表示されます。

Q. 「誕生月」での顧客抽出はできますか?
A. はい。誕生日プリセットには専用の「誕生月」演算子があり、1〜12 月の指定で顧客を絞り込めます。

Q. 多言語対応はできますか?
A. アプリの管理画面は多言語対応しています。フィールドのラベルは単一文字列で保持する仕様です。

まとめ

  • Shopify は生年月日を標準で持たないため、お客様アカウントのカスタムフィールドを足してデータを貯める仕組みが施策の前提になります。

  • 集めるべき項目は店舗タイプで変わります。アパレルは誕生日・性別・興味、食品はアレルギー・配送時間、コスメは肌タイプ・流入きっかけ、小規模運用は誕生日だけ、と業種から逆算するのが近道です。

  • 新しいお客様アカウントは従来の Liquid 改造が効かず、自前実装は React の UI Extension と保護対象顧客データの承認が必要です。

  • シンプル新しいお客様アカウント拡張|生年月日・追加フォームなら、項目定義・並び替え・入力うながしバナー・顧客絞り込み(セグメント保存)まで月額 $4.99 で一気通貫に揃います。

  • まずは 7 日間の無料体験で、自店舗のタイプに合う運用かを確かめてみてください。

  • インストールはこちら: シンプル新しいお客様アカウント拡張|生年月日・追加フォーム

  • ご利用ガイドはこちら: https://unreact.jp/shopify-apps/sa-194-ur-customer-fields/guide

参考記事

おすすめ Shopify アプリ

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正のアイコン

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正

注文後のお届け先住所や配送希望日を、お客様自身で修正できます。問い合わせ対応の手間を減らします。

シンプル型番・JANコード表示|お手軽SKU・商品コード表示のアイコン

シンプル型番・JANコード表示|お手軽SKU・商品コード表示

商品ページに、選択中のバリエーションの SKU(型番)と JAN コードを表示します。テーマの編集は不要です。

シンプルPDFカタログ|お手軽PDFフリップブック表示のアイコン

シンプルPDFカタログ|お手軽PDFフリップブック表示

商品ページにPDFカタログを、ページをめくる本のように表示。お客様はページを離れずに読めます。

シンプル動画スライドショー|お手軽動画カルーセル表示のアイコン

シンプル動画スライドショー|お手軽動画カルーセル表示

どのページにも全幅の動画カルーセルを表示。動画ごとに見出しとボタンを重ねられます。

シンプルマイページクーポン|お客様アカウント割引コード表示のアイコン

シンプルマイページクーポン|お客様アカウント割引コード表示

顧客アカウントページにクーポンを表示。クーポンを作って ID を貼るだけで表示されます。

シンプル追従カウントダウンタイマー|お手軽あと何日表示のアイコン

シンプル追従カウントダウンタイマー|お手軽あと何日表示

ストアのどこにでも追従型のカウントダウンタイマーを表示して、購入の緊急性を演出できます。

シンプル売り切れバリエーション非表示|自動在庫切れ非表示のアイコン

シンプル売り切れバリエーション非表示|自動在庫切れ非表示

バリエーションピッカーから売り切れのサイズ・カラーを消します。お客様には購入できる選択肢だけが表示されます。

シンプル在庫切れ並び替え|売り切れ商品を末尾へ自動ソートのアイコン

シンプル在庫切れ並び替え|売り切れ商品を末尾へ自動ソート

売り切れ商品をコレクションの末尾へ自動で移動。再入荷すると元の位置に戻ります。

関連記事