新しいお客様アカウントに会員登録フォームを設置する手順(Howdy)

新しいお客様アカウントに会員登録フォームを設置する手順(Howdy)

結論: Howdyの初期設定は、①Shopify管理画面で顧客メタフィールドを作る → ②Howdyで会員登録フォームの項目を選ぶ → ③テーマエディタでアプリブロックを有効にする、の3段階です。Dawn・Rise・Horizon系・Prestigeのテーマではコード編集なしで設置できます。顧客メタフィールドの作成、フォームの項目設定、プロフィールページのブロック配置は、専任チームが無料で代行します。

この記事の要点

  • 保存先になる顧客メタフィールドを先に作る(設定→カスタムデータ→お客様)
  • Howdyの管理画面で「Shopify項目」と「カスタム項目(メタフィールド)」を並べ、必須・任意を決める
  • 表示タイミングは「ログイン前」「ログイン後」の2通りから選ぶ
  • テーマエディタでアプリブロックを有効にし、ログインアイコンからポップアップが開くことを確認する
  • プロフィールページに編集ブロックを置くと、お客様が登録後に自分で情報を更新できる

事前準備: 顧客メタフィールドはどう作りますか?

Shopify管理画面の「設定」→「カスタムデータ」→「お客様」で「定義を追加する」を押し、取得したい項目ごとに名前・ネームスペースとキー・タイプを決めて保存します。Howdyの会員登録フォームは、ここで作った定義を読み込んで入力欄を表示します。

よく使う4パターンの例です。

取得したい情報 名前の例 ネームスペースとキーの例 タイプ
誕生日 生年月日 custom.birthday 日付
自由入力 好きな色 custom.color 単一行のテキスト
チェックボックス 利用規約の同意 custom.terms_accepted 真または偽
選択肢から選ぶ コーヒーの好み custom.favorite 単一行のテキスト+検証で選択肢(深煎り・浅煎り など)を登録

作成した定義の編集画面で、「お客様アカウントAPI」のアクセスを「読み取りと書き込み」にして保存します。この設定が「読み取り専用」のままだと、Howdyの管理画面で「このメタフィールドのCustomer Accountアクセスが有効ではありません」と表示されます。

誕生月や都道府県のように同じ値のお客様が複数いる項目は、定義の「一意の値のみ」のチェックを外した状態にします。

出典: Howdyヘルプ「①【事前準備】顧客メタフィールドの設定方法」「メタフィールドのお客様アカウントAPIの Read and Write を有効化する方法」

手順1: 会員登録フォームの項目はどう設定しますか?

Shopify App StoreからHowdyをインストールし、「会員登録フォーム」の設定ページで「フォームを作成」を押します。項目は「Shopify項目を追加」と「カスタム項目を追加」の2種類から並べます。

  • Shopify項目: 氏名・電話番号・住所など、Shopifyの顧客情報に標準で保存される項目。住所は国・都道府県の選択肢を編集でき、日本国内だけの場合は国の項目を省略できる
  • カスタム項目: 事前準備で作った顧客メタフィールド。誕生日・利用規約の同意・招待コードなど

項目ごとに必須/任意、表示ラベル、プレースホルダー(入力欄に薄く出る案内文)、並び順を設定します。利用規約のラベルにはリンクを含められるので、「<a href="規約ページのURL" target="_blank"><u>利用規約</u></a>への同意」のように書くと、規約ページを開いてから同意できる形になります。

「一般設定」で「住所の自動入力」をありにすると、郵便番号を入れた時点で住所が自動で入ります(日本の住所に対応)。

出典: Howdyヘルプ「③【初期設定】会員登録フォーム」「住所入力を設定する方法」「リンクつき利用規約設定方法」

手順2: 表示タイミングはどちらを選びますか?

「一般設定」で「ログイン前」か「ログイン後」を選びます。従来のお客様アカウントと同じ流れにしたい場合はログイン前、Shopifyの標準のログイン画面をそのまま使いたい場合はログイン後を選びます。

表示タイミング 流れ 向いているストア
ログイン前 ログインアイコンを押す → メールアドレスを入力 → 新規なら登録フォーム、既存なら認証コード入力へ 従来のお客様アカウントの登録の流れを再現したい
ログイン後 Shopifyのログイン画面で認証 → 初回のみ登録フォームを表示 Shopでのログインやソーシャルログインと併用したい

新規か既存かの判定は、標準ではメールアドレスに対応する顧客情報に氏名があるかどうかで行います。稼働中のストアで既存のお客様からも追加情報を集めたい場合は、判定基準を「顧客タグ」に切り替え、「タグ member を含まないお客様にフォームを表示し、送信後に member を付与する」のように設定します。

出典: Howdyヘルプ「新規会員登録フォームの表示タイミング」「新規会員判定を使用して、既存の顧客にもログインフォームを出す方法」

手順3: テーマへの埋め込みはどう行いますか?

Howdyの「テーマ埋め込み」からテーマのカスタマイズ画面を開き、アプリブロックを有効にして保存します。表示タイミングが「ログイン前」の場合は、使っているテーマを選択します。対応テーマはDawn・Rise・Horizon系・Prestigeです。

ほかのテーマの場合は、ヘッダーのログインボタン(PC用とスマートフォン用の両方)の <a> タグにHowdy指定のclassを追加すると、同じようにポップアップが開きます。コード編集の前にテーマを複製しておくと、いつでも元に戻せます。

保存後、ストアの右上のログインアイコンを押してポップアップが開けば設置完了です。

出典: Howdyヘルプ「②【初期設定】テーマにフォームを埋め込む」「非対応のテーマにHowdy新規会員登録アプリを設置する方法」

手順4: プロフィールページで情報を編集できるようにするには?

Howdyの「ブロック」で「ブロックを作成」を押し、表示したいメタフィールドのnamespaceとkeyを入力して保存します。次にShopify管理画面の「設定」→「チェックアウト」→「カスタマイズ」で「プロフィールページ」を開き、「アプリブロックを追加」からHowdyのブロックを置いて、Howdyの管理画面に表示されるApp Block IDを入力して保存します。

ブロックは3つのモードから選べます。

  • 常時編集可能: お客様がいつでも自分で更新できる(住所・好みなど)
  • 閲覧のみ: 表示だけで変更できない(会員ランクなど)
  • 1度のみ編集可能: 初回だけ入力でき、以降は変更できない(招待コードなど)

バナー画像のブロックも置けます。リンク先の設定と、顧客タグによる出し分けができるので、VIP会員と新規会員で別の案内を表示できます。

出典: Howdyヘルプ「④【初期設定】プロフィールページ」

よくある質問

Q. 会員登録フォームの送信後に、特定のページへ移動させられますか?A. できます。登録後のリダイレクト先をコードで指定でき、新規登録とログインで別のページに分けられます。キャンペーンページや特典ページへの案内に使えます。
Q. 購入前に必ず会員登録してもらうことはできますか?A. できます。カートの「ご購入手続きへ」ボタンに、ログイン状態を条件にしたclassを追加すると、未ログインのお客様には購入手続きの前に登録フォームが表示されます。テーマのコード編集が必要なため、編集前にテーマを複製してから作業します。
Q. 複数の会員登録フォームを使い分けられますか?A. できます。フォームを複数作り、リンクごとにフォームIDを指定して、開くフォームを分けられます。一般会員と法人会員で入力項目を変える、といった使い方ができます。
Q. 設定後にお客様が登録できず「Value is already assigned to another metafield」と表示されます。A. 顧客メタフィールドの定義で「一意の値のみ」にチェックが入っています。Shopify管理画面の「設定」→「カスタムデータ」→「お客様」で該当の定義を開き、チェックを外して保存すると解消します。

Howdyは14日間無料で試せます

会員登録フォームの設置、取得する項目の追加、表示するタイミングの設定は、Howdyの管理画面から行えます。顧客メタフィールドの作成、フォームの項目設定、プロフィールページのブロック配置は、専任チームが無料で代行します。

Shopify App StoreでHowdyを14日間無料で試す