せっかくフォームビルダー機能を提供しているのなら、問い合わせフォームやアンケートフォーム、応募フォームなども提供してくれれば良いのに・・
-本文中

(最終更新 2025年02月08日)

Shopify 会員登録とプロフィールセルフ修正アプリなら「Helium Customer Fields」設置方法を解説

会員登録フォーム提供アプリとして、Shopifyユーザーに高い評価を獲得している「Helium Customer Fields」の設置方法について解説します。個人的に思うデメリッも紹介します。

本サイトの別記事「Shopify 会員登録フォーム > 生年月日 > 回答(値)をメタフィールドに追加」で、会員登録 > 生年月日や性別、職業などを登録 > メモに送信 > メタフィードに挿入について解説しました。

ですが、フォームのテンプレートページをカスタマイズしたり、Shopify Flowを使ったりと、少しプロセスが複雑。

しかも、なぜかメモの値がメタフィールドに挿入されない(フローエラー)など、トラブルも起きやすかったので、その代案を紹介したいと思います。

それは、有料アプリである「Helium Customer Fields」。設定方法や顧客情報をメタフィールドに格納する方法、そして個人的に感じた優れた点やデメリットも紹介したいと思います。

設定方法

まず、設定方法から。(詳細やインストールページはこちら)

インストールが完了し、管理画面でアプリをクリックすると、以下のようなアプリ管理画面(外部ページ)に遷移します。

フォーム生成のためには、左メニューの「Forms」をクリック。画面が変わったら「Add form」ボタンをクリックします。

すると、フォームの設定画面が開きますが、

①Name your form:フォームの名前を設定

②Account options:アカウントオプション(アカウント有効化する方法)

・フォームで登録すれば有効(Default)

・有効なメールなのか確認が必要(Require email verification)

・アカウントの活性化のためには承認が必要(Require account approval)

と3つのオプションがある。

③Select your template:フォームのレイアウトテンプレート

を順に設定し、完了したら右上の「Continue」ボタンを押して、フォームセッティングへ。

左には、フォームを構成する様々なフィールドが用意されており、ドラッグアンドドロップで設置が可能です。

使用頻度が多いフィールドをいくつか紹介しますと、

・Single-line text シングルライン(短文)テキスト:氏名、住所、パスワード設定などに使用

・Multi-line text マルチライン(長文)テキスト:ご要望などに使用

・Email field:メール登録フィールド

・Email marketing concent field:チェックボックスタイプで、ユーザーがチェックを入れるとメルマガ受信ができる

・Phone Number field:電話番号フィールド

・Dropdown field ドロップダウン:住まいの国を選択

などがあります。

これらは、顧客情報管理や配送に必要最低限の情報登録が可能で「Helium Customer Fields」の一番安い「Lite」プラン(月額12USD/2024年9月現在)で使用可能ですが、「Pro」プラン(月額26USD/2024年9月現在))にアップグレードすると、その他情報をドロップダウン、ライジボタン、テキスト、チェックボックスなどを使って収集する事ができます。

例えば、

・顧客の生年月日
・顧客の職業
・顧客が好み:色、サイズ、ブランド、趣味
・顧客の第2電話番号(もし、自宅と携帯電話番号を両方収集したい場合)

など、上述したーー顧客情報管理や配送に必要最低限の情報の他に必要な情報が収集でき、これらをメタフィールに格納する事ができます。

こちらの機能については、別の記事 会員登録アプリ「Helium Customer Fields」で生年月日と職業をメタフィールドへ格納 をご一読ください。

ストアの会員登録フォームを設置

では、完成した「会員登録フォーム」をストアに設置します。

ストアの会員登録フォームページは「ストアURL/account/register」です。このページを開いたら、作成したフォームが表示されるようにインストールを行います。

以下は、インストール手順になります。

①フォーム作成ページのメニューの中に「Installation」とクリック

②左側の「FORM ID」をクリックコピー

③現在のテーマが正しいか確認し「Launch theme editor」をクリック→テーマエディタに移動

※テーマエディタ:Shopifyでノーコードでストア構築ができるビジュアルエディタ、ビルダーのような画面。カスタマイズ画面ともいう。

④テーマエディターのメニュー>アプリをクリック→「Helium Customer Fields」が表示され、プルダウン用の下向きの矢印をクリックし、「Registration form ID」という空欄に、先ほどコピーしたフォームIDを入力して保存

⑤「ストアURL/account/register」で、作成したフォームが表示されるか確認

「Helium Customer Fields」のもう1つの武器、修正フォーム

「Helium Customer Fields」のもう1つ優れた機能を紹介しますと、会員自身でプロフィールを修正できるフォームが作成できるという点です。

Shopifyのデフォール修正フォームだと、配送先などの修正は可能ですが、メールアドレスの修正は出来なかったりするので、ちょっとモヤモヤした経験ありませんか。

「Helium Customer Fields」を使うと、メールアドレスの変更や、その他情報の修正を会員自らできるのでは、運営上の手間が省ける効果が期待できます。

プロフィール修正フォームの作成は、会員登録フォームの作成・設置方法とさほど変わりはありません。

設置は、テーマエディタでフォームIDを入力するだけです。

設置が完了したら、顧客のアカウントページ(ストアURL/account)に、会員情報修正ページへのリンクが表示されます。

同リンクのアンカーテキストを修正したい場合は、以下の絵のように、

テーマエディタでテキストを入力します。

ここで1つ注意点。

もし、まだ会員登録前の顧客が、誤ってこの修正フォームに顧客情報を入力すると新規登録として扱われるので、ご注意ください。

この修正フォームは、ログインしないと表示されないなどの工夫が必要です。

メルマガ登録を促すボックスを作る

「Helium Customer Fields」を使って、ストア会員の中でメルマガ登録をしていない会員に登録を促すボックス(フォーム)を作る事もできます。

以下の記事に活用シーン、手順などを詳しく紹介しているので、興味がありましたら、ご一読ください。

Helium Customer Fieldsを使ってストア会員にメルマガ登録を促すボックスを作る

「Helium Customer Fields」デメリット

このように、

・簡単に会員登録フォームが作成・設置できる

・会員自らプロフィール修正ができる

というメリットを持つ「Helium Customer Fields」ですが、(個人的な感想ですが) 以下のようなデメリットもあります。

1点目は、やはり値段。本格的に会員情報を集めて、それを活用するマーケティングを行うためには、メタフィールドの連携ができる「PROプラン」は必要かと思います。

上述しましたが、この「PROプラン」は月額26USDと、2024年9月現在の為替レートだと4000円程度。小希望でストアを運営する個人、企業にとってはちょっと負担になる金額ですね。

もう1点は、会員登録とプロフィール修正のフォームだけを提供している点。

せっかくフォームビルダー機能を提供しているのなら、問い合わせフォームやアンケートフォーム、イベント応募フォームなども提供してくれれば良いのに・・と思う時があります。(それでも優れたアプリである事は間違いないですが・・)

以上、会員登録フォーム提供アプリとして、Shopifyユーザーに高い評価を獲得している「Helium Customer Fields」の設置方法でした。

マイページのカスタマイズにも有効

このように、会員情報の新規作成や修正に特化したアプリなので、マイページのカスタマイズにも役立ちます!

マイページカスタマイズについては、以下の記事でそのヒントをまとめたので、ぜひご一読ください。

Shopify マイページ「カスタマイズ」のヒントになる事例4選!有用なアプリも紹介

Shopify小技のフリーマーケット

Shopifyを運営する中で、「こんなことできないのか?」という疑問は尽きません。特に初心者にとっては、難しく感じるけれども、実はすぐに活用できる小技がたくさんあります。
当サイトでは、実際に試してみて有効だったShopifyの小技を、誰でも簡単に再利用できるよう提供しています。

少し高度なLiquidのテクニックやアプリを使わずに実装できる機能、そしてカスタマイズのヒントになるアイデアなど、さまざまな情報をご用意しています。

現在、出品者は私1人ですが、 これからさらに充実させていく予定です!もしもShopifyでの設定やカスタマイズで悩んでいる方がいれば、お気軽にお問い合わせください。

もっと知りたい

このブログと運営者について

BLOG More

設定

1日前

【備忘録】Shopify通知・メルマガ 外部ドメインのメールアドレス認証 (CNAME、DMARC)

自分の備忘録として認証方法の具体的な手順を紹介したいと思います。..

STORY

6日前

収入だけじゃないよ!40代男性「IT関連」副業のメリット5選と個人的な感想

40代男性にとってこのスキルアップは、単なる知識の習得以上の意味を持つことが多いのではないでしょうか。..

Liquid

6日前

【Shopify Liquid】店舗受取を希望する購入者への「注文通知メール」をカスタマイズ

「注文通知メール」にコピペすればOKなのでは?と思われがちですが、なぜか店舗情報が上手く表示されません。..

設定

1週間前

Shopify「店舗受取」運用に必要な基本的なフローと操作まとめ

アパレルや雑貨など「実物を見てから購入したい」お客様に対しても、あらかじめ在庫を確保しておくことで、店舗でのスムーズな購買体験を提供できます。..

設定

2週間前

【Shopify小技】飲食店でのテイクアウトに応用可能!「店舗受取専用」商品を作成する方法

「どこで店舗受取専用の商品を作成すればいいの?」と迷ってしまう人も多いのではないでしょうか?..

Liquid

3週間前

【Shopify Liquid】恥ずかしいけど「CONTAINS」2つの使い方に今日気づいた‥

何の疑問も持っていなかった私、ちょっぴり衝撃でした。..

Liquid

3週間前

【Shopify Liquid】毎月「7」のつく日だけ!限定セールを自動表示する方法

Liquidにおける日にちの自動計算の仕組みはもちろん、for文やif文、フラグの概念も理解しやすくなるはずです。..

アプリ

4週間前

【Shopifyアプリ】注文に「任意の連番」をつける事もできる!「SeriaLogic」の使い方を解説

チケット購入順に入場番号を自動で割り振る事はできないの?..

Liquid

1か月前

【Shopify Liquid】土日など休日はスキップ!自動で最短の発送日を算出して案内する方法

Liquidを使って土日や祝日をスキップし、自動で最短の発送日を算出する方法を紹介します。..

Liquid

1か月前

【Shopify小技】15時までの購入で当日発送と案内&注文メール通知に実装

たとえば、「15時までの注文は当日発送」といった案内を、自動で表示できたら便利だと思いませんか?..

Js

1か月前

【Shopify小技】セール終了の日付と時間までのカウントダウンをJavascriptで実装

こうした視覚的な要素は、購入の後押しとなり、より多くの顧客を引き込む効果が期待できます。..

Liquid

2か月前

【Liquid日付計算】注文通知メールをカスタマイズ!支払期限を翌週月曜日の日付にする

特に「銀行振込」や「コンビニ決済」のような後払いの決済方法では、支払い期限を明示することが重要です。..

制作アイディア

2か月前

Shopifyでファンクラブを制作する人が押さえておくべき「リアルな要件定義」7項目

最初、ファンクラブサイトを作るには手軽なWordPressを考えました。しかし、会員情報を扱うことになるため、セキュリティの不安‥..

Js

2か月前

【JavaScript】Shopify ブログ関係なく特定タグを持つ全記事の一覧を作る(+時系列で並び替え)

残念ながら、Liquidでブログ記事を並び替えできる方法はない(2025年2月現在)ようです。..

Flow

2か月前

【Shopify Flow】注文をGoogleスプレッドシートに追加!つまずきやすい4つのポイントを解説

ただし1点注意点が必要です。注文のラインアイテムを一番最後に表示されるようにするという点です。..

Flow

2か月前

【Shopify Flow】「スケジュール」ワークフロー終了後に「実行対象リスト」を内部メールで送信

実はこのフロー、正確にいうと「実行後」ではなく、ほぼ同時進行になります。..

Flow

2か月前

Shopify Flowとはなに?使い方のヒントになる実践サンプル6選

日本語対応にはまだ課題があり、独自の組み合わせによって初心者には少々ハードルが高い領域と言えます。..

Liquid

2か月前

Shopify「ブログ」カスタマイズ&オリジナル記事一覧作成のヒント8選

商品ページだけでは伝えきれない情報を発信する事によってきっとECサイトの成長に役立つと考えられます。..

Liquid

2か月前

【Shopify カスタマイズ】メニュー カスタマイズ&作成するために知っておくべき事5選

オリジナルメニューを作成することで、サイトの使いやすさや視覚的魅力を向上させることができます。..

アプリ

3か月前

【Shopifyアプリ】会員のQRコードを簡単生成!イベントで入場チェックをする

QRコード入場が流行っているけど、うちでも導入できないか?..

アプリ

3か月前

Helium Customer Fieldsを使って顧客に任意のタグを付けるフォームを作成

会員からの退会希望の通知を受けたスタッフは、有効期限と会員番号のメタフィールドの値を削除し、「有料会員」タグを削除するなど、マニュアル作業が発生してしまいます。..

Liquid

3か月前

【Shopify小技】アプリなしでストア会員にメルマガ登録を促すボックスを作る

アプリなしでのカスタマイズは、AjaxリクエストやCustomerのAccount APIの用いる必要があるため難しい..

Flow

3か月前

【Shopify Flow】特別な日にロイヤリティの高い顧客にクーポン番号メールを送る

このパレートの法則に基づき、客単価の高いリピーターを増やす戦略が練られております。..

Flow

3か月前

【Shopify Flow】ちょっと気になる「Get product data」「Get customer data」データの絞り込みについて

上限100名にしかデータ取得ができないため、その中でさらに「苦情履歴あり」タグを持つユーザーを絞り込むと、9900人は対象から外れる・・..

Liquid

3か月前

【Shopify小技】アプリなしで商品公開後「販売開始日時」を指定(予約)する方法

可能であれば、商品ページが公開された状態で特定の日時に購入ができるようにしたい‥..

Js

3か月前

【Shopify小技】特定の商品オプションを選択すると注意書きがモーダル表示される

そうすると、知らなかった、読んでいないと苦情を言う人が続出する気が‥..

Liquid

4か月前

【Shopify小技】BtoBビジネスに有効かも?カートに入れた数をリアルタイムで制限

ブラウザの再読み込みをしないと「cart.item_count」にその数値が反映されません。..

Liquid

4か月前

【Shopify Liquid】空の変数で作る「重複しない」コレクションの商品タグリスト

ループ(for文)を使ってリスト化すると「小学生用」「セール中」が2回出現する事になります。..

Liquid

4か月前

【Shopify Liquid】在庫のある商品リスト(配列)を作る「空の変数」について

変数に格納する値が「空」の変数を指します。..

Flow

4か月前

【Shopify Flow】インターナルメールで支払い未確定注文をスタッフに知らせる

ワークフロー設計の抽象的なため、慣れるまでに時間がかかると言われています。..