結論: 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ヘルプ「④【初期設定】プロフィールページ」
よくある質問
Howdyは14日間無料で試せます
会員登録フォームの設置、取得する項目の追加、表示するタイミングの設定は、Howdyの管理画面から行えます。顧客メタフィールドの作成、フォームの項目設定、プロフィールページのブロック配置は、専任チームが無料で代行します。