今回はアカウントページを作成します。 Shopifyでは、会員登録機能をデフォルトで実装できます。サイト内にアカウントページを作成し、会員登録ができるようにしていきましょう。 ◼︎このページでの目標 アカウント登録機能について理解する アカウント登録機能をストアに追加できるようになる 会員登録画面の調整をする 会員登録画面について、デフォルトの機能では住所の記入欄が海外仕様になっているため、少し編集が必要です。 今回は、コピー＆ペーストするだけで編集が完了するようにコードもご用意しています。難しい場合は有償でサポートも可能ですので、お気軽にご連絡くださいませ。 アカウント登録機能について Shopifyでのアカウント機能についてご紹介します。 アカウント登録をしたお客様は、ログインして「注文・プロフィール情報・保存済み住所」を確認できます。 このアカウント登録機能を実装するメリット・デメリットをお伝えします。 メリット まず、アカウント登録機能を実装するメリットは、以下の2点が挙げられます。 2回目以降の購入が楽になる メルマガを配信できる 2回目以降の購入が楽になる まず一つ目のメリットが、お客様にとって2回目以降の購入が楽になるという点です。 お客様がストアにログインすると、アカウントに保存されている詳細がチェックアウト時に自動入力されます。 そのため、お客様は購入のたびに住所などを入力する必要がありません。 情報が自動入力されるとチェックアウト操作を迅速化できるので、お客様にとってメリットがあると言えます。 メルマガを配信できる もう一つのメリットが、ストア側がメルマガを配信できるという点です。 アカウント登録で入力された情報をもとに、会員限定のセールやお誕生日クーポンの発行などのメルマガを配信できます。 限られたお客様に特別感のあるキャンペーンを実施することで、ストアのファンを増やす効果も期待できます。 デメリット 次に、アカウント登録機能を実装する際のデメリットとしては、「登録に手間がかかってしまう」ことです。 アカウント登録機能を実装する際、購入時にログインを必須にするか任意にするか設定できます。 ログインを必須にした場合、新規のお客様は購入前に、必ず登録のために情報を入力することになり、そのせいで購入をやめてしまうお客様が出てくる可能性があります。 購入前の離脱はストアの売り上げにも影響してしまうため、登録の仕組みを考えたり、入力する情報を簡素化したりするなどの工夫が必要です。 アカウントページの作成 アカウント登録機能について理解したところで、実際にアカウントページを作成する方法について解説します。 アカウント登録機能の実装 まず、アカウント登録機能を有効にします。Shopifyのアカウント登録機能は、デフォルトでは無効になっています。 ストアの管理画面から「設定」＞「お客様アカウント」をクリックします。 いちばん上にある「オンラインストアとチェックアウトのアカウント」の「編集」ボタンをクリックします。 「編集」ボタンをクリックすると、「オンラインストアのヘッダーとチェックアウト時にログインリンクを表示する」という項目が表示されます。 この項目にチェックを入れると、ストアでの会員登録機能が有効になります。 アカウント登録を必須にする場合 アカウント登録機能を先ほどの方法で有効にした場合は、商品を購入する際に、ログインは任意となっています。 つまり、アカウント登録をしていないお客様もゲストとして購入できる状態です。 このままでもいいのですが、ストアによっては、アカウント登録をしたお客様だけに販売したい場合もあるかもしれません。 その場合は、購入時にログインを必須にする設定が可能です。この設定方法についてお伝えします。 管理画面の「設定」＞「チェックアウト」をクリックします。 「お客様への連絡方法」の欄に「チェックアウト前にお客様にアカウントへのログインを要求する」と書かれたチェックボックスにチェックを入れましょう。 これで、お客様が商品を購入する際に、必ずアカウント登録が必要になる設定ができました。 設定の変更ができたら、保存を忘れないようにしましょう。 アカウントページを確認 アカウント登録機能を有効にしたので、アカウントページがストアに反映されているかを確認しましょう。 管理画面からストアのプレビューを開きます。 ヘッダー部分に人型のアイコンが表示されていれば、アカウント登録の有効化が適用されています。 もし、表示されていない場合は、再度ページを読み込むか、設定が正しく保存されているかを確認しましょう。設定がすぐには反映されない場合もあります。 次に、アカウントページを確認します。人型のアイコンをクリックしましょう。 アイコンをクリックすると、ログインページが表示されます。 アカウントをまだ登録していない場合は、「アカウントを作成する」をクリックします。 アカウント作成のための情報入力画面に変わるので、情報を入力し「作成する」ボタンをクリックします。 アカウント登録が完了すると、アカウントページが表示されます。 アカウント登録後、チェックアウトページに飛んでしまった場合は、一度トップページにもどり、人型のアイコンをクリックしましょう。 アカウントページでは、ストアでの注文履歴や住所などの情報を確認できます。 つづいて、住所の設定ページを確認します。アカウントページの「住所を確認する」をクリックしましょう。 「住所を確認する」をクリックすると、アカウントに登録した住所が確認できるページが表示されます。 アカウント登録直後は、住所が設定されていないため、「編集」をクリックます。 住所などの情報の入力画面に変わるので、必要な情報を入力します。 必要な情報を入力できたら、「住所を追加する」をクリックしましょう。 設定をした住所はアカウントページの「あなたの住所」に表示されます。 これで、アカウント登録機能を有効にし、実際に登録したあとの画面も確認できました。 デフォルトのアカウント登録機能の問題点 上記で紹介したデフォルトのアカウント登録機能ですが、「アカウントを作成する」ボタンをクリックした後の入力欄と、アカウントの情報の記入欄が海外仕様になってしまうという問題があります。 ・「アカウントを作成」ボタンクリック後の画面 ・アカウントの情報入力欄 順番が日本仕様と違うと、お客様にとって紛らわしく、ストレスを与えてしまいます。 スムーズにアカウント登録をしてもらえるよう、日本仕様にデザインを変更しましょう。 今回はコードを編集して、日本仕様にデザインを変更する方法についてご紹介します。 デザインの編集 デザインを変更するために、コードの編集をします。コードはご用意したものをそのまま使っていただきます。 まず、「オンラインストア」＞「現在のテーマ」の「カスタマイズ」ボタンの左にある「…」ボタンをクリックします。 クリックすると、プルダウンが表示されるので、「コードを編集」をクリックします。 このとき、ストアのプレビュー画面も開いておくようにしましょう。 コードの編集画面へ移動したら、「セクション」フォルダの中にある「main-addresses.liquid」を開きます。このファイルに住所登録ページのコードが記載してあります。 このファイルを編集することで、入力欄の順番を入れ替えることができます。 HTMLやCSSに慣れていない場合、コードの編集は難しいので、以下のページから完成形のコードをコピー＆ペーストして編集していきましょう。 元々書かれているコードは全て削除して、以下のコードをコピー＆ぺーストしてください。 ・アカウント作成時の画面【完成形のコードはこちら】 ・アカウント情報入力欄【 完成形のコードはこちら 】 コードのペーストができたら、右上の保存ボタンをクリックして保存します。 保存ができたらプレビュー画面を更新し、日本仕様の順番になっているか確認しましょう。 以下の画像のような入力欄の順番になっていれば完了です。 以上で、アカウントページの作成ができました。 まとめ 今回は、アカウント登録機能と、アカウントページの作成方法について解説しました。 アカウント登録機能のメリットとデメリットを理解し、ストアに実装するか検討しましょう。また、アカウントの情報入力欄の編集は、コーディングの知識が多少必要になるため少し面倒です。 コーディングに慣れていない場合は、ご用意したコードをぜひ利用してください。難しい場合は有償でサポートも可能ですので、お気軽にご連絡くださいませ。
